WPF 自定义CheckBox

WPF中原始的CheckBox样式很简单，有时候不适用于WPF那种炫酷的界面。

本章节讲述如何设计一个匹配业务需要、好看的CheckBox（继上篇《WPF-自定义ListBox》中的CheckBox样式）

 

CheckBox的样式如下：

 

<Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">

                <Setter Property="SnapsToDevicePixels"
Value="true" />
                <Setter Property="OverridesDefaultStyle"
Value="False" />
                <Setter Property="FocusVisualStyle"
Value="{DynamicResource CheckBoxFocusVisual}" />

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <BulletDecorator>
                                <BulletDecorator.Bullet>
                                    <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                                        <Border x:Name="Border">
                                            <Rectangle Fill="DodgerBlue" RadiusY="5" RadiusX="5"></Rectangle>
                                        </Border>
                                        <Grid x:Name="CheckedMark">
                                            <Path Visibility="Visible" Width="14" Height="14" SnapsToDevicePixels="False"
StrokeThickness="2" Data="M1,6 L7,12">
                                                <Path.Stroke>
                                                    <SolidColorBrush Color="White" />
                                                </Path.Stroke>
                                            </Path>
                                            <Path Visibility="Visible" Width="14" Height="14"
SnapsToDevicePixels="False" StrokeThickness="2" Data="M6,12 L14,2">
                                                <Path.Stroke>
                                                    <SolidColorBrush Color="White" />
                                                </Path.Stroke>
                                            </Path>
                                        </Grid>
                                    </Grid>
                                </BulletDecorator.Bullet>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CheckStates">
                                        <VisualState x:Name="Checked">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="CheckedMark">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Visible}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unchecked">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="CheckedMark">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Collapsed}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Indeterminate">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="CheckedMark">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Collapsed}"

 

样式中主要涉及CheckBox的模板，具体设计思路如下：

1、用一个装饰控件BulletDecorator作为根节点

2、然后具体内容，用Retangle画带圆角的正方框，设置背景

3、画俩条线，组装成一个√

4、添加视觉显示，这里用VisualStateManager来控制。当然用普通的触发器Trigger也是可行的

如此样式就设计好了。然后应用到实际的CheckBox中：

<CheckBox IsChecked="True" Height="20" Width="20" Style="{StaticResource CheckBoxStyle}" ></CheckBox>

是不是很简单呢~哈哈

 

作者：唐宋元明清2188

本文版权归作者所有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。