WPF自定义控件03：FlatCheckBox

     前面两篇文章分别介绍了WPF自定义控件FlatButton和WPF字体图标的支持，其中关于WPF中引入Font Awesome字体是本文的前置知识，这篇文章介绍 WPF自定义控件FlatCheckBox，其中的选中状态是用Font Awesome图标字体实现的。下面将详细介绍具体的实现细节。

1 WPF项目结构

     在WPF自定义控件FlatButton这篇文章中，已经介绍了如何创建示例项目，这里基于项目继续进行控件扩展。本质上，FlatCheckBox是继承CheckBox控件，并通过自定义Style实现的Flat UI效果。具体的项目结构如下图所示:

     其中的Fonts目录下存放各种图标字体文件，Style目录下存放各种控件的UI 样式定义文件。

2 WPF FlatCheckBox实现

     首先在Yd.WpfControls项目中添加一个类FlatCheckBox.cs，它继承自CheckBox控件，示例代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace Yd.WpfControls
{
    public class FlatCheckBox : CheckBox
    {
        static FlatCheckBox()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(FlatCheckBox),
               new FrameworkPropertyMetadata(typeof(FlatCheckBox)));
        }

    }
}

   由代码可知，这里并未对相关的属性和事件进行自定义，而是通过继承CheckBox来快速完成FlatCheckBox自定义控件的开发。FlatCheckBox控件的UI样式主要就是依靠FlatCheckBox.xaml文件进行定义的，示例代码如下：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:Yd.WpfControls"
                    >
    <!--图标字体引入-->
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary  Source="/Yd.WpfControls;component/Style/IconFont.xaml"/>
    </ResourceDictionary.MergedDictionaries>
    <!--FlatCheckBox 样式-->
    <Style  TargetType="{x:Type local:FlatCheckBox}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{x:Static local:FlatColors.PETER_RIVER}"/>
        <Setter Property="Padding" Value="0"></Setter>
        <Setter Property="FontSize" Value="{x:Static local:FlatFonts.contentFontSize}"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:FlatCheckBox}">
                    <Grid x:Name="grid" Margin="{TemplateBinding Padding}" VerticalAlignment="Center">
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                            <!-- 控件图标字体 -->
                            <TextBlock  x:Name="icon" Text="&#xf0c8;" Style="{StaticResource faFont}"
                                        FontSize="26"
                                        Margin="3"
                                        Foreground="{TemplateBinding Foreground}"/>
                            <ContentPresenter VerticalAlignment="Center"/>
                        </StackPanel>
                    </Grid>
                    <!--触发器-->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Text" Value="&#xf14a;" TargetName="icon" ></Setter>
                            <Setter Property="Foreground" Value="{x:Static local:FlatColors.BELIZE_HOLE}"></Setter>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="{x:Null}">
                            <Setter Property="Text" Value="&#xf0c8;" TargetName="icon" ></Setter>
                            <Setter Property="Foreground" Value="{x:Static local:FlatColors.PETER_RIVER}"></Setter>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Foreground" Value="{x:Static local:FlatColors.PETER_RIVER}"></Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value="0.5" TargetName="grid" ></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

其中的<TextBlock  x:Name="icon" Text="&#xf0c8;" Style="{StaticResource faFont}" />则指定了文本的样式定义，Style资源Key为faFont，Text为"&#xf0c8;" ，这里需要查看Font Awesome图标字体CheatSheet图标对照清单 ( http://www.fontawesome.com.cn/cheatsheet/)，部分界面截图如下：

 通过触发器Trigger来确定FlatCheckBox属性IsChecked变化时，如何在UI上进行显示，比如当选中时，属性IsChecked的值为true时，则会触发如下触发器定义的规则：

<Trigger Property="IsChecked" Value="true">
      <Setter Property="Text" Value="&#xf14a;" TargetName="icon" ></Setter>
      <Setter Property="Foreground" Value="{x:Static local:FlatColors.BELIZE_HOLE}"></Setter>
</Trigger>

此时，设置模板中的名称为icon的控件Text值为&#xf14a; 即为勾选的图标，且字体颜色为FlatColors.BELIZE_HOLE 。

3 WPF FlatCheckBox测试

     首先，需要重新生成一下项目文件，然后在WpfControls项目中添加自定义控件FlatCheckBox，MainWindow.xaml示例代码如下:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfControls"
        xmlns:WpfControls="clr-namespace:Yd.WpfControls;assembly=Yd.WpfControls" 
        x:Class="WpfControls.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid RenderTransformOrigin="0.219,0.452">

        <WpfControls:FlatCheckBox Content="是否禁用" HorizontalAlignment="Left" 
                     Margin="89,160,0,0" VerticalAlignment="Top" Height="57" Width="180" />

    </Grid>
</Window>

   运行界面如下: