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>

是不是很简单呢~哈哈

时间： 2024-10-10 00:34:52

WPF-自定义CheckBox的相关文章

WPF 自定义CheckBox样式

自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状态,设置边框.透明度等 选中的话,我们可以设置√和背景. <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}"> <Setter Property="SnapsToDevice

WPF自定义样式篇-DataGrid

WPF自定义样式篇-DataGrid 先上效果图: 样式: <!--DataGrid样式-->    <Style TargetType="DataGrid">        <Setter Property="RowHeaderWidth" Value="0"></Setter>        <Setter Property="AutoGenerateColumns"

WPF 带CheckBox、图标的TreeView

WPF 带CheckBox.图标的TreeView 在WPF实际项目开发的时候,经常会用到带CheckBox的TreeView,虽然微软在WPF的TreeView中没有提供该功能,但是微软在WPF中提供强大的ItemTemplate模板功能和自定义样式,那我们可以自己写一个这样的控件供自己使用. 我自己写的这个比较简单. 首先写一个供TreeView使用的数据模型,并且实现INotifyPropertyChanged接口,用于向客户端(通常是执行绑定的客户端)发出某一属性值已更改的通知,当属性改

WPF中CheckBox三种状态打勾打叉

wpf的CheckBox支持三种状态,但是美中不足的是勾选中是是打勾,但是IsChecked为Fasle时,没显示打叉. 下面代码是自定义Style,打钩打叉: XAML: <Window x:Class="CheckBoxDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsof

自定义CheckBox的选中与否样式

我们在做APP应用时,经常要用到CheckBox控件,但是系统原有的CheckBox样式又不满足我们的需求,我们就要自定义CheckBox选中与否状态,其实就同Button一样,设置其选择与否背景即可. 布局如下: <CheckBox android:id="@+id/foot_mark_cb" android:layout_width="wrap_content" android:layout_height="wrap_content"

Android之自定义checkbox样式

大部分情况下,我们在UI中并不采用android自带的checkbox复选框样式,这时候就需要我们自定义自己的checkbox. 首先找两张checkbox背景图片,比如下图样子的: 然后在drawable目录下定义一个背景图片xml文件,内容如下: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/

WPF自定义路由事件

一 概要 本文通过实例演示WPF自定义路由事件的使用,进而探讨了路由事件与普通的CLR事件的区别(注:"普通的CLR事件"这个说法可能不太专业,但是,我暂时也找不到什么更好的称呼,就这么着吧,呵呵.)(扩展阅读:例说.NET事件的使用). 二 实例演示与说明 1 新建DetailReportEventArgs类,该类派生自RoutedEventArgs类,RoutedEventArgs类包含与路由事件相关的状态信息和事件数据.DetailReportEventArgs类中定义了属性Ev

WPF 自定义柱状图 BarChart

WPF 自定义柱状图 1. <UserControl x:Class="WpfApplication11.BarChartControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.o

WPF自定义窗口基类

WPF自定义窗口基类时,窗口基类只定义.cs文件,xaml文件不定义.继承自定义窗口的类xaml文件的根节点就不再是<Window>,而是自定义窗口类名(若自定义窗口与继承者不在同一个命名空间,还得加上命名空间),继承自定义窗口类后台代码也得修改为继承自自定义窗口exp: //继承Window类的自定义窗口类 namespace WPF_Study.Entity { using System.Windows; public class WindowBase:Window { private c

自定义checkbox， radio样式总结

任务目的 深入了解html label标签 了解CSS边框.背景.伪元素.伪类(注意和伪元素区分)等属性的设置 了解CSS中常见的雪碧图,并能自己制作使用雪碧图 任务描述 参考 样例(点击查看),实现页面开发,要求实现效果基本一致 任务注意事项 尝试背景图和伪元素两种不同方式实现,对比两种方式各自的优缺点. 注意测试不同情况,尤其是极端情况下的效果. 参考资料 MDN label: 了解html中label的基本知识 MDN background-position: 了解背景图片定位相关知识 M