DocumentViewer 스타일 및 템플릿

아티클
08/10/2011

업데이트: 2010년 8월

이 항목에서는 DocumentViewer 컨트롤의 스타일 및 템플릿에 대해 설명합니다. 기본 ControlTemplate을 수정하여 컨트롤에 고유한 모양을 지정할 수 있습니다. 자세한 내용은 ControlTemplate을 만들어 기존 컨트롤의 모양 사용자 지정을 참조하십시오.

DocumentViewer 요소

다음 표에서는 DocumentViewer 컨트롤의 명명된 요소를 보여 줍니다.

파트	형식	설명
PART_ContentHost	ScrollViewer	콘텐츠 및 스크롤 영역입니다.
PART_FindToolBarHost	ContentControl	기본적으로 맨 아래에 있는 검색 상자입니다.

DocumentViewer 상태

다음 표에서는 DocumentViewer 컨트롤의 시각적 상태를 보여 줍니다.

VisualState 이름	VisualStateGroup 이름	설명
Valid	ValidationStates	이 컨트롤은 Validation 클래스를 사용하며 연결된 속성 Validation.HasError는 false입니다.
InvalidFocused	ValidationStates	컨트롤에 포커스가 있는 경우 연결된 속성 Validation.HasError는 true입니다.
InvalidUnfocused	ValidationStates	컨트롤에 포커스가 없는 경우 연결된 속성 Validation.HasError는 true입니다.

DocumentViewer ControlTemplate 예제

다음 예제에서는 DocumentViewer 컨트롤에 대한 ControlTemplate을 정의하는 방법을 보여 줍니다.

<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>

앞의 예제에서는 다음 리소스를 하나 이상 사용합니다.

<!--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>

전체 샘플을 보려면 Styling with ControlTemplates 샘플을 참조하십시오.

참고 항목

변경 기록

날짜	변경 내용	이유
2010년 8월	ControlTemplate 예제를 추가했습니다.	향상된 기능 관련 정보

2010년 8월

ControlTemplate 예제를 추가했습니다.

향상된 기능 관련 정보

다음을 통해 공유