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

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

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="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="PressedBorderLightColorKey">#ff888888</Color>
        <Color x:Key="PressedBorderDarkColorKey">#ff444444</Color>
        <Style x:Key="CheckBoxStyleKey" TargetType="{x:Type CheckBox}">
            <Setter Property="OverridesDefaultStyle" Value="true"                                  />
            <Setter Property="FocusVisualStyle"      Value="{DynamicResource CheckBoxFocusVisual}" />
            <Setter Property="SnapsToDevicePixels"   Value="true"                                  />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <BulletDecorator Background="Transparent">
                            <BulletDecorator.Bullet>
                                <Border Name="border"
                                    Width="13"
                                    Height="13"
                                    CornerRadius="0"
                                    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              Color="{DynamicResource ControlLightColorKey }" />
                                                    <GradientStop Offset="1.0" Color="{DynamicResource ControlMediumColorKey}" />
                                                </GradientStopCollection>
                                            </LinearGradientBrush.GradientStops>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <Grid>
                                        <Path Name="checkMarkPath"
                                            Width="7"
                                            Height="7"
                                            StrokeThickness="2"
                                            SnapsToDevicePixels="False"
                                            Visibility="Collapsed"
                                            Data="M 0 0 L 7 7 M 0 7 L 7 0">
                                            <Path.Stroke>
                                                <SolidColorBrush Color="{DynamicResource GlyphColorKey}" />
                                            </Path.Stroke>
                                        </Path>
                                        <Path Name="inderminateMarkPath"
                                            Visibility="Collapsed"
                                            Width="7"
                                            Height="7"
                                            StrokeThickness="2"
                                            SnapsToDevicePixels="False"
                                            Data="M 0 7 L 7 0">
                                            <Path.Stroke>
                                                <SolidColorBrush Color="{DynamicResource GlyphColorKey}" />
                                            </Path.Stroke>
                                        </Path>
                                    </Grid>
                                </Border>
                            </BulletDecorator.Bullet>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource PressedBorderDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource PressedBorderLightColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Disabled" />
                                </VisualStateGroup>
                                <VisualStateGroup Name="CheckStates">
                                    <VisualState Name="Checked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="checkMarkPath"
                                                Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Unchecked" />
                                    <VisualState Name="Indeterminate">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="inderminateMarkPath"
                                                Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Margin="4,0,0,0"
                                RecognizesAccessKey="True" />
                        </BulletDecorator>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Horizontal">
        <CheckBox
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="TEST" />
        <CheckBox
            Margin="10 0 0 0"
            Style="{StaticResource CheckBoxStyleKey}"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="TEST" />
    </StackPanel>
</Window>