WPF字体图标——IconFont

原文:WPF字体图标——IconFont

版权声明：本文为【CSDN博主：松一160】原创文章，未经允许不得转载。 https://blog.csdn.net/songyi160/article/details/54894233

一、字体图标概述

①字体图标其实就是把矢量图形打包到字体文件里，以后就可以像使用一般外置字体一样的使用它，因此Winform、WPF中都是可以用的。

②可以在很多地方使用图标字体，包括自定义控件、自定义样式、模板等。

③字体图标优点：

• 字体文件非常小，比使用png等图片文件要小很多
• 和普通字体一样，是矢量的，可任意放大缩小，且不会失真
• 网上开源字体图标很多，很容易获取，项目开发中需要的绝大部分图标都可以找到，非常方便

二、在WPF中使用字体图标

①获取字体图标，推荐阿里巴巴开源字体，如何下载字体参考它网站的下载说明，解压下载的字体会得到以下文件：

iconfont.tff是我们需要的字体图标库文件

demo_unicode.html是字体库对应的字体的标识，如下图：

以后通过使用上图红色方框中的标识，即可获得对应的字体图标

②将字体图标添加到项目新建的Resources文件夹中，并设置其生成操作为"Resource"，如下图：

③定义样式

使用TextBlock作为图标显示的容器，因此定义一个TextBlock的样式即可，如下所示。其中"SK2015"为字体名称，以前阿里巴巴开源字体库下载的时候可以修改字体名称，现在好像修改不了，默认字体名称为"iconfont"，有朋友发现如何修改字体名称的话，请在下面给我留言，谢谢！

MyIconFontStyle.xaml代码如下：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:IconFontDemo">
    <Style x:Key="iFont" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="/IconFontDemo;component/Resources/#SF2015"/>
        <Setter Property="TextAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="FontSize" Value="20"/>
    </Style>
</ResourceDictionary>

注意：上面的FontFamily属性也可以这样设置<Setter Property="FontFamily" Value="/Resources/#SF2015"/>

但是为了以后将字体样式定义到另外一个程序集，还是推荐使用全的相对路径，否则会出现找不到资源的问题。

④在App.xaml中引用定义的样式资源

<Application x:Class="IconFontDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:IconFontDemo"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="MyIconFontStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

⑤在xaml中使用字体图标，MainWindow.xaml代码

<Window x:Class="IconFontDemo.MainWindow"
        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:IconFontDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" Background="Blue">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="" Style="{StaticResource iFont}" FontSize="50" Margin="3" Foreground="White"></TextBlock>
        <TextBlock Text="" Style="{StaticResource iFont}" FontSize="60" Margin="3" Foreground="SandyBrown"></TextBlock>
        <TextBlock Text="" Style="{StaticResource iFont}" FontSize="70" Margin="3" Foreground="#FB0AE8"></TextBlock>
        <TextBlock x:Name="ios" Style="{StaticResource iFont}" FontSize="80" Margin="3" Foreground="Chartreuse"></TextBlock>
        <TextBlock x:Name="android" Style="{StaticResource iFont}" FontSize="90" Margin="3" Foreground="#FEDB11"></TextBlock>
    </StackPanel>
</Window>

很奇怪Text属性在网页上无法显示，三个属性分别为：Text=""
Text="" Text=""

⑥在CS代码中使用字体图标，MainWindow.xaml.cs代码：

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.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace IconFontDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            ios.Text = "\xe602";
            android.Text = "\xe60c";
        }
    }
}

⑦最终效果演示