WPF应用实战开发指南 - 如何结合阿里矢量图标库使用Geometry图标？-控件新闻-慧都网

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

转帖|使用教程|编辑：龚雪|2024-04-26 10:30:29.050|阅读 33 次

概述：本文主要介绍如何在WPF应用中结合阿里矢量图标库使用Geometry图标，希望对大家有所启示~

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

回顾lepoco/wpfui项目的图标库，也可使用Font-Awesome-WPF图标库

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

lepoco/wpfui 项目的图标库来源于Fluent System Icons，项目地址是：

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

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

<ui:SymbolIcon
FontSize="48"
Foreground="CornflowerBlue"
Symbol="{Binding Text}"
Tag="{Binding}"
ToolTip="{Binding Text}" />

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

在WPF中使用Font-Awesome-WPF 图标组件的很多，它的项目地址：。

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

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

<fa:ImageAwesome
Width="32"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="CornflowerBlue"
Icon="{Binding Text}"
Tag="{Binding}" />

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

结合阿里矢量图标库使用Geometry图标

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

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

官方地址：
中文文档地址：

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

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

<Button
Margin="5"
hc:IconElement.Geometry="{StaticResource AddGeometry}"
Command="{Binding EditCommand}"
Content="新增"
Style="{StaticResource ButtonInfo}" />
<Button
Margin="5"
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:Class="WHC.SugarProject.WpfUI.App"
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
xmlns:helpers="clr-namespace:WHC.SugarProject.WpfUI.Helpers"
xmlns:ui="//schemas.lepo.co/wpfui/2022/xaml"
DispatcherUnhandledException="OnDispatcherUnhandledException"
Exit="OnExit"
Startup="OnStartup">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ui:ThemesDictionary Theme="Dark" />
<ui:ControlsDictionary />
<!-- Geometries -->
<ResourceDictionary Source="/Styles/Geometries/Custom.xaml" />

<!-- HandyControl -->
<ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml" />
<ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

导入文件后，这些几何图形就可以在静态资源中使用了，类似上面的代码，其中的t_import就是我们声明的图形key。

<Button
Margin="5"
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 CListItem<Geometry>(key, geometry));
}
}
}

然后我们把它的数据整合到视图模型ViewModel中，并创建一个几何图形的显示列表界面，用来展示所有的图标显示，如下部分代码所示。

<ItemsControl
x:Name="chkIcons"
Grid.Row="1"
Height="580"
VerticalAlignment="Top"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Top"
ItemsSource="{Binding ViewModel.IconItems}"
ScrollViewer.CanContentScroll="True"
VirtualizingPanel.CacheLengthUnit="Item"
VirtualizingStackPanel.IsVirtualizing="true"
VirtualizingStackPanel.VirtualizationMode="Recycling">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel
VerticalAlignment="Top"
hc:ScrollViewer.IsInertiaEnabled="True"
hc:ScrollViewerAttach.Orientation="Vertical"
Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button
Width="120"
Height="120"
Margin="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Click="Button_Click"
Tag="{Binding}"
ToolTip="{Binding Text, Mode=OneTime}"
ToolTipService.InitialShowDelay="240">
<Button.Content>
<StackPanel>
<Path
Width="64"
Height="64"
Data="{Binding Value}"
Fill="Green"
Stretch="Uniform" />
<TextBlock
Margin="0,10,0,10"
FontSize="14"
FontWeight="Normal"
Foreground="Blue"
Text="{Binding Text}"
TextAlignment="Center" />
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<ScrollViewer
Width="Auto"
CanContentScroll="True"
VerticalScrollBarVisibility="Visible">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>

最终我们可以获得下面的界面效果。