《学习笔记》WPF-CheckBox(复选框、功能开关)美化

老规矩，先放图

按钮美化背景：

　　由于特殊需求，复选框样式单一，所以我们需要将其按钮重构和美化达到我们的需求

复选框美化思维引导：

图中1为背景色

图中2为边框

图中3为句柄控件组成（Path+Rectangle）

图4为TextBlock控件

由此我们可以推算出该控件大致需要Border+Grid+Path+Rectangle+TextBlock这几个控件完成

 1 <Style x:Key="CheckBoxStyle"  TargetType="{x:Type CheckBox}">
 2         <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
 3         <Setter Property="Background" Value="{StaticResource OptionMark.Static.Background}"/>
 4         <Setter Property="BorderBrush" Value="#ACACAC"/>
 5         <Setter Property="HorizontalAlignment" Value="Center"></Setter>
 6         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
 7         <Setter Property="BorderThickness" Value="1"/>
 8         <Setter Property="Template">
 9             <Setter.Value>
10                 <ControlTemplate TargetType="{x:Type CheckBox}">
11                     <Grid x:Name="templateRoot" Width="{TemplateBinding Width}" Background="Transparent" HorizontalAlignment="Left" SnapsToDevicePixels="True" Margin="0,0,0,-0.333">
12                         <Grid.ColumnDefinitions>
13                             <ColumnDefinition Width="Auto"/>
14                             <ColumnDefinition Width="*"/>
15                         </Grid.ColumnDefinitions>
16                         <Border x:Name="checkBoxBorder"  BorderBrush="#ACACAC"  VerticalAlignment="Center" HorizontalAlignment="Center" BorderThickness="1" CornerRadius="2" Width="22" Height="22">
17                             <Grid x:Name="markGrid" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="-1" Width="21.666" Height="22">
18                                 <Path x:Name="optionMark" Data="M16.000603,1.957344 L7.5364196,14.557344 7.2530439,14.557344 0,8.309296 2.0478247,5.63464 6.8253337,9.741328 13.367244,2.441408E-05 16.000603,1.957344 z" Fill="#FFFBFBFB" Margin="0" Opacity="0" Stretch="None" VerticalAlignment="Center" Height="{TemplateBinding Height}" d:LayoutOverrides="Width" HorizontalAlignment="Center" Width="{TemplateBinding Height}" />
19                                 <Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="0,-0.834" Opacity="0" Width="Auto" Height="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
20                             </Grid>
21                         </Border>
22                         <TextBlock x:Name="contentPresenter" FontSize="{TemplateBinding FontSize}" Text="{TemplateBinding Content}" Grid.Column="1" Focusable="False"  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2,0,0,0" FontFamily="iconfont"/>
23                     </Grid>
24                     <ControlTemplate.Triggers>
25                         <Trigger Property="HasContent" Value="true">
26                             <Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual}"/>
27                             <Setter Property="Padding" Value="4,-1,0,0"/>
28                         </Trigger>
29                         <Trigger Property="IsMouseOver" Value="true">
30                             <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="#5FB878"/>
31                         </Trigger>
32                         <Trigger Property="IsEnabled" Value="false">
33                             <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Background}"/>
34                             <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Border}"/>
35                             <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
36                             <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
37                         </Trigger>
38                         <Trigger Property="IsPressed" Value="true">
39                             <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Background}"/>
40                             <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Border}"/>
41                             <Setter Property="Fill" TargetName="optionMark" Value="#FFFFFF"/>
42 
43                             <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/>
44                         </Trigger>
45                         <Trigger Property="IsChecked" Value="true">
46                             <Setter Property="Opacity" TargetName="optionMark" Value="1"/>
47                             <Setter Property="Background" TargetName="checkBoxBorder" Value="#5FB878"/>
48                             <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="#5FB878"/>
49                             <Setter Property="Opacity" TargetName="indeterminateMark" Value="0"/>
50                         </Trigger>
51                         <Trigger Property="IsChecked" Value="{x:Null}">
52                             <Setter Property="Opacity" TargetName="optionMark" Value="0"/>
53                             <Setter Property="Opacity" TargetName="indeterminateMark" Value="1"/>
54                         </Trigger>
55                     </ControlTemplate.Triggers>
56                 </ControlTemplate>
57             </Setter.Value>
58         </Setter>
59         <Setter Property="Cursor" Value="Hand"/>
60         <Setter Property="FontFamily" Value="iconfont"/>
61         <Setter Property="FontSize" Value="14"/>
62     </Style>

