WPF：定制Checkbox樣式，讓“正確”綠得好看，讓“錯誤”紅的顯眼

    WPF提供了樣式、模板、觸發器、狀態管理、矢量形狀等方式，讓我們不需要背景圖片，也可以輕松定制控件的風格樣式。下面是筆者針對Checkbox進行的樣式定制，讓“正確”綠得好看，讓“錯誤”紅的顯眼。
    本文提供了兩種風格，如果不是很適應自己系統的整體風格，可以對樣式代碼進行修改。

    源代碼：http://download.csdn.net/download/wadexmy/8099685

（1）普通風格
 

樣式資源代碼：

    <Style x:Key="cbIsRight" TargetType="{x:Type CheckBox}">
        <Setter Property="Height" Value="40"/>
        <Setter Property="Width" Value="120"/>
        <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">
                        <StackPanel Orientation="Horizontal">
                            <Border x:Name="CheckFlag" VerticalAlignment="Center" CornerRadius="10" Margin="10,0,0,0" BorderThickness="1" Width="20" Height="20">
                                <Path x:Name="CheckMark" StrokeThickness="3" Stroke="White"></Path>
                            </Border>
                            <TextBlock x:Name="tbContent" VerticalAlignment="Center" Margin="2,0" Text="{TemplateBinding Content}"/>
                        </StackPanel>
                    </Border>
                    
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Content" Value="正確"/>
                            <Setter TargetName="CheckMark" Property="Data" Value="M 4 8 L 8 12 L 14 4"/>
                            <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="CheckFlag" Property="Background" Value="#559800"></Setter>
                        </Trigger>

                        <Trigger Property="IsChecked" Value="False">
                            <Setter Property="Content" Value="錯誤"/>
                            <Setter TargetName="CheckMark" Property="Data" Value="M 5 5 L 14 14 M 5 14 L 14 5"/>
                            <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="CheckFlag" Property="Background" Value="#F64708"></Setter>
                        </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="120"/>
                <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>
                                    <TextBlock x:Name="Content" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="2,0" />
                                    <Border x:Name="CheckFlag" HorizontalAlignment="Right" VerticalAlignment="Center" CornerRadius="10" BorderThickness="0" 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>
                                </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="Left"/>
                                    <Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Right"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

 

主界面Checkbox控件對樣式引用代碼：

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