WPF 如何自定义图标-前言

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的实现。