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="&#xe68b;"
                                        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="&#xe660;" TargetName="icon" ></Setter>
                            <Setter Property="Foreground" Value="{StaticResource CheckedForeground}"></Setter>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="{x:Null}">
                            <Setter Property="Text" Value="&#xe68c;" 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)));
        }
    }

View Code