WPF 自定义CheckBox

2022-10-19 20:34:39

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="" RadiusX=""></Rectangle>

                                        </Border>

                                        <Grid x:Name="CheckedMark">

                                            <Path Visibility="Visible" Width="" Height="" SnapsToDevicePixels="False"

StrokeThickness="" Data="M1,6 L7,12">

                                                <Path.Stroke>

                                                    <SolidColorBrush Color="White" />

                                                </Path.Stroke>

                                            </Path>

                                            <Path Visibility="Visible" Width="" Height=""

SnapsToDevicePixels="False" StrokeThickness="" 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=""

Value="{x:Static Visibility.Visible}" />

                                                </ObjectAnimationUsingKeyFrames>

                                            </Storyboard>

                                        </VisualState>

                                        <VisualState x:Name="Unchecked">

                                            <Storyboard>

                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="CheckedMark">

                                                    <DiscreteObjectKeyFrame KeyTime=""

Value="{x:Static Visibility.Collapsed}" />

                                                </ObjectAnimationUsingKeyFrames>

                                            </Storyboard>

                                        </VisualState>

                                        <VisualState x:Name="Indeterminate">

                                            <Storyboard>

                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="CheckedMark">

                                                    <DiscreteObjectKeyFrame KeyTime=""

Value="{x:Static Visibility.Collapsed}" />

                                                </ObjectAnimationUsingKeyFrames>

                                            </Storyboard>

                                        </VisualState>

                                    </VisualStateGroup>

                                </VisualStateManager.VisualStateGroups>

                            </BulletDecorator>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

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

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

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

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

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

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

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

是不是很简单呢~哈哈

码农公寓

相关文章