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="" 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="" 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="" 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="" Style="{StaticResource faFont}" />则指定了文本的样式定义,Style资源Key为faFont,Text为"" ,这里需要查看Font Awesome图标字体CheatSheet图标对照清单 ( http://www.fontawesome.com.cn/cheatsheet/),部分界面截图如下:
通过触发器Trigger来确定FlatCheckBox属性IsChecked变化时,如何在UI上进行显示,比如当选中时,属性IsChecked的值为true时,则会触发如下触发器定义的规则:
<Trigger Property="IsChecked" Value="true">
<Setter Property="Text" Value="" TargetName="icon" ></Setter>
<Setter Property="Foreground" Value="{x:Static local:FlatColors.BELIZE_HOLE}"></Setter>
</Trigger>
此时,设置模板中的名称为icon的控件Text值为 即为勾选的图标,且字体颜色为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>
运行界面如下:
- 点赞
- 收藏
- 关注作者
评论(0)