How to: Extend the Style of a DocumentViewer

  • Article

This example shows how to extend 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 the BasedOn attribute to extend the default DocumentViewer style. In this case, the example style simply mirrors the background gradient used by the default toolbar style, and applies it to the background of the content display area.

<Window x:Class="SDKSample.Window1"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Window.Resources>
    <Style 
      x:Key="MyDVStyleExtend"
      BasedOn="{StaticResource {x:Type DocumentViewer}}" 
      TargetType="{x:Type DocumentViewer}">
      <Setter Property="Background">
        <Setter.Value>
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0.0" Color="#CC99CCFF" />
            <GradientStop Offset="1.0" Color="White" />
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>
  <Grid>
    <DocumentViewer  Style="{StaticResource MyDVStyleExtend}" Name="MyDocumentViewer"/>
  </Grid>
</Window>

The following figure shows how the styled DocumentViewer in this example renders (with no content):

Example of a DocumentViewer control with the default style extended.

Screenshot: DocumentViewer extended style

Task Remarks

  • Because the style shown in this example extends the DocumentViewer default style rather than replacing it, user interface (UI) elements defined by the default DocumentViewer style (such as the toolbar and context menu) are still shown.

  • 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: Replace the Style of a DocumentViewer

Reference

DocumentViewer