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中的 ...
随机推荐
- CODESOFT都出中文官网了,你还等什么呢
CODESOFT是先进的标签设计和集成软件,提供了无与伦比的灵活性.功能和世界范围的支持,是企业环境下标签打印的最佳选择.在过去的时间里,CODESOFT从未停止过努力与改进,现如今已推出了最新版本C ...
- Unity AssetBundles and Resources指引 (四) AssetBundle使用模式
本文内容主要翻译自下面这篇文章 https://unity3d.com/cn/learn/tutorials/topics/best-practices/guide-assetbundles-and- ...
- Github 恶搞教程(一起『玩坏』自己的 Github 吧)
最近在伯乐在线读到一篇趣文,<如何在 Github『正确』做贡献>,里面各种能人恶搞 Github 的『Public contributions』,下面截取几个小伙伴的战绩: 顺藤摸瓜,发 ...
- 关于 mysql 2003 客户端连接报错的处理方法
在连接到 mysql 数据库服务器时,有时会在客户端报出 2003 的错误代码,并提示: 无法连接到服务器,但服务器却可以 ping 通,可能的原因如下: 1.网络不通.检查能不能ping通. 2.防 ...
- 过河-状压DP
http://www.luogu.org/problem/show?pid=1052 题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上 ...
- 洛谷P1530 分数化小数 Fractions to Decimals
P1530 分数化小数 Fractions to Decimals 103通过 348提交 题目提供者该用户不存在 标签USACO 难度普及/提高- 提交 讨论 题解 最新讨论 暂时没有讨论 题目 ...
- startUML常用的组合片段
1. 常用的组合片段 片段类型 名称 说明 Opt 选项 包含一个可能发生或可能不发生的序列. 可以在临界中指定序列发生的条件. Alt 抉择 包含一个片段列表,这些片段包含备选消息序列. 在任何场 ...
- Java之注解
package com.demo.test; import java.lang.annotation.Documented; import java.lang.annotation.ElementTy ...
- Tomcat Connector三种运行模式
BIO: 一个线程处理一个请求.缺点:并发量高时,线程数较多,浪费资源. Tomcat7或以下,在Linux系统中默认使用这种方式. NIO: 利用Java的异步IO处理,可以通过少量的线程处理大量的 ...
- WWF3的持续化<第五篇>
WWF提供的持续化功能会自动记录工作流实例以及它包含的所有活动的执行状态,这些状态并不是指工作流上流转的表单所呈现的业务逻辑状态.WWF持续化功能就是将未执行完成的工作流实例以及该实例中各种活动的状态 ...