WPF自定义控件03:FlatCheckBox

举报
jackwangcumt 发表于 2021/08/21 20:28:31 2021/08/21
【摘要】 本文通过在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效果。具体的项目结构如下图所示:

2.jpg

     其中的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/),部分界面截图如下:

1.jpg

 通过触发器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>

   运行界面如下:

3.jpg

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。