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}" />
                                                </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>

是不是很简单呢~哈哈

 

posted @   唐宋元明清2188  阅读(3203)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
点击右上角即可分享
微信分享提示
哥伦布
01:11发布
哥伦布
01:11发布
8°
西北风
2级
空气质量
相对湿度
81%
今天
中雨
3°/15°
周四
大雨
2°/14°
周五
小雨
4°/10°