다음을 통해 공유

ScrollViewer 스타일 및 템플릿

  • 아티클

이 항목에서는 ScrollViewer 컨트롤의 스타일 및 템플릿을 설명합니다. 기본값을 수정할 수 있습니다 ControlTemplate 고유한 모양을 제어할 수 있습니다. 자세한 내용은 컨트롤의 템플릿 만들기를 참조하세요.

ScrollViewer 파트

다음 표에서는 ScrollViewer 컨트롤의 명명된 부분을 나열합니다.

부분 Type 설명
PART_ScrollContentPresenter ScrollContentPresenter ScrollViewer의 콘텐츠에 대한 자리 표시자입니다.
PART_HorizontalScrollBar ScrollBar ScrollBar는 콘텐츠를 가로로 스크롤하는 데 사용됩니다.
PART_VerticalScrollBar ScrollBar ScrollBar는 콘텐츠를 세로로 스크롤하는 데 사용됩니다.

ScrollViewer States

다음 표에서는 ScrollViewer 컨트롤의 시각적 개체 상태를 나열합니다.

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

ScrollViewer ControlTemplate 예제

다음 예제는 ScrollViewer 컨트롤의 ControlTemplate을 정의하는 방법을 보여 줍니다.

<Style x:Key="LeftScrollViewer"
       TargetType="{x:Type ScrollViewer}">
  <Setter Property="OverridesDefaultStyle"
          Value="True" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ScrollViewer}">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>
          <Border Grid.Column="1"
                  BorderThickness="0,1,1,1">
            <Border.BorderBrush>
              <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
            </Border.BorderBrush>
            <ScrollContentPresenter CanContentScroll="{TemplateBinding CanContentScroll}" />
          </Border>
          <ScrollBar x:Name="PART_VerticalScrollBar"
                     Value="{TemplateBinding VerticalOffset}"
                     Maximum="{TemplateBinding ScrollableHeight}"
                     ViewportSize="{TemplateBinding ViewportHeight}"
                     Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
          <ScrollBar x:Name="PART_HorizontalScrollBar"
                     Orientation="Horizontal"
                     Grid.Row="1"
                     Grid.Column="1"
                     Value="{TemplateBinding HorizontalOffset}"
                     Maximum="{TemplateBinding ScrollableWidth}"
                     ViewportSize="{TemplateBinding ViewportWidth}"
                     Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

        </Grid>
      </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 Sample(ControlTemplate으로 스타일 지정 샘플)을 참조하세요.

참고 항목