[WPF Style] CheckBox_Slider

Slider 형태로 제작된 CheckBoxStyle

IsChecked 값을 변경하면 자동으로 모양이 변경됨.

    <Window.Resources>
    	<!--색상-->
        <Color x:Key="GreenColor">#00C28C</Color>
        <Color x:Key="LightGrayColor">#C5C5C5</Color>
        <SolidColorBrush x:Key="GreenBrush" Color="{StaticResource GreenColor}"/>
        <SolidColorBrush x:Key="LightGrayBrush" Color="{StaticResource LightGrayColor}"/>
		
        <!--스타일-->
        <Style x:Key="SliderCheckBox" 
            TargetType="{x:Type CheckBox}">
            <Setter Property="MaxHeight" 
                    Value="20"/>
            <Setter Property="MaxWidth" 
                    Value="35"/>
            <Setter Property="Foreground" 
                    Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" 
                    Value="1"/>
            <Setter Property="Cursor" 
                    Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="StoryboardIsChecked">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="CheckFlag">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="14"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="StoryboardIsCheckedOff">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="CheckFlag">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="14"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <BulletDecorator Background="Transparent" SnapsToDevicePixels="true">
                            <BulletDecorator.Bullet>
                                <Border x:Name="ForegroundPanel" BorderThickness="1" Width="35" Height="20" CornerRadius="10">
                                    <Canvas>
                                        <!--원 색상-->
                                        <Border x:Name="CheckFlag"
                                            Background="White"  
                                            Width="19" Height="18" 
                                            CornerRadius="10" 
                                            VerticalAlignment="Center" 
                                            BorderThickness="1" 
                                            RenderTransformOrigin="0.5,0.5">
                                            <Border.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform/>
                                                    <SkewTransform/>
                                                    <RotateTransform/>
                                                    <TranslateTransform/>
                                                </TransformGroup>
                                            </Border.RenderTransform>
                                            <Border.Effect>
                                                <DropShadowEffect 
                                                    ShadowDepth="1" 
                                                    Direction="180" />
                                            </Border.Effect>
                                        </Border>
                                    </Canvas>
                                </Border>
                            </BulletDecorator.Bullet>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                        </BulletDecorator>
                        <ControlTemplate.Triggers>
                            <Trigger Property="HasContent" Value="true">
                                <Setter Property="FocusVisualStyle" 
                                        Value="{StaticResource CheckRadioFocusVisual}"/>
                                <Setter Property="Padding" 
                                        Value="4,0,0,0"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" 
                                        Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="ForegroundPanel" 
                                    Property="Background" 
                                    Value="{StaticResource GreenBrush}" />
                                <Trigger.EnterActions>
                                    <BeginStoryboard x:Name="BeginStoryboardCheckedTrue" Storyboard="{StaticResource StoryboardIsChecked}" />
                                    <RemoveStoryboard BeginStoryboardName="BeginStoryboardCheckedFalse" />
                                </Trigger.EnterActions>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter TargetName="ForegroundPanel" 
                                        Property="Background" 
                                        Value="{StaticResource LightGrayBrush}" />
                                <Trigger.EnterActions>
                                    <BeginStoryboard x:Name="BeginStoryboardCheckedFalse" 
                                                     Storyboard="{StaticResource StoryboardIsCheckedOff}" />
                                    <RemoveStoryboard BeginStoryboardName="BeginStoryboardCheckedTrue" />
                                </Trigger.EnterActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="SliderCheckBox_Square" 
            TargetType="{x:Type CheckBox}">
            <Setter Property="MaxHeight" 
                    Value="20"/>
            <Setter Property="MaxWidth" 
                    Value="35"/>
            <Setter Property="Foreground" 
                    Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" 
                    Value="1"/>
            <Setter Property="Cursor" 
                    Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="StoryboardIsChecked">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="CheckFlag">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="14"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="StoryboardIsCheckedOff">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="CheckFlag">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="14"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <BulletDecorator Background="Transparent" SnapsToDevicePixels="true">
                            <BulletDecorator.Bullet>
                                <Border x:Name="ForegroundPanel" BorderThickness="1" Width="35" Height="20" CornerRadius="3">
                                    <Canvas>
                                        <!--원 색상-->
                                        <Border x:Name="CheckFlag"
                                            Background="White"  
                                            Width="19" Height="18" 
                                            CornerRadius="3" 
                                            VerticalAlignment="Center" 
                                            BorderThickness="1" 
                                            RenderTransformOrigin="0.5,0.5">
                                            <Border.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform/>
                                                    <SkewTransform/>
                                                    <RotateTransform/>
                                                    <TranslateTransform/>
                                                </TransformGroup>
                                            </Border.RenderTransform>
                                            <Border.Effect>
                                                <DropShadowEffect 
                                                    ShadowDepth="1" 
                                                    Direction="180" />
                                            </Border.Effect>
                                        </Border>
                                    </Canvas>
                                </Border>
                            </BulletDecorator.Bullet>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                        </BulletDecorator>
                        <ControlTemplate.Triggers>
                            <Trigger Property="HasContent" Value="true">
                                <Setter Property="FocusVisualStyle" 
                                        Value="{StaticResource CheckRadioFocusVisual}"/>
                                <Setter Property="Padding" 
                                        Value="4,0,0,0"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" 
                                        Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="ForegroundPanel" 
                                    Property="Background" 
                                    Value="{StaticResource GreenBrush}" />
                                <Trigger.EnterActions>
                                    <BeginStoryboard x:Name="BeginStoryboardCheckedTrue" Storyboard="{StaticResource StoryboardIsChecked}" />
                                    <RemoveStoryboard BeginStoryboardName="BeginStoryboardCheckedFalse" />
                                </Trigger.EnterActions>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter TargetName="ForegroundPanel" 
                                        Property="Background" 
                                        Value="{StaticResource LightGrayBrush}" />
                                <Trigger.EnterActions>
                                    <BeginStoryboard x:Name="BeginStoryboardCheckedFalse" 
                                                     Storyboard="{StaticResource StoryboardIsCheckedOff}" />
                                    <RemoveStoryboard BeginStoryboardName="BeginStoryboardCheckedTrue" />
                                </Trigger.EnterActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style x:Key="CheckRadioFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

        <CheckBox Style="{StaticResource SliderCheckBox}"/>
        <CheckBox Style="{StaticResource SliderCheckBox_Square}"/>