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>
是不是很简单呢~哈哈
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)