WPF：定制Checkbox样式，让“正确”绿得好看，让“错误”红的显眼_.NET_编程开发_程序员俱乐部

    WPF提供了样式、模板、触发器、状态管理、矢量形状等方式，让我们不需要背景图片，也可以轻松定制控件的风格样式。下面是笔者针对Checkbox进行的样式定制，让“正确”绿得好看，让“错误”红的显眼。
    本文提供了两种风格，如果不是很适应自己系统的整体风格，可以对样式代码进行修改。

（1）普通风格
 

资源样式代码：

class="brush:csharp;gutter:true;">  <Style x:Key="CheckStyle1" TargetType="{x:Type CheckBox}">
                <Setter Property="Height" Value="40"/>
                <Setter Property="Width" Value="70"/>
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type CheckBox}">
                            <Border x:Name="ForegroundPanel" CornerRadius="4" BorderBrush="#d4d5d5" BorderThickness="1" Padding="0">
                                <DockPanel>
                                    <Border x:Name="CheckFlag"  HorizontalAlignment="Left" VerticalAlignment="Center" CornerRadius="10" Margin="10,0,0,0" BorderThickness="1" Width="20" Height="20">
                                        <Grid>
                                            <Path Visibility="Collapsed" Width="20" Height="20" x:Name="CheckMark" SnapsToDevicePixels="False"  StrokeThickness="2"
                                                  Stroke="White" Fill="White" Data="M 5 7 L 7 15 L 18 2 L 17 2 L 7 14 L 6 7 L 5 7">
                                            </Path>
                                            <Path Visibility="Collapsed"  Width="20"  Height="20" x:Name="InderminateMark" SnapsToDevicePixels="False" StrokeThickness="3"
                                                  Stroke="White" Data="M 5 5 L 15 15 M 5 15 L 15 5">
                                            </Path>
                                        </Grid>
                                    </Border>

                                    <TextBlock x:Name="Content" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="2,0" />
                                </DockPanel>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="MouseOver"></VisualState>
                                        <VisualState x:Name="Pressed"></VisualState>
                                        <VisualState x:Name="Disabled" />
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CheckStates">
                                        <VisualState x:Name="Checked">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckMark">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unchecked">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="InderminateMark">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Indeterminate"></VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Border>

                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="ForegroundPanel" Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                                <GradientStop Color="#89b601" Offset="0.0"/>
                                                <GradientStop Color="#73a80c" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter TargetName="Content" Property="Text" Value="正确"/>
                                    <Setter TargetName="CheckFlag" Property="Background" Value="#559800"></Setter>
                                    <Setter TargetName="Content" Property="DockPanel.Dock" Value="Right"/>
                                    <Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Left"/>
                                </Trigger>

                                <Trigger Property="IsChecked" Value="False">
                                    <Setter TargetName="ForegroundPanel" Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                                <GradientStop Color="#edb200" Offset="0.0"/>
                                                <GradientStop Color="#ed9e00" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter TargetName="Content" Property="Text" Value="错误"/>
                                    <Setter TargetName="CheckFlag" Property="Background" Value="#F64708"></Setter>
                                    <Setter TargetName="Content" Property="DockPanel.Dock" Value="Right"/>
                                    <Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Left"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

主界面Checkbox控件对样式引用代码：

<CheckBox Style="{StaticResource CheckStyle1}"/>

（2）左右滑动风格

资源样式代码：

           <Style x:Key="CheckStyle2" TargetType="{x:Type CheckBox}">
                <Setter Property="Height" Value="40"/>
                <Setter Property="Width" Value="70"/>
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type CheckBox}">
                            <Border x:Name="ForegroundPanel" CornerRadius="4" BorderBrush="#d4d5d5" BorderThickness="1" Padding="0">
                                <DockPanel>
                                    <Border x:Name="CheckFlag"  HorizontalAlignment="Left" VerticalAlignment="Center" CornerRadius="10" Margin="10,0,0,0" BorderThickness="1" Width="20" Height="20">
                                        <Grid>
                                            <Path Visibility="Collapsed" Width="20" Height="20" x:Name="CheckMark" SnapsToDevicePixels="False"  StrokeThickness="2"
                                                  Stroke="White" Fill="White" Data="M 5 7 L 7 15 L 18 2 L 17 2 L 7 14 L 6 7 L 5 7">
                                            </Path>
                                            <Path Visibility="Collapsed"  Width="20"  Height="20" x:Name="InderminateMark" SnapsToDevicePixels="False" StrokeThickness="3"
                                                  Stroke="White" Data="M 5 5 L 15 15 M 5 15 L 15 5">
                                            </Path>
                                        </Grid>
                                    </Border>

                                    <TextBlock x:Name="Content" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="2,0" />
                                </DockPanel>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="MouseOver"></VisualState>
                                        <VisualState x:Name="Pressed"></VisualState>
                                        <VisualState x:Name="Disabled" />
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CheckStates">
                                        <VisualState x:Name="Checked">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckMark">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unchecked">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="InderminateMark">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Indeterminate"></VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Border>

                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="ForegroundPanel" Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                                <GradientStop Color="#89b601" Offset="0.0"/>
                                                <GradientStop Color="#73a80c" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter TargetName="Content" Property="Text" Value="正确"/>
                                    <Setter TargetName="CheckFlag" Property="Background" Value="#559800"></Setter>
                                    <Setter TargetName="Content" Property="DockPanel.Dock" Value="Right"/>
                                    <Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Left"/>
                                </Trigger>

                                <Trigger Property="IsChecked" Value="False">
                                    <Setter TargetName="ForegroundPanel" Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                                <GradientStop Color="#edb200" Offset="0.0"/>
                                                <GradientStop Color="#ed9e00" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter TargetName="Content" Property="Text" Value="错误"/>
                                    <Setter TargetName="CheckFlag" Property="Background" Value="#F64708"></Setter>
                                    <Setter TargetName="Content" Property="DockPanel.Dock" Value="Right"/>
                                    <Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Left"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

主界面Checkbox控件对样式引用代码：

<CheckBox Style="{StaticResource CheckStyle2}"/>