开关按钮美化思维引导图：

图中1为Border控件

图2为TextBlock控件

图3为Border控件

由此我们可以得出开关按钮是由CheckBox重构出来的并且有Border+TextBlock组合完成

开关按钮代码为：

 1 <Style x:Key="CheckBoxSwitchStyle" TargetType="CheckBox">
 2         <Setter Property="IsChecked" Value="False"/>
 3         <Setter Property="Cursor" Value="Hand"/>
 4         <Setter Property="FontFamily" Value="/MESToolIntegration;component/Fonts/#iconfont"/>
 5         <Setter Property="Background" Value="#FFFFFF"/>
 6         <Setter Property="Template">
 7             <Setter.Value>
 8                 <ControlTemplate TargetType="CheckBox">
 9                     <Border Width="54" Name="CheckTrueBG" Height="22" BorderThickness="1" Background="#FFFFFF"  CornerRadius="10" BorderBrush="#ACACAC" >
10                         <Grid>
11                             <Border BorderThickness="1" Background="#ACACAC" x:Name="border" Width="20" Height="20" CornerRadius="9" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0"  >
12                                 <Border.RenderTransform>
13                                     <TranslateTransform  X="1"/>
14                                 </Border.RenderTransform>
15                             </Border>
16                             <TextBlock x:Name="txt" Text="{TemplateBinding Content}" FontFamily="iconfont"  FontSize="{TemplateBinding FontSize}" Margin="6.996,2.798,0,2.798" VerticalAlignment="Stretch" Foreground="#ACACAC" HorizontalAlignment="Left" d:LayoutOverrides="Height" >
17                                 <TextBlock.RenderTransform>
18                                     <TranslateTransform   X="17"></TranslateTransform>
19                                 </TextBlock.RenderTransform>
20                             </TextBlock>
21                         </Grid>
22                     </Border>
23                     <ControlTemplate.Triggers>
24                         <Trigger Property="IsChecked" Value="true">
25                             <Setter Property="Background" TargetName="CheckTrueBG"  Value="#5FB878"/>
26                             <Setter Property="Foreground" TargetName="txt"  Value="#FFFFFF"/>
27                             <Setter Property="Background" TargetName="border"  Value="#FFFFFF"/>
28                             <Setter Property="Text" TargetName="txt" Value="{Binding Tag,RelativeSource={RelativeSource TemplatedParent}}"/>
29                             <Trigger.EnterActions>
30                                 <BeginStoryboard>
31                                     <Storyboard>
32                                         <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="32" Duration="00:00:0.2"/>
33                                         <DoubleAnimation Storyboard.TargetName="txt" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="0" Duration="00:00:0.2"/>
34                                     </Storyboard>
35                                 </BeginStoryboard>
36                             </Trigger.EnterActions>
37                             <Trigger.ExitActions>
38                                 <BeginStoryboard>
39                                     <Storyboard>
40                                         <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="0" Duration="00:00:0.2"/>
41                                         <DoubleAnimation Storyboard.TargetName="txt" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="17" Duration="00:00:0.2"/>
42                                     </Storyboard>
43                                 </BeginStoryboard>
44                             </Trigger.ExitActions>
45                         </Trigger>
46                         <Trigger Property="IsChecked" Value="False">
47                             <Setter Property="Text" TargetName="txt" Value="{Binding Content,RelativeSource={RelativeSource TemplatedParent}}"/>
48                         </Trigger>
49                     </ControlTemplate.Triggers>
50                 </ControlTemplate>
51             </Setter.Value>
52         </Setter>
53     </Style>

注意：

开关按钮比较特殊使用方法：

1 <CheckBox  HorizontalAlignment="Left" BorderThickness="1,1,0,1" Margin="107,242,0,0" Style="{DynamicResource CheckBoxSwitchStyle}" VerticalAlignment="Top"  Content="OFF" Tag="NO" />