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自定义控件与样式(2)-自定义按钮FButton

WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

个人能力有限，本文内容仅供学习、探讨，欢迎指正、交流。

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自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 下拉选 ...

随机推荐

make基础（转）
1. 基本规则请点评除了Hello World这种极简单的程序之外,一般的程序都是由多个源文件编译链接而成的,这些源文件的处理步骤通常用Makefile来管理.Makefile起什么作用呢?我们先 ...
Python成长笔记 - 基础篇（八）
socket编程应用层: 表示层: 会话层: 传输层: 网络层: ip地址数据链路层: MAC地址物理层: 协议类型: TCP/IP协议:三次握手,四次断开 2. Socket 参数 ...
install openvpn and openvpn manager in ubuntu
sudo apt-get install openvpn sudo apt-get install network-manager-openvpn
xml文档解析
XML文档解主要分为四种解析方式,官方提供的两种分别是:DOM 和 SAX,第三方分别是:JDOM 和 DOM4j 测试用的xml文档: <?xml version="1.0" ...
d3 API axis
场景 1.画网格线使用方法.innerTickSize(): 指定内刻度大小或者 .tickSize(inner, outer): 2.内外刻度线 innerTickSize outerTickS ...
CentOS7使用阿里云镜像安装Mongodb
一.概述近日要在新的CentOS系统上安装MongoDB,某度结果后直接从Mongo官网直接获得3.2版本的下载链接,结果在下载时发觉速度慢的可怜.迫于无奈,只能找国内的镜像下载.切换国内的安装源后 ...
Swift 对比学习 (二)
书接上回,可以作为参数和返回值的函数数型,以及嵌套函数,绝对继承了动态语言的优良传统: 函数嵌套了,那必然少不了闭包问题,Swift的闭包表达式语法也蛮有趣的. { (paraeeters) -> ...
NOSQL 数据库 CodernityDB
CodernityDB 是一个开源的纯 Python 实现的.无第三方依赖.支持多平台的 NoSQL 数据库. 关键特性: 纯 Python 开发支持多索引快速 (每秒将近10万的写入和超过10万 ...
Xamarin.Android之MvvmCross
欢迎大家加入以下开源社区 Xamarin-Cn:https://github.com/Xamarin-Cn Mvvmcross-Cn:https://github.com/Mvvmcross-Cn ...
关于MySQL的在线扩容
原文地址:http://bucketli.iteye.com/blog/1294032 主要简单总结下,mysql在线扩容和缩容一般涉及到的内容,主要包括三个方面,1.在线也就意味着需要把增量的数据重 ...

WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式的更多相关文章

随机推荐

热门专题