프로그램 개발/WPF: Style&Template

ScrollBar①

(ㅇㅅㅎ) 2022. 6. 17. 14:41
728x90
반응형

 

 안녕하세요, 이번 글에서는 Microsoft에서 제공하는 WPF [ScrollBar의 스타일 및 템플릿] 예제를 톺아보겠습니다. ScrollBar Style의 경우 ScrollBarLineButton, ScrollBarPageButton, ScrollBarThumb, VerticalScrollBar, HorizontalScrollBar, ScrollBar 순서로 나눠져 있습니다. 이번 글에서는 ScrollBar와  HorizontalScrollBar&VerticalScrollBar에 대해서 보도록 하겠습니다.

⭐ ScrollBarLineButton은 [RepeatButton의 스타일 및 템플릿] 예제와 동일합니다.

 

 

 

ScrollBar

 값에 따라 위치가 지정되는 이동식 Thumb이 있는 Scroll 막대를 제공하는 Control을 나타냅니다. ScrollBar는 Thumb와 RepeatButton을 사용하여 Value 값을 조정할 수 있습니다. Scroll은 기본 Horizontal 형이며 Orientation 속성을 이용하여 Vertical로 설정 가능합니다.

 

 

 

ScrollBar Style

 예제의 XAML 코드를 Scroll에 적용하면 위와 같은 결과가 나옵니다. 이러한 결과에 도달하도록 코드 순서로 속성을 살펴보면 다음과 같습니다.

 

 

 

ScrollBar 속성

<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
  <Setter Property="SnapsToDevicePixels" Value="True" />
  <Setter Property="OverridesDefaultStyle" Value="true" />
  <Style.Triggers>
    ...
  </Style.Triggers>
</Style>

x:Key

 XAML 정의 사전에서 만들고 참고하는 요소를 고유하게 식별합니다. 문자를 이용하여 값을 설정하지만 예제에서처럼 x:Type을 사용하여 Control 자체에 바로 적용하도록 설정할 수 있습니다.

 

 

TargetType

 이 Style을 적용할 형식을 설정합니다.

 

 

SnapsToDevicePixels

 렌더링 하는 동안 ScrollBar의 렌더링에 디바이스 관련 픽셀 스냅(Pixel Snap)을 사용할지 여부를 설정합니다. 픽셀 스냅을 사용하면 값을 true로 설정하고, 그렇지 않으면 false로 설정합니다.

⭐ 픽셀 스냅(Pixel Snap)을 사용하는 이유

더보기

 WPF는 시스템 DPI 설정에 맞게 자동으로 크기를 조정하게 됩니다. 조정할 때 가장자리가 흐려지거나 반투명하게 표시되는 문제가 발생하는데, 이 문제를 해결하기 위해서 픽셀 스냅 기능을 사용하여 객체의 가장자리를 픽셀에 맞추어 고정시키는 기능을 제공합니다. 픽셀 스냅을 사용하면 객체에 작은 단위의 offset을 적용하여 객체의 크기를 픽셀에 맞추거나 일부분을 렌더링 시점에서 제거하여 해결하는 방법입니다.

 

 

OverridesDefaultStyle

 테마 스타일의 스타일 속성을 포함할지 여부를 설정합니다. 이 요소가 테마 스타일 속성을 사용하지 않으면 true이고, 사용하면 false입니다.

 

 

 

ScrollBar 이벤트

 ScrollBar Style에서는 Orientation 이벤트를 Trigger로 표현하였습니다.

 

Triggers

<Style.Triggers>
  <Trigger Property="Orientation" Value="Horizontal">
    <Setter Property="Width" Value="Auto" />
    <Setter Property="Height" Value="18" />
    <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
  </Trigger>
  <Trigger Property="Orientation" Value="Vertical">
    <Setter Property="Width" Value="18" />
    <Setter Property="Height" Value="Auto" />
    <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
  </Trigger>
</Style.Triggers>

 Trigger는 어떤 조건이나 이벤트 등이 주어졌을 때 Control의 상태 또는 이벤트 핸들러 등을 호출하는 기능을 의미합니다. 예제에서는 Orientation의 값에 따라서 Width, Height와 Template를 변경합니다.

 

 

 

 

 

 

HorizontalScrollBar & VerticalScrollBar

 예제에서 사용된 HorizontalScrollBar와 VerticalScrollBar는 ScrollBar의 Orientation의 값에 따라서 ScrollBar Template에 사용할 ControlTemplate을 미리 정의해둔 것입니다.

 

 

