在WPF中使用IconFont图标以及图标的保存/读取

IconFont

IconFont是阿里提供的矢量图（SVG）图库，基于Path语言生成。

下载方法

  1. 首先将喜欢的图标添加到购物车当中。
  2. 将购物车中的图标添加到指定项目中。
    image
  3. 个人页面中选中指定项目的图标进行下载。
    image
  4. 下载后的项目图标中会包含多种不同语言使用的图标文件，对于WPF项目，我们主要使用以.ttf结尾的字体文件即可。
    image

图标修改

对于添加到项目中的图标，还可以通过鼠标选中不同部分自定义对应部分的位置、颜色大小、角度等。
image

在WPF项目中引用图标

此处，主要介绍如何在WPF项目中引入图标并成功显示。

  1. 首先是前面提到的.ttf结尾的字体文件，将其添加到项目路径后，设置其生成操作为资源。
    image
  2. 以资源的方式，引入对应的字体文件。
点击查看代码 
<Application
    x:Class="ItemsTest.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ItemsTest"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <FontFamily x:Key="testIcon">./Assets/iconfont.ttf#iconfont</FontFamily>
    </Application.Resources>
</Application>
  1. 在IconFont的项目中复制要使用的图标代码，这个编码就是图标在对应字体文件中的Unicode编码。
    image
  2. 在指定控件中，引用字体文件，并使用编码显示图标。

如果在设计时可以看到对应Iconfont的图片，但在运行时不显示。这是因为程序运行时，资源加载顺序问题导致的，可以考虑将字体文件资源修改为动态资源引用。

点击查看代码 
    <Grid>
        <TextBlock FontFamily="{StaticResource testIcon}" Text="&#xe92b;" />
    </Grid>

image

补充内容

下面的内容是其他一些相关的常用内容，以作补充。

字体文件的字体引入方式

  1. 直接引入对应字体文件中的某个字体的。<!--#后面跟的是对应字体的名称，完整格式为 filename.ttf#fontname-->，这也是上面所用到的引用方式。
点击查看代码 
<Application
    x:Class="ItemsTest.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ItemsTest"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <FontFamily x:Key="testIcon">./Assets/iconfont.ttf#iconfont</FontFamily>
    </Application.Resources>
</Application>
  1. 字体文件的增量引用方式，该方式不具体只出字体文件名，直接使用字体名进行引用，会一次性引用当前文件夹下所有字体文件中同名的字体。
点击查看代码 
<Application
    x:Class="ItemsTest.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ItemsTest"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <FontFamily x:Key="testIcon">./Assets/#iconfont</FontFamily>
    </Application.Resources>
</Application>

IconFont图标如何保存和读取

假设当前项目，我们实现了一个基于IconFont图标的自定义功能。用户可以随意给菜单分配不同的图标，并且在程序下次启动时，我们希望程序仍然能记住每个菜单对应的图标，这就涉及到了IconFont图标的保存/读取问题。由于涉及到图标的编码问题，我们不能直接存储对应图标的完整编码。
image

从上面的图标编码中也能看出，每个图标都是由&#x[编码值];的格式组成。这也是在WPF中标识一个Unicode编码的固定格式，为了放置数据在数据中存储完整格式导致乱码，我们也只能在数据库中存储其对应的编码值部分。
image
当我们从数据库中读取到这个字段后，将其转换为一个Unicode编码字符即可重新在控件上显示对应的图标。然而，在WPF和C#中其标识Unicode编码字符的格式并不一致。

  • C#转换方式：\ue604
  • Wpf转换方式：&#xe604;

在C#后端通过查询数据库找到e604的编码后，我们想通过数据绑定把这个值传给WPF并显示出相应的图标，就必须把这个编码值转换为Unicode编码。还要注意，通过在C#字符串拼接“\ue”的方式进行转换是无效的，这只是构造了一个字符串而已，并没有进行转换。
最终思路就是，在C#读取到对应的编码后，根据C#的规则转换为一个Unicode字符，然后让控件直接去绑定这个字符。随后，控件根据其指定的字体文件即可显示出对应的图标。

点击查看代码 
//C#
//从Unicode编码到编码值（\ue604---->e604）,存数据时
MenuIcon = ((int)MenuModel.MenuIcon.ToArray()[0]).ToString("x")

//从编码值到Unicode编码，读数据时,根据string去匹配对应图标（e604---->\ue604）。
//先转成十六进制编码 在转成 char作为一个 Unicode 字符，最后转成string 进行绑定
icon = ((char)int.Parse(item.MenuIcon, NumberStyles.HexNumber)).ToString();
posted @ 2025-07-18 16:04  Ytytyty  阅读(473)  评论(0)    收藏  举报