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

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

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"
    xmlns:local="clr-namespace:TestProject"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Color x:Key="DisabledControlDarkColorKey">#ffc5cbf9</Color>
        <Color x:Key="ControlLightColorKey">White</Color>
        <Color x:Key="ControlMediumColorKey">#ff7381f9</Color>
        <Color x:Key="ControlMouseOverColorKey">#ff3843c4</Color>
        <Color x:Key="ControlPressedColorKey">#ff211aa9</Color>
        <Color x:Key="GlyphColorKey">#ff444444</Color>
        <Color x:Key="BorderLightColorKey">#ffcccccc</Color>
        <Color x:Key="BorderDarkColorKey">#ff444444</Color>
        <Color x:Key="SliderTrackDarkColorKey">#ffc5cbf9</Color>
        <Style x:Key="SliderButtonStyleKey" TargetType="{x:Type RepeatButton}">
            <Setter Property="OverridesDefaultStyle" Value="true"  />
            <Setter Property="SnapsToDevicePixels"   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="SliderThumbStyleKey" TargetType="{x:Type Thumb}">
            <Setter Property="Width"                 Value="14"   />
            <Setter Property="Height"                Value="14"   />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="SnapsToDevicePixels"   Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Ellipse Name="ellipse"
                            StrokeThickness="1">
                            <Ellipse.Fill>
                                <LinearGradientBrush
                                    StartPoint="0.5 0"
                                    EndPoint="0.5 1">
                                    <GradientStop Offset="1" Color="{DynamicResource ControlMediumColorKey}" />
                                    <GradientStop            Color="{DynamicResource ControlLightColorKey}"  />
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                            <Ellipse.Stroke>
                                <LinearGradientBrush
                                    StartPoint="0 0"
                                    EndPoint="0 1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Offset="0.0" Color="{DynamicResource BorderLightColorKey}" />
                                            <GradientStop Offset="1.0" Color="{DynamicResource BorderDarkColorKey}"  />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Ellipse.Stroke>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="ellipse"
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="ellipse"
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="ellipse"
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Ellipse>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <ControlTemplate x:Key="HorizontalSliderTemplateKey" TargetType="{x:Type Slider}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition
                        MinHeight="{TemplateBinding MinHeight}"
                        Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TickBar Name="topTickBar"
                    Height="4"
                    Placement="Top"
                    SnapsToDevicePixels="True"
                    Visibility="Collapsed">
                    <TickBar.Fill>
                        <SolidColorBrush Color="{DynamicResource GlyphColorKey}" />
                    </TickBar.Fill>
                </TickBar>
                <Border Grid.Row="1"
                    Margin="0"
                    Height="4"
                    CornerRadius="2"
                    BorderThickness="1">
                    <Border.BorderBrush>
                        <LinearGradientBrush
                            StartPoint="0 0"
                            EndPoint="0 1">
                            <LinearGradientBrush.GradientStops>
                                <GradientStopCollection>
                                    <GradientStop Offset="0.0" Color="{DynamicResource BorderLightColorKey}" />
                                    <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 Offset="0.0" Color="{DynamicResource ControlLightColorKey}"    />
                                    <GradientStop Offset="1.0" Color="{DynamicResource SliderTrackDarkColorKey}" />
                                </GradientStopCollection>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <Track Name="PART_Track" Grid.Row="1">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton
                            Style="{StaticResource SliderButtonStyleKey}"
                            Command="Slider.DecreaseLarge" />
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{StaticResource SliderThumbStyleKey}" />
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton
                            Style="{StaticResource SliderButtonStyleKey}"
                            Command="Slider.IncreaseLarge" />
                    </Track.IncreaseRepeatButton>
                </Track>
                <TickBar Name="bottomTickBar" Grid.Row="2"
                    Height="4"
                    Fill="{TemplateBinding Foreground}"
                    Placement="Bottom"
                    SnapsToDevicePixels="True"
                    Visibility="Collapsed" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="TickPlacement" Value="TopLeft">
                    <Setter
                        TargetName="topTickBar"
                        Property="Visibility"
                        Value="Visible" />
                </Trigger>
                <Trigger Property="TickPlacement" Value="BottomRight">
                    <Setter
                        TargetName="bottomTickBar"
                        Property="Visibility"
                        Value="Visible" />
                </Trigger>
                <Trigger Property="TickPlacement" Value="Both">
                    <Setter
                        TargetName="topTickBar"
                        Property="Visibility"
                        Value="Visible" />
                    <Setter
                        TargetName="bottomTickBar"
                        Property="Visibility"
                        Value="Visible" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <ControlTemplate x:Key="VerticalSliderTemplateKey" TargetType="{x:Type Slider}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition
                        MinWidth="{TemplateBinding MinWidth}"
                        Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TickBar Name="topTickBar"
                    Width="4"
                    Placement="Left"
                    SnapsToDevicePixels="True"
                    Visibility="Collapsed">
                    <TickBar.Fill>
                        <SolidColorBrush Color="{DynamicResource GlyphColorKey}" />
                    </TickBar.Fill>
                </TickBar>
                <Border Grid.Column="1"
                    Margin="0"
                    Width="4"
                    CornerRadius="2"
                    BorderThickness="1">
                    <Border.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>
                    </Border.BorderBrush>
                    <Border.Background>
                        <LinearGradientBrush
                            StartPoint="0.25 0"
                            EndPoint="1 0">
                            <GradientStop Offset="0" Color="{DynamicResource ControlLightColorKey}"    />
                            <GradientStop Offset="1" Color="{DynamicResource SliderTrackDarkColorKey}" />
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <Track Name="PART_Track" Grid.Column="1">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton
                            Style="{StaticResource SliderButtonStyleKey}"
                            Command="Slider.DecreaseLarge" />
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{StaticResource SliderThumbStyleKey}" />
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton
                            Style="{StaticResource SliderButtonStyleKey}"
                            Command="Slider.IncreaseLarge" />
                    </Track.IncreaseRepeatButton>
                </Track>
                <TickBar Name="bottomTickBar" Grid.Column="2"
                    Width="4"
                    Fill="{TemplateBinding Foreground}"
                    Placement="Right"
                    SnapsToDevicePixels="True"
                    Visibility="Collapsed" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="TickPlacement" Value="TopLeft">
                    <Setter
                        TargetName="topTickBar"
                        Property="Visibility"
                        Value="Visible" />
                </Trigger>
                <Trigger Property="TickPlacement" Value="BottomRight">
                    <Setter
                        TargetName="bottomTickBar"
                        Property="Visibility"
                        Value="Visible" />
                </Trigger>
                <Trigger Property="TickPlacement" Value="Both">
                    <Setter
                        TargetName="topTickBar"
                        Property="Visibility"
                        Value="Visible" />
                    <Setter
                        TargetName="bottomTickBar"
                        Property="Visibility"
                        Value="Visible" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <Style TargetType="{x:Type Slider}">
            <Setter Property="SnapsToDevicePixels"   Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="MinWidth"  Value="104" />
                    <Setter Property="MinHeight" Value="21"  />
                    <Setter Property="Template"  Value="{StaticResource HorizontalSliderTemplateKey}" />
                </Trigger>
                <Trigger Property="Orientation" Value="Vertical">
                    <Setter Property="MinWidth"  Value="21"  />
                    <Setter Property="MinHeight" Value="104" />
                    <Setter Property="Template"  Value="{StaticResource VerticalSliderTemplateKey}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Orientation="Horizontal">
            <Slider
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Width="300"/>
            <Slider
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Orientation="Vertical"
                Height="300"/>
        </StackPanel>
    </Grid>
</Window>