HorizontalScrollBar & VerticalScrollBar Template 구성

<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
    <Grid>
        ...
        <Border ... />
        <RepeatButton ... />
        <Track x:Name="PART_Track" ... >
            ...
        </Track>
        <RepeatButton ... />
    </Grid>
</ControlTemplate>

<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
    <Grid>
        ...
        <Border ... />
        <RepeatButton ... />
        <Track x:Name="PART_Track" ... >
            ...
        </Track>
        <RepeatButton ... />
    </Grid>
</ControlTemplate>

 

Grid

 열 및 행으로 구성되는 유연한 모눈 영역을 정의합니다.

⭐ Grid 속성

더보기

[ Horizontal ]

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition MaxWidth="18" />
        <ColumnDefinition Width="0.00001*" />
        <ColumnDefinition MaxWidth="18" />
    </Grid.ColumnDefinitions>
    ...
</Grid>

[ Vertical ] 

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition MaxHeight="18" />
        <RowDefinition Height="0.00001*" />
        <RowDefinition MaxHeight="18" />
    </Grid.RowDefinitions>
    ...
</Grid>

 

ColumnDefinitions

 Grid에서 ColumnDeifinition을 사용하여 ColumnDefinitionCollection(ColumnDefinition 개체의 순서가 지정된 컬렉션)을 설정합니다.

 

ColumnDefinition

 Grid 요소에 적용되는 열 별 속성을 정의합니다. Width로 너비를 숫자 값, 'Auto' 또는 '*'로 설정할 수 있습니다.

 

RowDefinitions

 Grid에서 RowDefinition을 사용하여 RowDefinitionCollection(RowDefinition 개체의 순서가 지정된 컬렉션)을 설정합니다.

 

RowDefinition

 Grid 요소에 적용되는 행 별 속성을 정의합니다. Height로 높이를 숫자 값, 'Auto' 또는 '*'로 설정할 수 있습니다.

 

Border

 다른 요소의 주위에 윤곽선, 배경 또는 둘 다를 그립니다.

⭐ Border 속성

더보기

[ Horizontal ]

<Border Grid.ColumnSpan="3" CornerRadius="2" Background="#F0F0F0" />

[ Vertical ] 

<Border Grid.RowSpan="3" CornerRadius="2" Background="#F0F0F0" />

 

Grid.ColumnSpan

 Grid에서 Border를 채울 전체 열 수를 설정합니다.

 

CornerRadius

 Border의 모서리 둥근 정도를 설정합니다.

 

Background

 Border의 배경색을 설정합니다. 예제에서는 16진수를 사용하여 설정하였습니다.

 

RepeatButton

 누른 시점부터 놓을 때까지 해당 Click 이벤트를 반복해서 발생시키는 Control을 나타냅니다.

⭐ RepeatButton 속성

더보기

[ Horizontal - 왼쪽 ]

<RepeatButton Grid.Column="0" Style="{StaticResource ScrollBarLineButton}" Width="18" Command="ScrollBar.LineLeftCommand" Content="M 4 0 L 4 8 L 0 4 Z" />

[ Horizontal - 오른쪽 ]

<RepeatButton Grid.Column="2" Style="{StaticResource ScrollBarLineButton}" Width="18" Command="ScrollBar.LineRightCommand" Content="M 0 0 L 4 4 L 0 8 Z" />

[ Vertical - 위쪽 ]

<RepeatButton Grid.Row="0" Style="{StaticResource ScrollBarLineButton}" Height="18" Command="ScrollBar.LineUpCommand" Content="M 0 4 L 8 4 L 4 0 Z" />

[ Vertical - 아래쪽 ]

<RepeatButton Grid.Row="2" Style="{StaticResource ScrollBarLineButton}" Height="18" Command="ScrollBar.LineDownCommand" Content="M 0 0 L 4 4 L 8 0 Z" />

 

Grid.Column

 RepeatButton을 표시할 Grid의 열 값을 설정합니다.

 

Grid.Row

 RepeatButton을 표시할 Grid의 행 값을 설정합니다.

 

Style

 Style은 RepeatButton에 속성, 리소스 및 이벤트 처리기를 공유할 수 있게 합니다. 예제에서는 미리 정의한 Style인 ScrollBarLineButton으로 설정했습니다.

 

Width

 RepeatButton의 너비를 설정합니다.

 

Height

 RepeatButton의 높이를 설정합니다.

 

