WPF自定义控件03：FlatCheckBox-阿里云开发者社区

WPF自定义控件03：FlatCheckBox

2021-09-11 728

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文通过在WPF中引入Font Awesome图标字体来实现自定义FlatCheckBox控件的UI绘图。用户只需要在窗体上引入自定义的FlatCheckBox控件即可使用具有Flat UI效果的控件，非常方便。

前面两篇文章分别介绍了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控件，示例代码如下:

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Threading.Tasks;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Media;
namespaceYd.WpfControls{
publicclassFlatCheckBox : CheckBox    {
staticFlatCheckBox()
        {
DefaultStyleKeyProperty.OverrideMetadata(typeof(FlatCheckBox),
newFrameworkPropertyMetadata(typeof(FlatCheckBox)));
        }
    }
}

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

<ResourceDictionaryxmlns="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><ResourceDictionarySource="/Yd.WpfControls;component/Style/IconFont.xaml"/></ResourceDictionary.MergedDictionaries><!--FlatCheckBox 样式--><StyleTargetType="{x:Type local:FlatCheckBox}"><SetterProperty="Background"Value="Transparent"/><SetterProperty="Foreground"Value="{x:Static local:FlatColors.PETER_RIVER}"/><SetterProperty="Padding"Value="0"></Setter><SetterProperty="FontSize"Value="{x:Static local:FlatFonts.contentFontSize}"></Setter><SetterProperty="Template"><Setter.Value><ControlTemplateTargetType="{x:Type local:FlatCheckBox}"><Gridx:Name="grid"Margin="{TemplateBinding Padding}"VerticalAlignment="Center"><StackPanelOrientation="Horizontal"VerticalAlignment="Center"><!-- 控件图标字体 --><TextBlockx:Name="icon"Text="&#xf0c8;"Style="{StaticResource faFont}"FontSize="26"Margin="3"Foreground="{TemplateBinding Foreground}"/><ContentPresenterVerticalAlignment="Center"/></StackPanel></Grid><!--触发器--><ControlTemplate.Triggers><TriggerProperty="IsChecked"Value="true"><SetterProperty="Text"Value="&#xf14a;"TargetName="icon"></Setter><SetterProperty="Foreground"Value="{x:Static local:FlatColors.BELIZE_HOLE}"></Setter></Trigger><TriggerProperty="IsChecked"Value="{x:Null}"><SetterProperty="Text"Value="&#xf0c8;"TargetName="icon"></Setter><SetterProperty="Foreground"Value="{x:Static local:FlatColors.PETER_RIVER}"></Setter></Trigger><TriggerProperty="IsMouseOver"Value="true"><SetterProperty="Foreground"Value="{x:Static local:FlatColors.PETER_RIVER}"></Setter></Trigger><TriggerProperty="IsEnabled"Value="False"><SetterProperty="Opacity"Value="0.5"TargetName="grid"></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></ResourceDictionary>

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

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

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

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

3 WPF FlatCheckBox测试

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

<Windowxmlns="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"><GridRenderTransformOrigin="0.219,0.452"><WpfControls:FlatCheckBoxContent="是否禁用"HorizontalAlignment="Left"Margin="89,160,0,0"VerticalAlignment="Top"Height="57"Width="180"/></Grid></Window>