WPF中iconfont图标库的使用

鲤籽鲲

已于 2023-06-12 17:04:16 修改

阅读量6.7k

点赞数 5

分类专栏： WPF 文章标签： c# wpf

于 2023-01-01 13:32:09 首次发布

本文链接：https://blog.csdn.net/qq_39847278/article/details/128511522

版权

WPF 专栏收录该内容

22 篇文章 79 订阅

订阅专栏

总目录

文章目录

总目录
前言
一、查找项目需要的图标
二、图标的使用
三、使用注意事项
- 1 字体图标资源路径
总结

前言

本文主要介绍在WPF中iconfont图标库的使用

一、查找项目需要的图标

首先进入阿里巴巴矢量图标库网站，登录自己的账号（没有注册一个）
查找自己项目中需要的矢量图标，添加进购物车，如下图所示：

在这里插入图片描述

完成所有图标的收集后，我们可以新建一个项目，如下图所示：

在这里插入图片描述

将收集的图标按照项目分类整理好，利于后期追溯和维护

在这里插入图片描述

二、图标的使用

1、作为字体使用

1.将项目图标，下载并解压缩

在这里插入图片描述

2.将ttf文件复制粘贴到自己的项目中

3.xaml中使用

    <Window.Resources>
        <FontFamily x:Key="font">/WpfApp3;component/Res/icon/#iconfont</FontFamily>
    </Window.Resources>
    <WrapPanel VerticalAlignment="Top" ItemHeight="50" ItemWidth="50">
        <Button Content="&#xe627;" FontFamily="{StaticResource font}" FontSize="20"></Button>
        <TextBlock Text="&#xe692;" FontFamily="{StaticResource font}" FontSize="20"></TextBlock>
        <TextBlock Text="&#xe627;" FontFamily="{StaticResource font}" FontSize="20"></TextBlock>
        <Label Content="&#xe650;" FontFamily="{StaticResource font}" FontSize="20"></Label>
    </WrapPanel>

在这里插入图片描述

4. 在代码中使用编码

在这里插入图片描述
注意此处与在xaml中不一样，如果在xaml中使用的图标编码是，则在代码中是 \ue627。

如果需要存数据库则是 e627

5. 注意

 <Window.Resources>
        <FontFamily x:Key="font">/WpfApp3;component/Res/icon/#iconfont</FontFamily>
    </Window.Resources>

以上路径中，最后的字体名称，以打开ttf 文件后，查看的字体字体名称为主
在这里插入图片描述

 <WrapPanel VerticalAlignment="Top" ItemHeight="50" ItemWidth="50">
        <Button Content="&#xe627;" FontFamily="{StaticResource font}" FontSize="20"></Button>
        <TextBlock Text="&#xe692;" FontFamily="{StaticResource font}" FontSize="20"></TextBlock>
        <TextBlock Text="&#xe627;" FontFamily="{StaticResource font}" FontSize="20"></TextBlock>
        <Label Content="&#xe650;" FontFamily="{StaticResource font}" FontSize="20"></Label>
    </WrapPanel>

以上代码中使用类似  的图标编码，需要进入到iconfont 网站的项目中查看并获取，如下图所示：
在这里插入图片描述

2、使用图片

在这里插入图片描述
图片比较简单，直接下载图片即可

3、使用SVG

1.复制SVG代码

在这里插入图片描述

2.根据复制的代码编写WPF代码

如果复制的SVG代码中只有一个path的时候：

<svg t="1679546467475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1135" width="200" height="200">
	<path d="M895.423623 224.432539 607.855138 512l286.901289 297.699216 0.666172 85.723384-95.856162 0L512 607.856162 224.432539 895.423623l-95.856162 0 0-95.856162 287.567461-287.567461L128.576377 224.432539l0-95.856162 95.856162 0 287.567461 287.567461 287.567461-287.567461 95.856162 0L895.423623 224.432539z" fill="#020202" p-id="1136"></path>
</svg>

对应在WPF中的代码如下：

