WPF：定制Checkbox样式，让“正确”绿得好看，让“错误”红的显眼
WPF提供了样式、模板、触发器、状态管理、矢量形状等方式，让我们不需要背景图片，也可以轻松定制控件的风格样式。下面是笔者针对Checkbox进行的样式定制，让“正确”绿得好看，让“错误”红的显眼。
本文提供了两种风格，如果不是很适应自己系统的整体风格，可以对样式代码进行修改。
源代码：http://download.csdn.net/download/wadexmy/8099685
（1）普通风格
样式资源代码：
<Style x:Key="cbIsRight" TargetType="{x:Type CheckBox}">
<Setter Property="Height" Value="40"/>
<Setter Property="Width" Value="120"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Border x:Name="ForegroundPanel" CornerRadius="4" BorderBrush="#d4d5d5" BorderThickness="1" Padding="0">
<StackPanel Orientation="Horizontal">
<Border x:Name="CheckFlag" VerticalAlignment="Center" CornerRadius="10" Margin="10,0,0,0" BorderThickness="1" Width="20" Height="20">
<Path x:Name="CheckMark" StrokeThickness="3" Stroke="White"></Path>
</Border>
<TextBlock x:Name="tbContent" VerticalAlignment="Center" Margin="2,0" Text="{TemplateBinding Content}"/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="正确"/>
<Setter TargetName="CheckMark" Property="Data" Value="M 4 8 L 8 12 L 14 4"/>
<Setter TargetName="ForegroundPanel" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#89b601" Offset="0.0"/>
<GradientStop Color="#73a80c" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="CheckFlag" Property="Background" Value="#559800"></Setter>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Content" Value="错误"/>
<Setter TargetName="CheckMark" Property="Data" Value="M 5 5 L 14 14 M 5 14 L 14 5"/>
<Setter TargetName="ForegroundPanel" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#edb200" Offset="0.0"/>
<GradientStop Color="#ed9e00" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="CheckFlag" Property="Background" Value="#F64708"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
主界面Checkbox控件对样式引用代码：
<CheckBox Style="{StaticResource CheckStyle1}"/>
（2）左右滑动风格
样式资源代码：
<Style x:Key="CheckStyle2" TargetType="{x:Type CheckBox}">
<Setter Property="Height" Value="40"/>
<Setter Property="Width" Value="120"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Border x:Name="ForegroundPanel" CornerRadius="4" BorderBrush="#d4d5d5" BorderThickness="1" Padding="0">
<DockPanel>
<TextBlock x:Name="Content" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="2,0" />
<Border x:Name="CheckFlag" HorizontalAlignment="Right" VerticalAlignment="Center" CornerRadius="10" BorderThickness="0" Width="20" Height="20">
<Grid>
<Path Visibility="Collapsed" Width="20" Height="20" x:Name="CheckMark" SnapsToDevicePixels="False" StrokeThickness="2"
Stroke="White" Fill="White" Data="M 5 7 L 7 15 L 18 2 L 17 2 L 7 14 L 6 7 L 5 7">
</Path>
<Path Visibility="Collapsed" Width="20" Height="20" x:Name="InderminateMark" SnapsToDevicePixels="False" StrokeThickness="3"
Stroke="White" Data="M 5 5 L 15 15 M 5 15 L 15 5">
</Path>
</Grid>
</Border>
</DockPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver"></VisualState>
<VisualState x:Name="Pressed"></VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckMark">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="InderminateMark">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate"></VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="ForegroundPanel" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#89b601" Offset="0.0"/>
<GradientStop Color="#73a80c" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="Content" Property="Text" Value="正确"/>
<Setter TargetName="CheckFlag" Property="Background" Value="#559800"></Setter>
<Setter TargetName="Content" Property="DockPanel.Dock" Value="Right"/>
<Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Left"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="ForegroundPanel" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#edb200" Offset="0.0"/>
<GradientStop Color="#ed9e00" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="Content" Property="Text" Value="错误"/>
<Setter TargetName="CheckFlag" Property="Background" Value="#F64708"></Setter>
<Setter TargetName="Content" Property="DockPanel.Dock" Value="Left"/>
<Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Right"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
主界面Checkbox控件对样式引用代码：
<CheckBox Style="{StaticResource CheckStyle2}"/>
WPF：定制Checkbox样式，让“正确”绿得好看，让“错误”红的显眼的更多相关文章
- WPF 自定义CheckBox样式
自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...
- WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局
本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...
- WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...
- 【转】WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等 本文主要内容: CheckBox复选框的自定义样式,有两种不同的风格实现: RadioB ...
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- WPF自定义控件与样式(15)-终结篇 & 系列文章索引 & 源码共享
系列文章目录 WPF自定义控件与样式(1)-矢量字体图标(iconfont) WPF自定义控件与样式(2)-自定义按钮FButton WPF自定义控件与样式(3)-TextBox & Ric ...
- WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Scr ...
- WPF自定义控件与样式(13)-自定义窗体Window & 自适应内容大小消息框MessageBox
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 自定义 ...
- WPF编程学习——样式
本文目录 1.引言 2.怎样使用样式? 3.内联样式 4.已命名样式 5.元素类型样式 6.编程控制样式 7.触发器 1.引言 样式(Style),主要是用来让元素或内容呈现一定外观的属性.WPF中的 ...
随机推荐
- bored
https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...
- [原创] IIS7下顶级域名301跳转到WWW域名
百度搜索了众多方法,居然没有一个全面的IIS7下301域名跳转能用的教程,最终自己研究出了个可以用的供大家参考.1.绑定域名01ruodian.cn www.01ruodian.cn到空间: 2.在I ...
- Android框架 加载图片 库 Picasso 的使用简介
0 说明 现在Android开源库中有许多图片加载框架,本文以picasso为例,总结下开发过程中的一些优化经验,使用的picasso版本如下 compile 'com.squareup.picass ...
- 将你的代码上传 Bintray 仓库
在 Android Studio 中,我们通常可以利用 gradle 来导入别人写的第三方库,通常可以简单得使用一句话就能搞定整个导包过程, 比如: compile 'net.cpacm.moneyt ...
- python常见环境安装
pyinotify安装git clone https://github.com/seb-m/pyinotify.gitcd pyinotify/python setup.py install 安装py ...
- Apache Segmentaion Fault故障处理案例分析
本文出自 "李晨光原创技术博客" 博客,转载请与作者联系!
- python 多行匹配
content = ''' abcdefg hijklmn opq rst uvw xyz ''' r = re.compile('\S+cde\S+|\S+klm\S+|^xyz$', re.MUL ...
- IIS7下,flush无效,解决方案
打开文件 C:\Windows\System32\inetsrv\config\applicationHost.config ,注意如果你的是64位系统,这个文件就必须用64位的编辑软件打开,32位的 ...
- 对apply和call的理解
存在的原因: call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作. call 和 apply 都是 ...
- EasyUI-Combox
Combox的数据格式和默认选中项设置 [{ "id":1, "text":"text1" },{ "id":2, &q ...