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