WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
一．前言
申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。
本文主要内容：
- CheckBox复选框的自定义样式，有两种不同的风格实现；
- RadioButton单选框自定义样式，有两种不同的风格实现；
二． CheckBox自定义样式
2.1 CheckBox基本样式
标准CheckBox样式代码如下，实现了三态的显示，其中不同状态的图标用了字体图标（关于字体图标，可以参考本文末尾附录链接）
<Style x:Key="DefaultCheckBox" TargetType="{x:Type CheckBox}">
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Foreground" Value="{StaticResource TextForeground}"></Setter>
<Setter Property="Padding" Value="0"></Setter>
<Setter Property="local:ControlAttachProperty.FIconMargin" Value="1, 1, 3, 1"></Setter>
<Setter Property="local:ControlAttachProperty.FIconSize" Value="22"></Setter>
<Setter Property="FontSize" Value="{StaticResource FontSize}"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Grid x:Name="grid" Margin="{TemplateBinding Padding}" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock x:Name="icon" Style="{StaticResource FIcon}" Text=""
FontSize="{TemplateBinding local:ControlAttachProperty.FIconSize}"
Margin="{TemplateBinding local:ControlAttachProperty.FIconMargin}"
Foreground="{TemplateBinding Foreground}"/>
<ContentPresenter VerticalAlignment="Center"/>
</StackPanel>
</Grid>
<!--触发器：设置选中状态符号-->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Text" Value="" TargetName="icon" ></Setter>
<Setter Property="Foreground" Value="{StaticResource CheckedForeground}"></Setter>
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="Text" Value="" TargetName="icon" ></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="{StaticResource MouseOverForeground}"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="{StaticResource DisableOpacity}" TargetName="grid" ></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
使用示例及效果：
<CheckBox Margin="3">男</CheckBox>
<CheckBox Margin="3">女</CheckBox>
<CheckBox Margin="3" IsChecked="{x:Null}">其他</CheckBox>
<CheckBox Margin="3" IsChecked="{x:Null}">女</CheckBox>
<CheckBox Margin="3" IsEnabled="False">我被禁用了</CheckBox>
<CheckBox Margin="3" IsEnabled="False" IsChecked="{x:Null}">我被禁用了</CheckBox>
<CheckBox Margin="3" IsEnabled="False" IsChecked="True">我被禁用了</CheckBox>
2.2 CheckBox另一种样式
在移动端比较常见的一种复选效果，先看看效果
这个代码是很久以前写的，用的控件的形式实现的，可以纯样式实现，更简洁，懒得改了。C#代码：
/// <summary>
/// BulletCheckBox.xaml 的交互逻辑
/// </summary>
public class BulletCheckBox : CheckBox
{
public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
"Text", typeof(string), typeof(BulletCheckBox), new PropertyMetadata("Off"));
/// <summary>
/// 默认文本（未选中）
/// </summary>
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
} public static readonly DependencyProperty CheckedTextProperty = DependencyProperty.Register(
"CheckedText", typeof(string), typeof(BulletCheckBox), new PropertyMetadata("On"));
/// <summary>
/// 选中状态文本
/// </summary>
public string CheckedText
{
get { return (string)GetValue(CheckedTextProperty); }
set { SetValue(CheckedTextProperty, value); }
} public static readonly DependencyProperty CheckedForegroundProperty =
DependencyProperty.Register("CheckedForeground", typeof(Brush), typeof(BulletCheckBox), new PropertyMetadata(Brushes.WhiteSmoke));
/// <summary>
/// 选中状态前景样式
/// </summary>
public Brush CheckedForeground
{
get { return (Brush)GetValue(CheckedForegroundProperty); }
set { SetValue(CheckedForegroundProperty, value); }
} public static readonly DependencyProperty CheckedBackgroundProperty =
DependencyProperty.Register("CheckedBackground", typeof(Brush), typeof(BulletCheckBox), new PropertyMetadata(Brushes.LimeGreen));
/// <summary>
/// 选中状态背景色
/// </summary>
public Brush CheckedBackground
{
get { return (Brush)GetValue(CheckedBackgroundProperty); }
set { SetValue(CheckedBackgroundProperty, value); }
} static BulletCheckBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(BulletCheckBox), new FrameworkPropertyMetadata(typeof(BulletCheckBox)));
}
}
样式代码，状态变换用了点小动画，为了支持缩放，用了一个Viewbox来包装内容：
<Style TargetType="{x:Type local:BulletCheckBox}">
<Setter Property="Background" Value="#FF4A9E4A"></Setter>
<Setter Property="Foreground" Value="#DDE8E1"></Setter>
<Setter Property="CheckedForeground" Value="White"></Setter>
<Setter Property="CheckedBackground" Value="#FF0CC50C"></Setter>
<Setter Property="FontSize" Value="13"></Setter>
<Setter Property="Cursor" Value="Hand"></Setter>
<Setter Property="Width" Value="75"></Setter>
<Setter Property="Height" Value="28"></Setter>
<Setter Property="Margin" Value="1"></Setter>
<Setter Property="Template">
<Setter.Value>
<!--控件模板-->
<ControlTemplate TargetType="{x:Type local:BulletCheckBox}">
<Viewbox Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center">
<Border x:Name="border" Width="75" Height="28" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"
Margin="{TemplateBinding Margin}" CornerRadius="14">
<StackPanel Orientation="Horizontal">
<!--状态球-->
<Border x:Name="state" Width="24" Height="24" Margin="3,2,1,2" CornerRadius="12" SnapsToDevicePixels="True"
Background="{TemplateBinding Foreground}">
<Border.RenderTransform>
<TranslateTransform x:Name="transState" X="0"></TranslateTransform>
</Border.RenderTransform>
</Border>
<!--文本框-->
<TextBlock Width="40" Foreground="{TemplateBinding Foreground}" x:Name="txt" Text="{TemplateBinding Text}" VerticalAlignment="Center" TextAlignment="Center">
<TextBlock.RenderTransform>
<TranslateTransform x:Name="transTxt" X="0"></TranslateTransform>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</Border>
</Viewbox>
<!--触发器：设置选中状态符号-->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=CheckedText}" TargetName="txt"/>
<Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=CheckedForeground}" TargetName="state"/>
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=CheckedForeground}" TargetName="txt"/>
<Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=CheckedBackground}" TargetName="border"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="transState" Storyboard.TargetProperty="X" To="45" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetName="transTxt" Storyboard.TargetProperty="X" To="-24" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="transState" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetName="transTxt" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="{StaticResource DisableOpacity}" TargetName="border"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
使用示例：
<kc:BulletCheckBox />
<kc:BulletCheckBox Text="不开窍" CheckedText="开启" IsChecked="True" />
<kc:BulletCheckBox Text="不开窍" CheckedText="开启" IsChecked="True" Height="24" Width="60" />
<kc:BulletCheckBox Height="24" Width="60"/>
三．RadioButton自定义样式
3.1 RadioButon基本样式
标准单选控件的样式很简单，用不同图标标识不同状态，然后触发器控制不同状态的显示效果。
<!--默认样式-->
<Style x:Key="DefaultRadioButton" TargetType="{x:Type RadioButton}">
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Foreground" Value="{StaticResource TextForeground}"></Setter>
<Setter Property="Padding" Value="0"></Setter>
<Setter Property="local:ControlAttachProperty.FIconMargin" Value="1, 1, 3, 1"></Setter>
<Setter Property="local:ControlAttachProperty.FIconSize" Value="25"></Setter>
<Setter Property="FontSize" Value="{StaticResource FontSize}"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Grid x:Name="grid" Margin="{TemplateBinding Padding}" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock x:Name="icon" Text="" Style="{StaticResource FIcon}" SnapsToDevicePixels="True"
FontSize="{TemplateBinding local:ControlAttachProperty.FIconSize}"
Margin="{TemplateBinding local:ControlAttachProperty.FIconMargin}"
Foreground="{TemplateBinding Foreground}"/>
<ContentPresenter VerticalAlignment="Center"/>
</StackPanel>
</Grid>
<!--触发器：设置选中状态符号-->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Text" Value="" TargetName="icon" ></Setter>
<Setter Property="Foreground" Value="{StaticResource CheckedForeground}"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="{StaticResource MouseOverForeground}"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="{StaticResource DisableOpacity}" TargetName="grid" ></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
使用示例：
<RadioButton Margin="3" core:ControlAttachProperty.FIconSize="18">男</RadioButton>
<RadioButton Margin="3" core:ControlAttachProperty.FIconSize="20">女</RadioButton>
<RadioButton Margin="3" IsChecked="{x:Null}" core:ControlAttachProperty.FIconSize="22">其他</RadioButton>
<RadioButton Margin="3" IsChecked="{x:Null}" core:ControlAttachProperty.FIconSize="24">女</RadioButton>
<RadioButton Margin="3" IsChecked="{x:Null}" core:ControlAttachProperty.FIconSize="26">女</RadioButton>
<RadioButton Margin="3" IsEnabled="False">我被禁用了</RadioButton>
<RadioButton Margin="3" IsEnabled="False" IsChecked="{x:Null}">我被禁用了</RadioButton>
效果图：
3.2 RadioButton淘宝、京东物品尺码单项样式
先看看效果：
样式定义也很简单，右下角那个小勾勾用的是一个字体图标，可以根据需要调整大小。
<Style x:Key="BoxRadioButton" TargetType="{x:Type RadioButton}">
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Foreground" Value="{StaticResource TextForeground}"></Setter>
<Setter Property="Padding" Value="3 2 3 2"></Setter>
<Setter Property="FontSize" Value="{StaticResource FontSize}"></Setter>
<Setter Property="BorderThickness" Value="2"></Setter>
<Setter Property="Height" Value="auto"></Setter>
<Setter Property="SnapsToDevicePixels" Value="true"></Setter>
<Setter Property="BorderBrush" Value="{StaticResource ControlBorderBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Grid x:Name="grid" VerticalAlignment="Center">
<Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Height="{TemplateBinding Height}" HorizontalAlignment="Center"
Background="{TemplateBinding Background}" Width="{TemplateBinding Width}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<!--选中的状态标识-->
<TextBlock Text="" x:Name="checkState" Style="{StaticResource FIcon}" VerticalAlignment="Bottom" Visibility="Collapsed"
FontSize="14" Margin="1" HorizontalAlignment="Right" Foreground="{StaticResource CheckedForeground}"/>
</Grid>
<!--触发器：设置选中状态符号-->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="checkState" ></Setter>
<Setter Property="BorderBrush" Value="{StaticResource CheckedForeground}"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" Value="{StaticResource MouseOverForeground}"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="{StaticResource DisableOpacity}" TargetName="grid" ></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
示例代码：
<RadioButton Style="{StaticResource BoxRadioButton}" Margin="1">近3天</RadioButton>
<RadioButton Style="{StaticResource BoxRadioButton}" Margin="1">近7天</RadioButton>
<RadioButton Style="{StaticResource BoxRadioButton}" Margin="1">本月</RadioButton>
<RadioButton Style="{StaticResource BoxRadioButton}" Margin="1">自定义</RadioButton>
<RadioButton Style="{StaticResource BoxRadioButton}" Margin="1">2012.05.12-2015.12.14</RadioButton>
补充说明，上面样式中有用到附加属性，如
ControlAttachProperty.FIconMargin" Value="1, 1, 3, 1"：复选框或单选框字体图标的边距
ControlAttachProperty.FIconSize" Value="25"：复选框或单选框字体图标的大小
关于附加属性可以参考上一篇（本文末尾链接），C#定义代码：
#region FIconProperty 字体图标
/// <summary>
/// 字体图标
/// </summary>
public static readonly DependencyProperty FIconProperty = DependencyProperty.RegisterAttached(
"FIcon", typeof(string), typeof(ControlAttachProperty), new FrameworkPropertyMetadata("")); public static string GetFIcon(DependencyObject d)
{
return (string)d.GetValue(FIconProperty);
} public static void SetFIcon(DependencyObject obj, string value)
{
obj.SetValue(FIconProperty, value);
}
#endregion #region FIconSizeProperty 字体图标大小
/// <summary>
/// 字体图标
/// </summary>
public static readonly DependencyProperty FIconSizeProperty = DependencyProperty.RegisterAttached(
"FIconSize", typeof(double), typeof(ControlAttachProperty), new FrameworkPropertyMetadata(12D)); public static double GetFIconSize(DependencyObject d)
{
return (double)d.GetValue(FIconSizeProperty);
} public static void SetFIconSize(DependencyObject obj, double value)
{
obj.SetValue(FIconSizeProperty, value);
}
#endregion #region FIconMarginProperty 字体图标边距
/// <summary>
/// 字体图标
/// </summary>
public static readonly DependencyProperty FIconMarginProperty = DependencyProperty.RegisterAttached(
"FIconMargin", typeof(Thickness), typeof(ControlAttachProperty), new FrameworkPropertyMetadata(null)); public static Thickness GetFIconMargin(DependencyObject d)
{
return (Thickness)d.GetValue(FIconMarginProperty);
} public static void SetFIconMargin(DependencyObject obj, Thickness value)
{
obj.SetValue(FIconMarginProperty, value);
}
#endregion
附录：参考引用
WPF自定义控件与样式(1)-矢量字体图标(iconfont)
WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展
版权所有，文章来源：http://www.cnblogs.com/anding
个人能力有限，本文内容仅供学习、探讨，欢迎指正、交流。
WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式的更多相关文章
- 【转】WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等 本文主要内容: CheckBox复选框的自定义样式,有两种不同的风格实现: RadioB ...
- [WPF 自定义控件]在MenuItem上使用RadioButton
1. 需求 上图这种包含多选(CheckBox)和单选(RadioButton)的菜单十分常见,可是在WPF中只提供了多选的MenuItem.顺便一提,要使MenuItem可以多选,只需要将MenuI ...
- RadioButton 自定义样式(带动画)
<Style x:Key="Radbtn" TargetType="{x:Type RadioButton}"> <Setter Proper ...
- input type="file"在各个浏览器下的默认样式，以及修改自定义样式
一.<input type="file"/>在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 mac google 点击按钮和输入框都可以打开文件夹 mac ...
- WPF自定义控件与样式(2)-自定义按钮FButton
一．前言.效果图 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 还是先看看效果 ...
- WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控 ...
- WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Scr ...
- WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Dat ...
- WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 下拉选 ...
随机推荐
- Junit3与Junit4的区别
Junit4最大的亮点就是引入了注解(annotation),通过解析注解就可以为测试提供相应的信息,抛弃junit3使用命名约束以及反射机制的方法. /** * 被测试类 */ package co ...
- MSSQL数据库中Text类型字段在PHP中被截断之解 (转)
在PHP中使用了MSSQL数据库,恰巧数据库中又使用了Text类型字段,于是问题产生了.每次从数据库中查询得到的数据总是被莫名的截断,一开始是以为我使用的PHP框架中对字符串的长度有所限制,后来发现这 ...
- zabbix3.x搭建（1）
服务器端安装配置: 1).安装: yum -y install gcc gcc-c++ autoconf httpd php mysql mysql-server php-mysql httpd-ma ...
- Hadoop伪分布搭建
一.伪分布式的搭建 1.准备Linux环境 1.0点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改 ...
- iOS 里面 NSTimer 防止 循环引用
使用NSTimer的类 #import "TBTimerTestObject.h" #import "TBWeakTimerTarget.h" @interfa ...
- SQL Server 存储(3/8)：理解GAM和SGAM页
我们知道SQL Server在8K 的页里存储数据.分区就是物理上连续的8个页.当我们创建一个数据库,数据文件会被逻辑分为页和区,当用户对象创建时,页会分配给它用来存储数据.GAM(Global Al ...
- 循序渐进做项目系列（1）：最简单的C/S程序——让服务器来做加法
(本文是专门针对未接触过C/S开发的初学者而写的,C/S开发高手请自动忽略啊~~) 还在写“Hello world!”式的单机程序吗?还在各种拖控件吗?是否自己都觉得有点low呢?来个质的飞跃吧!看看 ...
- httpclient瓶颈
问题现象: 1.系统异常,应用拒绝访问. 2.web容器线程爆满 问题分析: 1.数据库正常 2.日志信息没有异常 问题思考: 1.应用访问量突破顶峰. 2.应用在某处存在瓶颈 发现问题: 需要了解线 ...
- 每周一书-编写高质量代码：改善C程序代码的125个建议
首先说明,本周活动有效时间为2016年8月28日到2016年9月4日.本周为大家送出的书是由机械工业出版社出版,马伟编著的<编写高质量代码:改善C程序代码的125个建议>. 编辑推荐 10 ...
- Wix 安装部署教程(十一) ---QuickWix
这次发布的是这两天做的一个WIX工具QuickWIX,主要解决两个问题点1.对大文件快速生成wix标签(files,Directories,ComponentRef):2.比较前后两次工程的差异.大的 ...