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中的 ...
随机推荐
- ofstream的问题
ofstream在多字节编码的项目中, 写入中文目录写不了, 英文目录可以 换成c库的fopen, fwrite可以
- VC ClistCtrl不同行背景色
大家经常用到listctrl 做表格 为了好看,要给每行设置不同背景色.很实用的一个小技巧. 1:首先在.h里添加以下消息 afx_msg void OnDrawColorForMyList(NMHD ...
- C and C++ 如何嵌套使用
1. 要知道extern "C"的含义: (1) extern是C/C++中表明函数和全局变量作用范围的关键字, 该关键字表明其申明的函数和变量可以在本模块或者其他模块中使用. ( ...
- jmeter接口自动化，你敢想，我敢玩
飞测说:大家好,我是黑夜小怪,今天我又来了分享了.最近用jmeter比较多,做过自动化测试的都知道,我们脚本和数据维护是你十分头疼的事情,刚好黑夜小怪我最近接触到一个项目的接口测试,今天我们一起分享下 ...
- 使用git向github中添加项目并更新（备忘录）
今天使用Git&github&ST3时,发现ST3不仅是git插件不能push成功,使用sublimegit插件也不行. 可能是没有掌握sublimegit的使用技巧,有待后续继续摸索 ...
- 博客中 Flex4/Flash mp3音乐播放器实例 含演示地址
要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...
- 【spring 3】AOP：静态代理
一.代理的基本简介 首先,在什么时候使用代理: 在面向方面编程过程中,当需要对所有类进行某种操作(如,安全性检查,记录操作日志)时,考虑到OCP原则,我们不能在所有实现类中直接添加某些相关方法,这样一 ...
- 【MySQl】MyISAM和InnoDB索引对比
部分内容转自:http://www.2cto.com/database/201211/172380.html 比较好的文章:http://www.cnblogs.com/hustcat/archive ...
- Threatening letter in Naver Line App
A suspect sent a threatening letter in Naver Line App to Richman, and said that he wanted those mone ...
- JqueryMobile动态生成listView并实现刷新的两种方法
本篇文章主要是对JqueryMobile动态生成listView并实现刷新的两种方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 JqueryMobile动态生成listView并实现刷新 ...