【转】WPF自定义控件与样式(4)CheckBox/RadioButton自定义样式

一．前言

　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等

本文主要内容：

• CheckBox复选框的自定义样式，有两种不同的风格实现；


• RadioButton单选框自定义样式，有两种不同的风格实现；

二． CheckBox自定义样式

2.1 CheckBox基本样式

标准CheckBox样式代码如下，实现了三态的显示，其中不同状态的图标用了字体图标（关于字体图标，可以参考本文末尾附录链接）  

 使用示例及效果：  

男
女
其他
女
我被禁用了
我被禁用了
我被禁用了

 

2.2 CheckBox另一种样式

在移动端比较常见的一种复选效果，先看看效果

 

这个代码是很久以前写的，用的控件的形式实现的，可以纯样式实现，更简洁，懒得改了。C#代码：  

///

/// BulletCheckBox.xaml 的交互逻辑
///

public class BulletCheckBox : CheckBox
{
public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
"Text", typeof(string), typeof(BulletCheckBox), new PropertyMetadata("Off"));
///

/// 默认文本（未选中）
///

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"));
///

/// 选中状态文本
///

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));
///

/// 选中状态前景样式
///

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));
///

/// 选中状态背景色
///

public Brush CheckedBackground
{
get { return (Brush)GetValue(CheckedBackgroundProperty); }
set { SetValue(CheckedBackgroundProperty, value); }
}
static BulletCheckBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(BulletCheckBox), new FrameworkPropertyMetadata(typeof(BulletCheckBox)));
}
}

样式代码，状态变换用了点小动画，为了支持缩放，用了一个Viewbox来包装内容：  

使用示例：

三．RadioButton自定义样式

3.1 RadioButon基本样式

标准单选控件的样式很简单，用不同图标标识不同状态，然后触发器控制不同状态的显示效果。  

使用示例：  

男
女
其他
女
女
我被禁用了
我被禁用了

效果图：

 

3.2 RadioButton淘宝、京东物品尺码单项样式

先看看效果：

 

样式定义也很简单，右下角那个小勾勾用的是一个字体图标，可以根据需要调整大小。  

示例代码：  

近3天
近7天
本月
自定义
2012.05.12-2015.12.14

补充说明，上面样式中有用到附加属性，如

ControlAttachProperty.FIconMargin" Value="1, 1, 3, 1"：复选框或单选框字体图标的边距

ControlAttachProperty.FIconSize" Value="25"：复选框或单选框字体图标的大小

关于附加属性可以参考上一篇（本文末尾链接），C#定义代码：

#region FIconProperty 字体图标
///

/// 字体图标
///

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 字体图标大小
///

/// 字体图标
///

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 字体图标边距
///

/// 字体图标
///

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