WPF自定义控件02：字体图标支持

2022-04-29 10:35:50

1 图标字体概述

我们知道，在日常的界面开发中，为了达到更好的美观度，需要UI设计人员进行合理的布局，并用相关的图标来丰富和美化界面。之前，应用程序上的图形多是位图，它有一个缺点就是在界面进行缩放时，会出现锯齿情况，图片会模糊，这样对于用户体验来说，是比较差的。因此，最近几年，多数应用都在采用一种矢量图图标，且它作为一种字体，可以非常方便进行整合，当使用某个图标时，只需要通过文本进行制定具体的图标编码即可使用，这里比较熟知的有Font Awesome。它给我们提供了一套可缩放的矢量图标字体,它可以被指定大小、颜色、阴影以及任何可以用CSS进行定义的样式。

Font Awesome网址为： http://www.fontawesome.com.cn/ ，它具备如下的好处：

WPF自定义控件02：字体图标支持

2 WPF 图标字体

从上述的 Font Awesome字体的优势来说，它兼容桌面级应用，因此也适合于WPF。首先，我们需要将Font Awesome字体下载到本地，并拷贝到WPF项目中，这里放于Fonts目录中，如下图所示：

WPF自定义控件02：字体图标支持

其次，需要设置字体文件的【生成操作】为资源，这样应用程序才能按照路径找到该字体文件，如下图所示：

WPF自定义控件02：字体图标支持

再次，定义一个Style样式文件IconFont.xaml，它用于指定Font Awesome字体，这样方便重用，介绍过多的重复代码拷贝，具体示例代码如下：

<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">

    <Style x:Key="IconFont" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="/Yd.WpfControls;component/Fonts/#dticonfont"></Setter>
        <Setter Property="Foreground" Value="{x:Static local:FlatColors.CLOUDS}"/>
        <Setter Property="TextAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="FontSize" Value="20"/>
    </Style>

    <Style x:Key="faFont" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="/Yd.WpfControls;component/Fonts/#FontAwesome"></Setter>
        <Setter Property="Foreground" Value="{x:Static local:FlatColors.CLOUDS}"/>
        <Setter Property="TextAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="FontSize" Value="20"/>
    </Style>
    
</ResourceDictionary>

其中第一部分为iconFont字体，第二个部分为Font Awesome字体，它的Key是faFont，目标控件类型为TextBlock。

注意：字体中路径是有前缀的，格式为 /Yd.WpfControls;component/Fonts/#字体名，#后面是字体名，而不是字体文件名，具体的字体名称可以双击字体文件进行安装，安装界面会显示字体的名称。

最后，我们就可以在其他样式文件中引入该字体了，比如FlatCheckBox.xaml是另外一个控件的样式，这个文件中通过如下代码进行引入:

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary  Source="/Yd.WpfControls;component/Style/IconFont.xaml"/>
    </ResourceDictionary.MergedDictionaries>

<TextBlock  x:Name="icon" Text="&#xf0c8;" Style="{StaticResource faFont}"  FontSize="26" />

码农公寓

1 图标字体概述

2 WPF 图标字体

相关文章