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为选中的文本。

效果如下：

转载地址：
https://www.cnblogs.com/lzjsky/p/17211389.html

所有代码已经上传到github：https://github.com/caomfan/WpfDemo.git

---

我的listbox下的checkbox

  <ListBox Name="ListBoxMain" Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1" >

            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel HorizontalAlignment="Left" Width="460"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <!--绑定数据是另一个模板-->
                <DataTemplate>
                    <CheckBox  Margin="5,5,0,0" Content="{Binding ChengyuText}"   IsChecked="{Binding IsCheck ,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Checked="Chengyu_Checked" >
                        <CheckBox.Style>
                            <Style TargetType="CheckBox">
                                <Style.Triggers>
                                    <Trigger Property="IsChecked" Value="True">
                                        <Setter  Property="Background" Value="#5387B9"/>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </CheckBox.Style> 
                    </CheckBox>
                </DataTemplate>
            </ListBox.ItemTemplate> 
        </ListBox>