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

在SqlSugar开发框架的WPF应用中有时候需要在按钮或者其他界面元素上使用一些图标框架中我们可以使用 lepoco/wpfui 项目的图标库也可以使用Font-Awesome-WPF 图标库另外如果喜欢阿里矢量图标库的也可以通过使用Geometry图标来实现图标的展示本文介绍在WPF应用中结合阿里矢量图标库使用Geometry图标。PS给大家推荐一个C#开发可以用到的界面组件——DevExpress WPF它拥有120个控件和库将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。DevExpress新旧版本帮助文档下载欢迎进QQ qun获取169725316回顾lepoco/wpfui项目的图标库也可使用Font-Awesome-WPF图标库1. lepoco/wpfui项目的图标库列表选择界面lepoco/wpfui 项目的图标库来源于Fluent System Icons项目地址是GitHub - microsoft/fluentui-system-icons: Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.这些图标映射到枚举对象 SymbolRegular 和 SymbolFilled一个是常规的一个是填充的图标。我们封装的选择图标界面如下所示界面展示的图标代码如下所示。ui:SymbolIcon FontSize48 ForegroundCornflowerBlue Symbol{Binding Text} Tag{Binding} ToolTip{Binding Text} /2. 使用Font-Awesome-WPF 图标组件在WPF中使用Font-Awesome-WPF 图标组件的很多它的项目地址Font-Awesome-WPF/README-WPF.md at master · charri/Font-Awesome-WPF · GitHub。我们也可以用类似的方式来整合这个图标组件到项目中进行使用。图标选择界面运行效果如下所示由于图标不是很多所以一次性加载了没有分页。界面展示的图标代码如下所示。fa:ImageAwesome Width32 HorizontalAlignmentCenter VerticalAlignmentCenter ForegroundCornflowerBlue Icon{Binding Text} Tag{Binding} /系统运行动态从后端获取菜单及图标展示如下所示。结合阿里矢量图标库使用Geometry图标前面介绍了两种图标的应用方案我们再来介绍一下Geometry图标的场景。由于我们框架整合了HandyControl的一些组件的展示HandyControl控件的官方地址GitHub - HandyOrg/HandyControl: Contains some simple and commonly used WPF controls中文文档地址欢迎使用HandyControl | HandyOrg通过它的控件扩展属性我们可以很容易绑定按钮图标的展示。部分按钮的定义如下所示。Button Margin5 hc:IconElement.Geometry{StaticResource AddGeometry} Command{Binding EditCommand} Content新增 Style{StaticResource ButtonInfo} / Button Margin5 hc:IconElement.Geometry{StaticResource t_import} Command{Binding ImportExcelCommand} Content导入Excel Style{StaticResource ButtonWarning} /通过 hc:IconElement.Geometry 的绑定我们就可以自定义图标的展示第一个AddGeometry是HandyControl的内置Geometry而第二个t_import是我们用户扩展自定义导入的Geometry几何图形。我们在项目定义一个 Geometries\Custom.xaml 文件用来放置用户自定义的图标几何图形。其中文件就是一个XML的文件定义。该文件里面的集合图形会在WPF应用的App中进行导入如下代码所示。Application x:ClassWHC.SugarProject.WpfUI.App xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml xmlns:helpersclr-namespace:WHC.SugarProject.WpfUI.Helpers xmlns:uihttp://schemas.lepo.co/wpfui/2022/xaml DispatcherUnhandledExceptionOnDispatcherUnhandledException ExitOnExit StartupOnStartup Application.Resources ResourceDictionary ResourceDictionary.MergedDictionaries ui:ThemesDictionary ThemeDark / ui:ControlsDictionary / !-- Geometries -- ResourceDictionary Source/Styles/Geometries/Custom.xaml / !-- HandyControl -- ResourceDictionary Sourcepack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml / ResourceDictionary Sourcepack://application:,,,/HandyControl;component/Themes/Theme.xaml / /ResourceDictionary.MergedDictionaries /ResourceDictionary /Application.Resources /Application导入文件后这些几何图形就可以在静态资源中使用了类似上面的代码其中的t_import就是我们声明的图形key。Button Margin5 hc:IconElement.Geometry{StaticResource t_import} Command{Binding ImportExcelCommand} Content导入Excel Style{StaticResource ButtonWarning} /为了更加直观的展示我们所有的自定义几何图标集合我们可以通过也列表页面进行加载进行展示。动态加载所有自定义的图标集合如下逻辑代码所示。var appResourceDictionary ((App)Application.Current).Resources; var mergedDictionaries appResourceDictionary.MergedDictionaries; // 指定的 source var source /Styles/Geometries/Custom.xaml; var sourceUri new Uri(source, UriKind.Relative); var specifiedDictionary mergedDictionaries.FirstOrDefault(dictionary dictionary.Source sourceUri); if (specifiedDictionary ! null) { var sortedList ToSortedList(specifiedDictionary.Keys); foreach (string key in sortedList.Keys) { if (specifiedDictionary[key] is Geometry geometry) { this.AllItems.Add(new CListItemGeometry(key, geometry)); } } }然后我们把它的数据整合到视图模型ViewModel中并创建一个几何图形的显示列表界面用来展示所有的图标显示如下部分代码所示。ItemsControl x:NamechkIcons Grid.Row1 Height580 VerticalAlignmentTop HorizontalContentAlignmentLeft VerticalContentAlignmentTop ItemsSource{Binding ViewModel.IconItems} ScrollViewer.CanContentScrollTrue VirtualizingPanel.CacheLengthUnitItem VirtualizingStackPanel.IsVirtualizingtrue VirtualizingStackPanel.VirtualizationModeRecycling ItemsControl.ItemsPanel ItemsPanelTemplate WrapPanel VerticalAlignmentTop hc:ScrollViewer.IsInertiaEnabledTrue hc:ScrollViewerAttach.OrientationVertical OrientationHorizontal / /ItemsPanelTemplate /ItemsControl.ItemsPanel ItemsControl.ItemTemplate DataTemplate Button Width120 Height120 Margin5 HorizontalAlignmentStretch VerticalAlignmentStretch ClickButton_Click Tag{Binding} ToolTip{Binding Text, ModeOneTime} ToolTipService.InitialShowDelay240 Button.Content StackPanel Path Width64 Height64 Data{Binding Value} FillGreen StretchUniform / TextBlock Margin0,10,0,10 FontSize14 FontWeightNormal ForegroundBlue Text{Binding Text} TextAlignmentCenter / /StackPanel /Button.Content /Button /DataTemplate /ItemsControl.ItemTemplate ItemsControl.Template ControlTemplate TargetTypeItemsControl ScrollViewer WidthAuto CanContentScrollTrue VerticalScrollBarVisibilityVisible ItemsPresenter / /ScrollViewer /ControlTemplate /ItemsControl.Template /ItemsControl最终我们可以获得下面的界面效果。介绍了大致的加载和显示的界面代码我们来看看如何增加 Geometry图标前面介绍到可以结合阿里矢量图标库使用的那么如何下载那些线上的图标库为我们所用呢。阿里矢量图标库的地址iconfont-阿里巴巴矢量图标库我们打开官网如下界面所示。首页会列出一些新图标我们也可以根据关键字查询指定的图表来定位处理。按住CTRLShIFTI 键进入开发者模式查看元素的定义找到对应的图标位置打开代码获得Path的内容如下操作所示。注意在元素代码中切换位置同时在UI上获得具体的图标选中提示通过提示确定Path的位置即可。然后把这段Path的值复制到我们的 Geometries\Custom.xaml 文件中如下所示。上面的图表Path只有一个有时候 阿里矢量图标库使用Geometry图标有多个Path的组合我们如果也要采用那么定义稍微调整一下。通过GeometryGroup来定义父级然后添加多个PathGeometry集合即可如下代码所示。通过这样的添加我们就可以运行UI看到加载的Geometry图标集合了。以上通过介绍lepoco/wpfui 项目的图标库、Font-Awesome-WPF 图标库以及阿里矢量图标库的几种方式实现了不同场景下的图表显示和处理。本文转载自博客园 - 伍华聪