Command

 RepeatButton을 누를 때 호출할 명령을 설정합니다. 예제에서는 ScrollBar.LineLeftCommand와 ScrollBar.LineRightCommand로 설정했습니다.

🌟 ScrollBar.LineLeftCommand : ScrollBar 값이 줄어드는 가로 방향으로 Track을 Scroll 하는 명령

🌟 ScrollBar.LineRightCommand : ScrollBar 값이 늘어나는 가로 방향으로 Track을 Scroll 하는 명령

🌟 ScrollBar.LineUpCommand : ScrollBar 값이 줄어드는 세로 방향으로 Track을 Scroll 하는 명령

🌟 ScrollBar.LineDownCommand : ScrollBar 값이 늘어나는 세로 방향으로 Track을 Scroll 하는 명령

 

Content

 RepeatButton에서 ContentControl의 내용을 설정합니다. 예제에서는 ScrollBarLineButton의 Path에서 사용될 Data 값으로 설정했습니다.

 

Track

 Thumb를 설정하는 데 사용되는 RepeatButton Control과 두 Value Control의 위치와 크기를 지정하는 Control 기본 형식을 나타냅니다.

⭐ Track 속성

더보기

[ Horizontal ]

<Track x:Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
    <Track.DecreaseRepeatButton>
        <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageLeftCommand" />
    </Track.DecreaseRepeatButton>
    <Track.Thumb>
        ...
    </Track.Thumb>
    <Track.IncreaseRepeatButton>
        <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageRightCommand" />
    </Track.IncreaseRepeatButton>
</Track>

[ Vertical ]

<Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
    <Track.DecreaseRepeatButton>
        <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageUpCommand" />
    </Track.DecreaseRepeatButton>
    <Track.Thumb>
        ...
    </Track.Thumb>
    <Track.IncreaseRepeatButton>
        <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageDownCommand" />
    </Track.IncreaseRepeatButton>
</Track>

 

x:Name

 Track에 이름을 설정합니다. 이름을 설정하는 것과 동시에 다른 곳에서 사용할 수 있도록 만들어줍니다. 예제에서는 PART_Track으로 설정했습니다.

🌟 PART_Track : ScrollBar의 위치를 나타내는 요소에 대한 Container입니다.

 

Grid.Column

 Track을 표시할 Grid의 열 값을 설정합니다.

 

Grid.Row

 Track을 표시할 Grid의 행 값을 설정합니다.

 

IsDirectionReversed

 Value가 증가하는 방향이 기본 방향과 반대인지 여부를 설정합니다. 값이 증가하는 방향이 반전되었으면 true이고, 그렇지 않으면 false입니다.

 

DecreaseRepeatButton

 RepeatButton의 Value 속성을 감소시키는 Track을 설정합니다. 예제에서는 ScrollBarPageButton 스타일을 가진 RepeatButton으로 설정했습니다.

 

IncreaseRepeatButton

 RepeatButton의 Value 속성을 증가시키는 Track을 설정합니다. 예제에서는 ScrollBarPageButton 스타일을 가진 RepeatButton으로 설정했습니다. 

 

Thumb

 Thumb의 Value를 변경하는 데 사용되는 Track Control을 설정합니다. 예제에서는 Thumb 스타일로 ScrollBarThumb을 사용했으며 Margin값을 주어서 상하에 여백을 주었습니다. 그리고 BorderBrush와 Background는 LinearGradientBrush를 사용하여 그라데이션 값으로 설정했습니다.

👀 그라데이션 색에 대해서 알고 싶으신 분은 이 페이지를 참고하시길 바랍니다.

<!-- Horizontal -->
<Track.Thumb>
    <Thumb Style="{StaticResource ScrollBarThumb}" Margin="0,1,0,1">
        <Thumb.BorderBrush>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <LinearGradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Color="{DynamicResource BorderLightColor}" Offset="0.0" />
                        <GradientStop Color="{DynamicResource BorderDarkColor}" Offset="1.0" />
                    </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Thumb.BorderBrush>
        <Thumb.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <LinearGradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Color="{DynamicResource ControlLightColor}" Offset="0.0" />
                        <GradientStop Color="{DynamicResource ControlMediumColor}" Offset="1.0" />
                    </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Thumb.Background>
    </Thumb>
</Track.Thumb>

