Microsoft .NET/WPF Style
[WPF Style] CheckBox_Slider
전자기린
2019. 8. 20. 11:54
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}"/>