<PathGeometry x:Key="closePath">
     M453.44 512L161.472 220.032a41.408 41.408 0 0 1 58.56-58.56L512 453.44 803.968 161.472a41.408 41.408 0 0 1 58.56 58.56L570.56 512l291.968 291.968a41.408 41.408 0 0 1-58.56 58.56L512 570.56 220.032 862.528a41.408 41.408 0 0 1-58.56-58.56L453.44 512z
</PathGeometry>

如果复制的SVG代码中有多个path的时候：

<svg t="1679545774855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2535" width="200" height="200">
	<path d="M791.589047 224.121527l-567.979212 0c-30.189886 0-54.751149 24.561263-54.751149 54.751149l0 369.442335c0 30.189886 24.561263 54.751149 54.751149 54.751149l361.357585 0 140.203878 101.008195c5.423946 4.605237 12.178293 6.959025 19.034979 6.959025 3.786528 0 7.675395-0.71637 11.359584-2.251449 11.052568-4.605237 18.113932-15.248451 18.113932-27.222067L773.679792 703.06616l17.909254 0c30.189886 0 54.751149-24.561263 54.751149-54.751149l0-369.442335C846.340196 248.68279 821.778933 224.121527 791.589047 224.121527zM801.311213 648.315011c0 5.219268-4.502898 9.722167-9.722167 9.722167L728.65081 658.037178l0 45.028983 0 0 0 47.996802-129.560664-93.3328-0.409354 0.511693L598.680792 658.037178 223.609834 658.037178c-5.219268 0-9.722167-4.502898-9.722167-9.722167l0-369.442335c0-5.219268 4.502898-9.722167 9.722167-9.722167l567.979212 0c5.219268 0 9.722167 4.502898 9.722167 9.722167L801.311213 648.315011z" p-id="2536"></path>
	<path d="M380.69958 429.822107l-40.935439 0c-5.628623 0-10.23386 4.605237-10.23386 10.23386l0 40.935439c0 5.628623 4.605237 10.23386 10.23386 10.23386l40.935439 0c5.628623 0 10.23386-4.605237 10.23386-10.23386l0-40.935439C390.93344 434.427344 386.328203 429.822107 380.69958 429.822107z" p-id="2537"></path>
	<path d="M536.254247 439.03258c0-5.628623-4.605237-10.23386-10.23386-10.23386l-40.935439 0c-5.628623 0-10.23386 4.605237-10.23386 10.23386l0 40.935439c0 5.628623 4.605237 10.23386 10.23386 10.23386l40.935439 0c5.628623 0 10.23386-4.605237 10.23386-10.23386L536.254247 439.03258z" p-id="2538"></path>
	<path d="M683.621827 439.03258c0-5.628623-4.605237-10.23386-10.23386-10.23386l-40.935439 0c-5.628623 0-10.23386 4.605237-10.23386 10.23386l0 40.935439c0 5.628623 4.605237 10.23386 10.23386 10.23386l40.935439 0c5.628623 0 10.23386-4.605237 10.23386-10.23386L683.621827 439.03258z" p-id="2539"></path>
</svg>

对应在WPF中的代码如下：

