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中的 ...
随机推荐
- Cocos2d-x 3.4版本 新建项目 IOS版
打开终端 cd进入cocos2d-x-3.0/tools/cocos2d-console/bin 然后执行下面命令 ./cocos.py new testHuoFei -p com.huofei.ap ...
- 剑指Offer:面试题5——从尾到头打印链表(java实现)
问题描述:输入一个链表的头结点,从尾巴到头反过来打印出每个结点的值. 首先定义链表结点 public class ListNode { int val; ListNode next = null; L ...
- 下一代大数据系统和4S标准
大数据行业发展到今天,它创造的价值和带来的社会效应,大家已经看得很明白,同时很多问题和不足也暴露出来,特别是hadoop能够提供的数据处理能力,现在已经挖掘到极限,但是现在各行业对数据的存储和计算需求 ...
- xcode7.3 升级 xcode8.0 后权限设置问题(升级xcode 8.0 后构建版本不显示问题)
xcode7.3 升级 xcode8.0 后权限设置问题(升级xcode 8.0 后构建版本不显示问题) 前两天为了适配 iOS10 的系统 我将xcode 7.3 升级到了 xcode 8.0 但是 ...
- 【caffe-windows】 caffe-master 之 classfication_demo.m 超详细分析
classification_demo.m 是个很好的学习资料,了解这个代码之后,就能在matlab里用训练好的model对输入图像进行分类了,而且我在里边还学到了oversample的实例,终于了解 ...
- Node.js log4js日志记录
这次需要给之前弄的文件服务器添加日志记录,一般每天产生的日志会特别多所以安装日期来划分是最好的,这里我用了express框架,为了适应express框架这里在log.js文件中写了use方法. //日 ...
- Retina CS强大漏洞检测工具
RetinaCS强大漏洞检测工具 Eeye数字安全公司成立于上世纪九十年代末期,它是世界领先的安全公司,它采用最新研究成果和创新技术来保证您的网络兄系统安全,并向您提供最强大的如下服务:全面的.漏洞评 ...
- CSS现代字体栈
CSS字体栈是一系列的字体,它包含了能在不同操作系统和平台上战士的字体,以尽可能的使排版保持一致性.浏览器会在font-family规定的所有字体中从前往后一次查找,如果找不到当前字体就查找下一个字体 ...
- vyos (三) HA
http://empujapalla.blogspot.jp/2014/04/taming-beast-vyatta-66-ha-cluster.html 1 L2TP vpn high availa ...
- Tomcat Connector三种运行模式
BIO: 一个线程处理一个请求.缺点:并发量高时,线程数较多,浪费资源. Tomcat7或以下,在Linux系统中默认使用这种方式. NIO: 利用Java的异步IO处理,可以通过少量的线程处理大量的 ...