[C#/WPF] ControlTemplate 엘리먼트 : ScrollBar 엘리먼트 정의하기

■ ControlTemplate 엘리먼트를 사용해 ScrollBar 엘리먼트를 정의하는 방법을 보여준다.

TestProject.zip

0.01MB

▶ MainWindow.xaml

<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Color x:Key="DisabledForegroundColorKey">#ff888888</Color>
        <Color x:Key="ControlLightColorKey">White</Color>
        <Color x:Key="ControlMediumColorKey">#ff7381f9</Color>
        <Color x:Key="ControlPressedColorKey">#ff211aa9</Color>
        <Color x:Key="GlyphColorKey">#ff444444</Color>
        <Color x:Key="BorderLightColorKey">#ffcccccc</Color>
        <Color x:Key="BorderMediumColorKey">#ff888888</Color>
        <Color x:Key="BorderDarkColorKey">#ff444444</Color>
        <Style x:Key="ScrollBarLineButtonStyleKey" 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 Name="border"
                            Margin="1"
                            CornerRadius="2"
                            BorderThickness="1">
                            <Border.BorderBrush>
                                <LinearGradientBrush
                                    StartPoint="0 0"
                                    EndPoint="0 1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Offset="0.0" Color="{DynamicResource BorderMediumColorKey}" />
                                            <GradientStop Offset="1.0" Color="{DynamicResource BorderDarkColorKey  }" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                            <Border.Background>
                                <LinearGradientBrush
                                    StartPoint="0 0"
                                    EndPoint="0 1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop              Color="{DynamicResource ControlLightColorKey }" />
                                            <GradientStop Offset="1.0" Color="{DynamicResource ControlMediumColorKey}" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Border.Background>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal"    />
                                    <VisualState Name="MouseOver" />
                                    <VisualState Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="arrowPath"
                                                Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Path Name="arrowPath"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Data="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}">
                                <Path.Fill>
                                    <SolidColorBrush Color="{DynamicResource GlyphColorKey}" />
                                </Path.Fill>
                            </Path>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ScrollBarPageButtonStyleKey" 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="ScrollBarThumbStyleKey" 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"
                            BorderThickness="1"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <ControlTemplate x:Key="VerticalScrollBarTemplateKey" 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 ScrollBarLineButtonStyleKey}"
                    Height="18"
                    Command="ScrollBar.LineUpCommand"
                    Content="M 0 4 L 8 4 L 4 0 Z" />
                <Track Name="PART_Track" Grid.Row="1"
                    IsDirectionReversed="true">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton
                            Style="{StaticResource ScrollBarPageButtonStyleKey}"
                            Command="ScrollBar.PageUpCommand" />
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb
                            Style="{StaticResource ScrollBarThumbStyleKey}"
                            Margin="1 0 1 0">
                            <Thumb.BorderBrush>
                                <LinearGradientBrush
                                    StartPoint="0 0"
                                    EndPoint="1 0">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Offset="0.0" Color="{DynamicResource BorderLightColorKey}" />
                                            <GradientStop Offset="1.0" Color="{DynamicResource BorderDarkColorKey }" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Thumb.BorderBrush>
                            <Thumb.Background>
                                <LinearGradientBrush
                                    StartPoint="0 0"
                                    EndPoint="1 0">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Offset="0.0" Color="{DynamicResource ControlLightColorKey }" />
                                            <GradientStop Offset="1.0" Color="{DynamicResource ControlMediumColorKey}" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Thumb.Background>
                        </Thumb>
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton
                            Style="{StaticResource ScrollBarPageButtonStyleKey}"
                            Command="ScrollBar.PageDownCommand" />
                    </Track.IncreaseRepeatButton>
                </Track>
                <RepeatButton Grid.Row="2"
                    Style="{StaticResource ScrollBarLineButtonStyleKey}"
                    Height="18"
                    Command="ScrollBar.LineDownCommand"
                    Content="M 0 0 L 4 4 L 8 0 Z" />
            </Grid>
        </ControlTemplate>
        <ControlTemplate x:Key="HorizontalScrollBarTemplateKey" 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 ScrollBarLineButtonStyleKey}"
                    Width="18"
                    Command="ScrollBar.LineLeftCommand"
                    Content="M 4 0 L 4 8 L 0 4 Z" />
                <Track Name="PART_Track" Grid.Column="1"
                    IsDirectionReversed="False">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton
                            Style="{StaticResource ScrollBarPageButtonStyleKey}"
                            Command="ScrollBar.PageLeftCommand" />
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb
                            Style="{StaticResource ScrollBarThumbStyleKey}"
                            Margin="0 1 0 1">
                            <Thumb.BorderBrush>
                                <LinearGradientBrush
                                    StartPoint="0 0"
                                    EndPoint="1 0">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Offset="0.0" Color="{DynamicResource BorderLightColorKey}" />
                                            <GradientStop Offset="1.0" Color="{DynamicResource BorderDarkColorKey }" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Thumb.BorderBrush>
                            <Thumb.Background>
                                <LinearGradientBrush
                                    StartPoint="0 0"
                                    EndPoint="0 1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Offset="0.0" Color="{DynamicResource ControlLightColorKey }" />
                                            <GradientStop Offset="1.0" Color="{DynamicResource ControlMediumColorKey}" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Thumb.Background>
                        </Thumb>
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton
                            Style="{StaticResource ScrollBarPageButtonStyleKey}"
                            Command="ScrollBar.PageRightCommand" />
                    </Track.IncreaseRepeatButton>
                </Track>
                <RepeatButton Grid.Column="2"
                    Style="{StaticResource ScrollBarLineButtonStyleKey}"
                    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 HorizontalScrollBarTemplateKey}" />
                </Trigger>
                <Trigger Property="Orientation" Value="Vertical">
                    <Setter Property="Width"    Value="18"                                 />
                    <Setter Property="Height"   Value="Auto"                               />
                    <Setter Property="Template" Value="{StaticResource VerticalScrollBarTemplateKey}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Horizontal">
        <ScrollBar
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="300"
            Height="20"
            Orientation="Horizontal" />
        <ScrollBar
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="10 0 0 0"
            Width="20"
            Height="300"
            Orientation="Vertical" />
    </StackPanel>
</Window>