DocumentViewer Styles and Templates

 

This topic describes the styles and templates for the DocumentViewer control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

The following table lists the named parts for the DocumentViewer control.

PartTypeDescription
PART_ContentHostScrollViewerThe content and scrolling area.
PART_FindToolBarHostContentControlThe search box, at the bottom by default.

The following table lists the visual states for the DocumentViewer control.

VisualState NameVisualStateGroup NameDescription
ValidValidationStatesThe control uses the Validation class and the Validation.HasError attached property is false.
InvalidFocusedValidationStatesThe Validation.HasError attached property is true has the control has focus.
InvalidUnfocusedValidationStatesThe Validation.HasError attached property is true has the control does not have focus.

The following example shows how to define a ControlTemplate for the DocumentViewer control.

  <Style x:Key="{x:Type DocumentViewer}"
         TargetType="{x:Type DocumentViewer}">
    <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
    <Setter Property="Background"
            Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
    <Setter Property="FocusVisualStyle"
            Value="{x:Null}" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type DocumentViewer}">
          <Border BorderThickness="{TemplateBinding BorderThickness}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  Focusable="False">
            <Grid KeyboardNavigation.TabNavigation="Local">
              <Grid.Background>
                <SolidColorBrush Color="{DynamicResource ControlLightColor}" />
              </Grid.Background>
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
              </Grid.RowDefinitions>
              <ToolBar ToolBarTray.IsLocked="True"
                       KeyboardNavigation.TabNavigation="Continue">
                <Button Command="ApplicationCommands.Print"
                        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                        Content="Print" />
                <Button Command="ApplicationCommands.Copy"
                        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                        Content="Copy" />
                <Separator />
                <Button Command="NavigationCommands.IncreaseZoom"
                        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                        Content="Zoom In" />
                <Button Command="NavigationCommands.DecreaseZoom"
                        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                        Content="Zoom Out" />
                <Separator />
                <Button Command="NavigationCommands.Zoom"
                        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                        CommandParameter="100.0"
                        Content="Actual Size" />
                <Button Command="DocumentViewer.FitToWidthCommand"
                        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                        Content="Fit to Width" />
                <Button Command="DocumentViewer.FitToMaxPagesAcrossCommand"
                        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                        CommandParameter="1"
                        Content="Whole Page" />
                <Button Command="DocumentViewer.FitToMaxPagesAcrossCommand"
                        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                        CommandParameter="2"
                        Content="Two Pages" />
              </ToolBar>

              <ScrollViewer Grid.Row="1"
                            CanContentScroll="true"
                            HorizontalScrollBarVisibility="Auto"
                            x:Name="PART_ContentHost"
                            IsTabStop="true">
                <ScrollViewer.Background>
                  <LinearGradientBrush EndPoint="0.5,1"
                                       StartPoint="0.5,0">
                    <GradientStop Color="{DynamicResource ControlLightColor}"
                                  Offset="0" />
                    <GradientStop Color="{DynamicResource ControlMediumColor}"
                                  Offset="1" />
                  </LinearGradientBrush>
                </ScrollViewer.Background>
              </ScrollViewer>

              <ContentControl Grid.Row="2"
                              x:Name="PART_FindToolBarHost"/>
            </Grid>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

The preceding example uses one or more of the following resources.

  <!--Control colors.-->
  <Color x:Key="WindowColor">#FFE8EDF9</Color>
  <Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
  <Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

  <Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
  <Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
  <Color x:Key="DisabledForegroundColor">#FF888888</Color>

  <Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
  <Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

  <Color x:Key="ControlLightColor">White</Color>
  <Color x:Key="ControlMediumColor">#FF7381F9</Color>
  <Color x:Key="ControlDarkColor">#FF211AA9</Color>

  <Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
  <Color x:Key="ControlPressedColor">#FF211AA9</Color>


  <Color x:Key="GlyphColor">#FF444444</Color>
  <Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

  <!--Border colors-->
  <Color x:Key="BorderLightColor">#FFCCCCCC</Color>
  <Color x:Key="BorderMediumColor">#FF888888</Color>
  <Color x:Key="BorderDarkColor">#FF444444</Color>

  <Color x:Key="PressedBorderLightColor">#FF888888</Color>
  <Color x:Key="PressedBorderDarkColor">#FF444444</Color>

  <Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
  <Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

  <Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

  <!--Control-specific resources.-->
  <Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
  <Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
  <Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

  <Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

  <LinearGradientBrush x:Key="MenuPopupBrush"
                       EndPoint="0.5,1"
                       StartPoint="0.5,0">
    <GradientStop Color="{DynamicResource ControlLightColor}"
                  Offset="0" />
    <GradientStop Color="{DynamicResource ControlMediumColor}"
                  Offset="0.5" />
    <GradientStop Color="{DynamicResource ControlLightColor}"
                  Offset="1" />
  </LinearGradientBrush>

  <LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                       StartPoint="0,0"
                       EndPoint="1,0">
    <LinearGradientBrush.GradientStops>
      <GradientStopCollection>
        <GradientStop Color="#000000FF"
                      Offset="0" />
        <GradientStop Color="#600000FF"
                      Offset="0.4" />
        <GradientStop Color="#600000FF"
                      Offset="0.6" />
        <GradientStop Color="#000000FF"
                      Offset="1" />
      </GradientStopCollection>
    </LinearGradientBrush.GradientStops>
  </LinearGradientBrush>

For the complete sample, see Styling with ControlTemplates Sample.

Style
ControlTemplate
Control Styles and Templates
Control Customization
Styling and Templating
Customizing the Appearance of an Existing Control by Creating a ControlTemplate

Show: