![cover](https://img-home.csdnimg.cn/images/20230309035558.png)
WPF中iconfont图标库的使用
wpf中iconfont图标库的使用,包括字体图标,图片和SVG
总目录
文章目录
前言
本文主要介绍在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="" FontFamily="{StaticResource font}" FontSize="20"></Button>
<TextBlock Text="" FontFamily="{StaticResource font}" FontSize="20"></TextBlock>
<TextBlock Text="" FontFamily="{StaticResource font}" FontSize="20"></TextBlock>
<Label Content="" 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="" FontFamily="{StaticResource font}" FontSize="20"></Button>
<TextBlock Text="" FontFamily="{StaticResource font}" FontSize="20"></TextBlock>
<TextBlock Text="" FontFamily="{StaticResource font}" FontSize="20"></TextBlock>
<Label Content="" 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="" 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>
总结
以上就是本文内容,希望以上内容可以帮助到你,如文中有不对之处,还请批评指正。
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)