WPF 自定義CheckBox樣式

一、Checkbox基本樣式

下面的樣式包含了CheckBox三種狀態的顯示，這里CheckBox的三種狀態是使用圖片代替的。當然你也可以使用字體圖標或者Path繪制。

先看效果：

代碼如下：

  <Style x:Key="chkBase" TargetType="CheckBox">
            <Setter Property="IsChecked" Value="False"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="#999"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <DockPanel  Background="{TemplateBinding Background}" ToolTip="{TemplateBinding Content}" LastChildFill="False" Width="{TemplateBinding Width}">
                            <Image Margin="2 0 0 0" DockPanel.Dock="Left" x:Name="_img"  Stretch="None" Source="/Images/chk_no.png"/>
                            <TextBlock DockPanel.Dock="Left" Foreground="{TemplateBinding Foreground}" Margin="2 0 0 0" VerticalAlignment="Center" Text="{Binding Content,RelativeSource={RelativeSource TemplatedParent}}" />
                        </DockPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter TargetName="_img" Property="Source" Value="/Images/chk_yes.png"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="{x:Null}">
                                <Setter TargetName="_img" Property="Source" Value="/Images/chk_null.png"/>
                            </Trigger>
                       </ControlTemplate.Triggers>
                  </ControlTemplate>
             </Setter.Value>
       </Setter>
 </Style>

圖片素材：

  

二、CheckBox其它形式

下面這種樣式的CheckBox一般作為開關按鈕。在移動端比較常見。實現過程為純樣式。

樣式代碼如下：

 <Style x:Key="chkBullet" TargetType="CheckBox">
            <Setter Property="IsChecked" Value="False"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="#999"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Border Width="60" Height="20" CornerRadius="10" Background="{TemplateBinding Background}" >
                            <Grid>
                                <Border x:Name="border" Width="18" Height="18" CornerRadius="9" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="1 0" Background="White">
                                    <Border.RenderTransform>
                                        <TranslateTransform  X="0"/>
                                    </Border.RenderTransform>
                                </Border>
                                <TextBlock x:Name="txt" Text="{TemplateBinding Content}" Margin="9 0" VerticalAlignment="Center" Foreground="White" >
                                    <TextBlock.RenderTransform>
                                        <TranslateTransform   X="18"></TranslateTransform>
                                    </TextBlock.RenderTransform>
                                </TextBlock>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter Property="Text" TargetName="txt" Value="{Binding Tag,RelativeSource={RelativeSource TemplatedParent}}"/>
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="40" Duration="00:00:0.2"/>
                                            <DoubleAnimation Storyboard.TargetName="txt" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="0" Duration="00:00:0.2"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="0" Duration="00:00:0.2"/>
                                            <DoubleAnimation Storyboard.TargetName="txt" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="18" Duration="00:00:0.2"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="Text" TargetName="txt" Value="{Binding Content,RelativeSource={RelativeSource TemplatedParent}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                  </ControlTemplate>
             </Setter.Value>
        </Setter>
 </Style>

引用方式如下：

<CheckBox Style="{StaticResource chkBullet}" Background="#5387b9" IsChecked="False" Content="Off" Tag="On" Margin="10"/>

我們通過Background來控制背景色，Content來控制未選中的文本，Tag為選中的文本。

效果如下：

 

所有代碼已經上傳到github：https://github.com/caomfan/WpfDemo.git