WPF应用实战开发指南如何结合阿里矢量图标库使用Geometry图标？

在SqlSugar开发框架的WPF应用中，有时候需要在按钮或者其他界面元素上使用一些图标，框架中我们可以使用lepoco/wpfui项目的图标库，也可以使用Font-Awesome-WPF图标库，另外如果喜欢阿里矢量图标库的，也可以通过使用Geometry图标来实现图标的展示，本文介绍在WPF应用中，结合阿里矢量图标库使用Geometry图标。

DevExpress技术交流群10：532598169欢迎一起进群讨论

1.lepoco/wpfui项目的图标库，列表选择界面

这些图标映射到枚举对象SymbolRegular和SymbolFilled，一个是常规的，一个是填充的图标。我们封装的选择图标界面如下所示：

界面展示的图标代码如下所示。

2.使用Font-Awesome-WPF图标组件

我们也可以用类似的方式来整合这个图标组件到项目中进行使用。图标选择界面运行效果如下所示，由于图标不是很多，所以一次性加载了（没有分页）。

界面展示的图标，代码如下所示。

系统运行，动态从后端获取菜单及图标展示如下所示。

前面介绍了两种图标的应用方案，我们再来介绍一下Geometry图标的场景。

由于我们框架整合了HandyControl的一些组件的展示，HandyControl控件的

通过它的控件扩展属性，我们可以很容易绑定按钮图标的展示。

部分按钮的定义如下所示。

通过hc:IconElement.Geometry的绑定，我们就可以自定义图标的展示，第一个AddGeometry是HandyControl的内置Geometry，而第二个t_import是我们用户扩展自定义导入的Geometry几何图形。

我们在项目定义一个Geometries\Custom.xaml文件，用来放置用户自定义的图标几何图形。

其中文件就是一个XML的文件定义。

该文件里面的集合图形，会在WPF应用的App中进行导入，如下代码所示。

为了更加直观的展示我们所有的自定义几何图标集合，我们可以通过也列表页面进行加载进行展示。动态加载所有自定义的图标集合，如下逻辑代码所示。

varappResourceDictionary=((App)Application.Current).Resources;varmergedDictionaries=appResourceDictionary.MergedDictionaries;//指定的sourcevarsource="/Styles/Geometries/Custom.xaml";varsourceUri=newUri(source,UriKind.Relative);varspecifiedDictionary=mergedDictionaries.FirstOrDefault(dictionary=>dictionary.Source==sourceUri);if(specifiedDictionary!=null){varsortedList=ToSortedList(specifiedDictionary.Keys);foreach(stringkeyinsortedList.Keys){if(specifiedDictionary[key]isGeometrygeometry){this.AllItems.Add(newCListItem(key,geometry));}}}然后我们把它的数据整合到视图模型ViewModel中，并创建一个几何图形的显示列表界面，用来展示所有的图标显示，如下部分代码所示。

介绍了大致的加载和显示的界面代码，我们来看看如何增加Geometry图标，前面介绍到可以结合阿里矢量图标库使用的，那么如何下载那些线上的图标库为我们所用呢。

我们打开官网，如下界面所示。

首页会列出一些新图标，我们也可以根据关键字查询指定的图表来定位处理。

按住CTRL+ShIFT+I键进入开发者模式，查看元素的定义，找到对应的图标位置，打开代码获得Path的内容，如下操作所示。

注意在元素代码中切换位置，同时在UI上获得具体的图标选中提示，通过提示确定Path的位置即可。

然后把这段Path的值复制到我们的Geometries\Custom.xaml文件中，如下所示。

上面的图表Path只有一个，有时候阿里矢量图标库使用Geometry图标有多个Path的组合，我们如果也要采用，那么定义稍微调整一下。

通过GeometryGroup来定义父级，然后添加多个PathGeometry集合即可，如下代码所示。

通过这样的添加，我们就可以运行UI，看到加载的Geometry图标集合了。

以上通过介绍lepoco/wpfui项目的图标库、Font-Awesome-WPF图标库以及阿里矢量图标库的几种方式，实现了不同场景下的图表显示和处理。