<!-- Vertical -->
<Track.Thumb>
    <Thumb Style="{StaticResource ScrollBarThumb}" Margin="1,0,1,0">
        <Thumb.BorderBrush>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <LinearGradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Color="{DynamicResource BorderLightColor}" Offset="0.0" />
                        <GradientStop Color="{DynamicResource BorderDarkColor}" Offset="1.0" />
                    </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Thumb.BorderBrush>
        <Thumb.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <LinearGradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Color="{DynamicResource ControlLightColor}" Offset="0.0" />
                        <GradientStop Color="{DynamicResource ControlMediumColor}" Offset="1.0" />
                    </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Thumb.Background>
    </Thumb>
</Track.Thumb>

 

 

 

 

 

 

전체 코드

더보기 
<Style x:Key="ScrollBarLineButton"
       TargetType="{x:Type RepeatButton}">
  <Setter Property="SnapsToDevicePixels"
          Value="True" />
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="Focusable"
          Value="false" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type RepeatButton}">
        <Border x:Name="Border"
                Margin="1"
                CornerRadius="2"
                BorderThickness="1">
          <Border.BorderBrush>
            <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="0,1">
              <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                  <GradientStop Color="{DynamicResource BorderMediumColor}"
                                Offset="0.0" />
                  <GradientStop Color="{DynamicResource BorderDarkColor}"
                                Offset="1.0" />
                </GradientStopCollection>
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Border.BorderBrush>
          <Border.Background>
            <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="0,1">
              <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                  <GradientStop Color="{DynamicResource ControlLightColor}"/>
                  <GradientStop Color="{DynamicResource ControlMediumColor}"
                                Offset="1.0" />
                </GradientStopCollection>
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Border.Background>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="MouseOver" />
              <VisualState x:Name="Pressed">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource ControlPressedColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                Storyboard.TargetProperty="(Shape.Fill).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledForegroundColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Path x:Name="Arrow"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Data="{Binding Content, 
            RelativeSource={RelativeSource TemplatedParent}}" >
              <Path.Fill>
                  <SolidColorBrush Color="{DynamicResource GlyphColor}"/>
              </Path.Fill>
          </Path>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="ScrollBarPageButton"
       TargetType="{x:Type RepeatButton}">
  <Setter Property="SnapsToDevicePixels"
          Value="True" />
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="IsTabStop"
          Value="false" />
  <Setter Property="Focusable"
          Value="false" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type RepeatButton}">
        <Border Background="Transparent" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="ScrollBarThumb"
       TargetType="{x:Type Thumb}">
  <Setter Property="SnapsToDevicePixels"
          Value="True" />
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="IsTabStop"
          Value="false" />
  <Setter Property="Focusable"
          Value="false" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Thumb}">
        <Border CornerRadius="2"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="1" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<ControlTemplate x:Key="VerticalScrollBar"
                 TargetType="{x:Type ScrollBar}">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition MaxHeight="18" />
      <RowDefinition Height="0.00001*" />
      <RowDefinition MaxHeight="18" />
    </Grid.RowDefinitions>
    <Border Grid.RowSpan="3"
            CornerRadius="2"
            Background="#F0F0F0" />
    <RepeatButton Grid.Row="0"
                  Style="{StaticResource ScrollBarLineButton}"
                  Height="18"
                  Command="ScrollBar.LineUpCommand"
                  Content="M 0 4 L 8 4 L 4 0 Z" />
    <Track x:Name="PART_Track"
           Grid.Row="1"
           IsDirectionReversed="true">
      <Track.DecreaseRepeatButton>
        <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                      Command="ScrollBar.PageUpCommand" />
      </Track.DecreaseRepeatButton>
      <Track.Thumb>
        <Thumb Style="{StaticResource ScrollBarThumb}"
               Margin="1,0,1,0">
          <Thumb.BorderBrush>

            <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="1,0">
              <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                  <GradientStop Color="{DynamicResource BorderLightColor}"
                                Offset="0.0" />
                  <GradientStop Color="{DynamicResource BorderDarkColor}"
                                Offset="1.0" />
                </GradientStopCollection>
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>

          </Thumb.BorderBrush>
          <Thumb.Background>

            <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="1,0">
              <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                  <GradientStop Color="{DynamicResource ControlLightColor}"
                                Offset="0.0" />
                  <GradientStop Color="{DynamicResource ControlMediumColor}"
                                Offset="1.0" />
                </GradientStopCollection>
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>

          </Thumb.Background>
        </Thumb>
      </Track.Thumb>
      <Track.IncreaseRepeatButton>
        <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                      Command="ScrollBar.PageDownCommand" />
      </Track.IncreaseRepeatButton>
    </Track>
    <RepeatButton Grid.Row="2"
                  Style="{StaticResource ScrollBarLineButton}"
                  Height="18"
                  Command="ScrollBar.LineDownCommand"
                  Content="M 0 0 L 4 4 L 8 0 Z" />
  </Grid>
