WPF 如何自定义图标
引言
在人机交互的开发中,图标是非常重要的一个交互元素。WPF的开发中图标的使用有很多中方式:
-
加载字体图标资源,这方面的资源有:
- Iconfont(阿里图标)
- Awesome
- …
-
使用前端框架提供的资源,例如MaterialDesign的PackIcon控件里面。
-
使用Path自定义设计图标。
应用
使用Path自制控件时,一些比较简单的图形可以直接通过几行实现,但是比较复杂的图形就很难了。幸好微软推出了一种图形标记格式——mini-languages。在WPF中可以使用这种标记语言的有StreamGeometry 和PathFigureCollection。本次使用StreamGeometry来实现我们自定义图标的设计。
在资源文件中定义图标资源。
<StreamGeometry x:Key="Icon">
M 10,100 C 10,300 300,-200 300,100
</StreamGeometry>
这种图标标记是以字符串的形式存在,因此可以按照官网的Path Markup Syntax说明去自制图标编辑器(如果有兴趣)。更简单的方式图标标记获取方式:使用制图工具(例如AI(Adobe Illustrator))制作图标,然后导出XAML文件格式。注意,输出的路径要为单路径。制图工具很多V S Blend也是可以的。
在视图使用该资源。
<WrapPanel>
<Viewbox Width="30" Height="30">
<Path Data="{StaticResource Icon}" Fill="Red"/>
</Viewbox>
</WrapPanel>
效果
扩展
通过以上,我们至少知道了如何自定义制作图标。因此我们可以将图标制作成一个独立的控件,在我们的项目中使用。具体操作可以参考MaterialDesignInXamlToolkit的实现。