Share via

How to: Replace the Style of a DocumentViewer

  • Article

This example shows how to replace the default style of a DocumentViewer control.

Example

The following Extensible Application Markup Language (XAML) code defines a window that contains a DocumentViewer control and an accompanying style. The example style uses a ControlTemplate to replace the default DocumentViewer style. In this case, the example style simply defines a Border that is ten pixels thick, and it applies gradient coloring to the Border and to the background of the internal ScrollViewer used by DocumentViewer to display content.

<Window x:Class="SDKSample.Window1"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        Title="DocumentViewer_ExtendStyle">
  <Window.Resources>
    <Style 
      x:Key="MyDVStyleReplace"
      TargetType="{x:Type DocumentViewer}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type DocumentViewer}">
            <Grid>
              <Border BorderThickness="10">
                <Border.BorderBrush>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <LinearGradientBrush.GradientStops>
                      <GradientStop Color="Yellow" Offset="0" />
                      <GradientStop Color="Red" Offset="0.25" />
                      <GradientStop Color="Blue" Offset="0.75" />
                      <GradientStop Color="LimeGreen" Offset="1" />
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Border.BorderBrush>
                <ScrollViewer Name="PART_ContentHost">
                  <ScrollViewer.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                      <LinearGradientBrush.GradientStops>
                        <GradientStop Color="Yellow" Offset="0" />
                        <GradientStop Color="Green" Offset="1" />
                      </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                  </ScrollViewer.Background>
                </ScrollViewer>
              </Border>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>
  <Grid>
    <DocumentViewer  Style="{StaticResource MyDVStyleReplace}" Name="MyDocumentViewer"/>
  </Grid>
</Window>

Task Remarks

  • Because the style shown in this example replaces the DocumentViewer default style rather than extending it, the DocumentViewer toolbar, context menu, and other user interface (UI) elements (which are defined by the default DocumentViewer style) are not shown.

  • When replacing the style for a DocumentViewer control, the control template must include a ScrollViewer with a Name of "PART_ContentHost".

  • A style is applied by matching the style key (x:Key) to the value referenced by an element's Style attribute. In the example show above, the style key is "MyDVStyleReplace". The key itself is an arbitrary string value that must be unique within the current scope.

  • Styles defined as local resources must by referenced as a static resource, using the StaticResource syntax show in the example above.

  • The style and ControlTempate use TargetType to indicate that the style is applicable only to DocumentViewer controls. A mismatch between the target type for the style or control template and the element to which the style is applied will raise an InvalidOperationException exception.

See Also

Tasks

How to: Extend the Style of a DocumentViewer

Reference

StaticResourceExtension
DocumentViewer