</ControlTemplate>

<ControlTemplate x:Key="HorizontalScrollBar"
                 TargetType="{x:Type ScrollBar}">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition MaxWidth="18" />
      <ColumnDefinition Width="0.00001*" />
      <ColumnDefinition MaxWidth="18" />
    </Grid.ColumnDefinitions>
    <Border Grid.ColumnSpan="3"
            CornerRadius="2"
            Background="#F0F0F0" />
    <RepeatButton Grid.Column="0"
                  Style="{StaticResource ScrollBarLineButton}"
                  Width="18"
                  Command="ScrollBar.LineLeftCommand"
                  Content="M 4 0 L 4 8 L 0 4 Z" />
    <Track x:Name="PART_Track"
           Grid.Column="1"
           IsDirectionReversed="False">
      <Track.DecreaseRepeatButton>
        <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                      Command="ScrollBar.PageLeftCommand" />
      </Track.DecreaseRepeatButton>
      <Track.Thumb>
        <Thumb Style="{StaticResource ScrollBarThumb}"
               Margin="0,1,0,1">

          <Thumb.BorderBrush>

            <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="1,0">
              <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                  <GradientStop Color="{DynamicResource BorderLightColor}"
                                Offset="0.0" />
                  <GradientStop Color="{DynamicResource BorderDarkColor}"
                                Offset="1.0" />
                </GradientStopCollection>
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>

          </Thumb.BorderBrush>
          <Thumb.Background>

            <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="0,1">
              <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                  <GradientStop Color="{DynamicResource ControlLightColor}"
                                Offset="0.0" />
                  <GradientStop Color="{DynamicResource ControlMediumColor}"
                                Offset="1.0" />
                </GradientStopCollection>
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>

          </Thumb.Background>
        </Thumb>
      </Track.Thumb>
      <Track.IncreaseRepeatButton>
        <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                      Command="ScrollBar.PageRightCommand" />
      </Track.IncreaseRepeatButton>
    </Track>
    <RepeatButton Grid.Column="2"
                  Style="{StaticResource ScrollBarLineButton}"
                  Width="18"
                  Command="ScrollBar.LineRightCommand"
                  Content="M 0 0 L 4 4 L 0 8 Z" />
  </Grid>
</ControlTemplate>

<Style x:Key="{x:Type ScrollBar}"
       TargetType="{x:Type ScrollBar}">
  <Setter Property="SnapsToDevicePixels"
          Value="True" />
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Style.Triggers>
    <Trigger Property="Orientation"
             Value="Horizontal">
      <Setter Property="Width"
              Value="Auto" />
      <Setter Property="Height"
              Value="18" />
      <Setter Property="Template"
              Value="{StaticResource HorizontalScrollBar}" />
    </Trigger>
    <Trigger Property="Orientation"
             Value="Vertical">
      <Setter Property="Width"
              Value="18" />
      <Setter Property="Height"
              Value="Auto" />
      <Setter Property="Template"
              Value="{StaticResource VerticalScrollBar}" />
    </Trigger>
  </Style.Triggers>
</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>

 

 

 

 

 

 

 이 글의 내용은 아래의 사이트에서 기초합니다.

https://docs.microsoft.com/ko-kr/dotnet/desktop/wpf/controls/scrollbar-styles-and-templates?view=netframeworkdesktop-4.8 

 

ScrollBar 스타일 및 템플릿 - WPF .NET Framework

아티클 05/08/2022 읽는 데 5분 걸림 기여자 1명 이 문서의 내용 --> 이 항목에서는 ScrollBar 컨트롤에 대한 스타일 및 템플릿을 설명합니다. 기본값을 수정할 수 있습니다 ControlTemplate 고유한 모양을

docs.microsoft.com

 

반응형

'프로그램 개발 > WPF: Style&Template' 카테고리의 다른 글

ScrollViewer  (0) 2022.06.17
ScrollBar②  (0) 2022.06.17
RepeatButton  (0) 2022.06.16
RadioButton  (0) 2022.06.16
ProgressBar  (0) 2022.06.15

'프로그램 개발/WPF: Style&Template'의 다른글

  • 현재글ScrollBar①

관련글

댓글

티스토리툴바