WPF FAQ - DocumentViewer

This example shows how to reflect the ‘Zoom’ value of a DocumentViewer in a TextBlock.

[XAML]

<Window x:Class='SDKSample.Window1'
        xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
        xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height='*' />
      <RowDefinition Height='*' />
    </Grid.RowDefinitions>

    <DocumentViewer Name='dvZoomSource' Grid.Row='0' />

    <TextBlock  Grid.Row='1'
        Text='{Binding ElementName=dvZoomSource, Path=Zoom, Mode=OneWay}' />
  </Grid>
</Window>

The following style uses the ‘BasedOn’ attribute to extend the default DocumentViewer style.

[XAML]

<Window x:Class='SDKSample.Window1'
        xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
        xmlns:x='http://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>

This can be done with the following code snippets,

Define the required styles in the App.xaml file.

[XAML]

<Style 
      x:Key="MyDVStyleExtend1"
      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="Red" />
                <GradientStop Offset="1.0" Color="White" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>
<Style 
      x:Key="MyDVStyleExtend2"
      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="Blue" />
                <GradientStop Offset="1.0" Color="White" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

Define the DocumentViewer in MainWindow.

[XAML]

<Grid>
    <DocumentViewer  Name="MyDocumentViewer"/>
    <Button Content="Style1" Height="30" Width="100" Click="Button1_Click" />
    <Button Content="Style2" Height="30" Width="100" Click="Button2_Click" />           
</Grid>

Replace the styles for document viewer based on button clicks from main window.

[C#]
private void Button1_Click(object sender, RoutedEventArgs e)
{
    MyDocumentViewer.Style = (Style)Application.Current.Resources['MyDVStyleExtend1'];
}
 
private void Button2_Click(object sender, RoutedEventArgs e)
{
    MyDocumentViewer.Style = (Style)Application.Current.Resources['MyDVStyleExtend2'];
}

XPS documents can be easily loaded into the documentviewer.

Here’s the code snippet.

[XAML]
          
   <DocumentViewer Name='documentViewer' />

[C#]

   XpsDocument xpsDocument = new XpsDocument('sample.xps', FileAccess.Read);
   documentViewer.Document = xpsDocument;