<GeometryGroup x:Key="msgPath">
    <PathGeometry>M791.589047 224.121527l-567.979212 0c-30.189886 0-54.751149 24.561263-54.751149 54.751149l0 369.442335c0 30.189886 24.561263 54.751149 54.751149 54.751149l361.357585 0 140.203878 101.008195c5.423946 4.605237 12.178293 6.959025 19.034979 6.959025 3.786528 0 7.675395-0.71637 11.359584-2.251449 11.052568-4.605237 18.113932-15.248451 18.113932-27.222067L773.679792 703.06616l17.909254 0c30.189886 0 54.751149-24.561263 54.751149-54.751149l0-369.442335C846.340196 248.68279 821.778933 224.121527 791.589047 224.121527zM801.311213 648.315011c0 5.219268-4.502898 9.722167-9.722167 9.722167L728.65081 658.037178l0 45.028983 0 0 0 47.996802-129.560664-93.3328-0.409354 0.511693L598.680792 658.037178 223.609834 658.037178c-5.219268 0-9.722167-4.502898-9.722167-9.722167l0-369.442335c0-5.219268 4.502898-9.722167 9.722167-9.722167l567.979212 0c5.219268 0 9.722167 4.502898 9.722167 9.722167L801.311213 648.315011z</PathGeometry>
    <PathGeometry>M380.69958 429.822107l-40.935439 0c-5.628623 0-10.23386 4.605237-10.23386 10.23386l0 40.935439c0 5.628623 4.605237 10.23386 10.23386 10.23386l40.935439 0c5.628623 0 10.23386-4.605237 10.23386-10.23386l0-40.935439C390.93344 434.427344 386.328203 429.822107 380.69958 429.822107z</PathGeometry>
    <PathGeometry>M536.254247 439.03258c0-5.628623-4.605237-10.23386-10.23386-10.23386l-40.935439 0c-5.628623 0-10.23386 4.605237-10.23386 10.23386l0 40.935439c0 5.628623 4.605237 10.23386 10.23386 10.23386l40.935439 0c5.628623 0 10.23386-4.605237 10.23386-10.23386L536.254247 439.03258z</PathGeometry>
    <PathGeometry>M683.621827 439.03258c0-5.628623-4.605237-10.23386-10.23386-10.23386l-40.935439 0c-5.628623 0-10.23386 4.605237-10.23386 10.23386l0 40.935439c0 5.628623 4.605237 10.23386 10.23386 10.23386l40.935439 0c5.628623 0 10.23386-4.605237 10.23386-10.23386L683.621827 439.03258z</PathGeometry>
</GeometryGroup>

3.在界面中调用

<Border Height="80" Width="80" Margin="10">
     <Path Data="{StaticResource  closePath}" Fill="Red" Stretch="Fill"></Path>
</Border>
<Border Height="80" Width="80" Margin="10">
     <Path Data="{StaticResource msg}" Fill="Green" Stretch="Uniform"></Path>
</Border>

效果如下：
在这里插入图片描述

三、使用注意事项

1 字体图标资源路径

有的时候我们引用字体图标，会出现预览时或运行后无法展示实际图标，出现的是一个框框，一般可能由于以下原因造成：

字体没有设置为资源
字体图标资源的引用路径不对
- a 路径写错，这种错误比较容易察觉
- b 路径写的不够精准，不太容易察觉，因此对于字体图标资源最好全部采用绝对路径进行定位

案例如下：比如有主程序exe中引用了Assets程序集dll，程序中所有的资源都编写和收集在Assets.dll 中，此时我们在
Assets 的 Styles 文件夹下的BaseStyle.xaml 资源文件中写了如下代码：

 <FontFamily x:Key="IconFontFamily">pack://application:,,,/Fonts/#iconfont</FontFamily>

然后在主程序中，引入Assets 程序集，然后在主程序的App.xaml中合并资源文件

<ResourceDictionary.MergedDictionaries>
       <ResourceDictionary Source="pack://application:,,,/Assets;component/Styles/BaseStyle.xaml"></ResourceDictionary>
       <ResourceDictionary Source="pack://application:,,,/Assets;component/Styles/MainStyle.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>

最后，在主程序的界面中引用字体图标文件

<TextBlock Text="&#xe62e;" FontSize="50" FontFamily="{StaticResource IconFontFamily}"></TextBlock>

最后运行的时候会发现：字体图标的地方出现一个框框，根本无法正确的显示图标。如果想就解决这个问题只需要将

 <FontFamily x:Key="IconFontFamily">pack://application:,,,/Fonts/#iconfont</FontFamily>

修改为：

 <FontFamily x:Key="IconFontFamily">pack://application:,,,/Assets;component/Fonts/#iconfont</FontFamily>

总结

以上就是本文内容，希望以上内容可以帮助到你，如文中有不对之处，还请批评指正。