| WPF自定义控件与样式(4) | 您所在的位置：网站首页 › 手机取消复选框 › WPF自定义控件与样式(4) |
WPF自定义控件与样式(4)
|
一．前言 申明：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)));
}
}
View Code
样式代码，状态变换用了点小动画，为了支持缩放，用了一个Viewbox来包装内容：
View Code
使用示例： 三．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
附录：参考引用 WPF自定义控件与样式(1)-矢量字体图标(iconfont) WPF自定义控件与样式(2)-自定义按钮FButton WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展
版权所有，文章来源：http://www.cnblogs.com/anding 个人能力有限，本文内容仅供学习、探讨，欢迎指正、交流。 |
【本文地址】