在SqlSugar開(kāi)發(fā)框架的WPF應(yīng)用中，有時(shí)候需要在按鈕或者其他界面元素上使用一些圖標(biāo)，框架中我們可以使用 lepoco/wpfui 項(xiàng)目的圖標(biāo)庫(kù)，也可以使用Font-Awesome-WPF 圖標(biāo)庫(kù)，另外如果喜歡阿里矢量圖標(biāo)庫(kù)的，也可以通過(guò)使用Geometry圖標(biāo)來(lái)實(shí)現(xiàn)圖標(biāo)的展示，本文介紹在WPF應(yīng)用中，結(jié)合阿里矢量圖標(biāo)庫(kù)使用Geometry圖標(biāo)。

PS：給大家推薦一個(gè)C#開(kāi)發(fā)可以用到的界面組件——DevExpress WPF，它擁有120+個(gè)控件和庫(kù)，將幫助您交付滿(mǎn)足甚至超出企業(yè)需求的高性能業(yè)務(wù)應(yīng)用程序。通過(guò)DevExpress WPF能創(chuàng)建有著強(qiáng)大互動(dòng)功能的XAML基礎(chǔ)應(yīng)用程序，這些應(yīng)用程序?qū)Ｗ⒂诋?dāng)代客戶(hù)的需求和構(gòu)建未來(lái)新一代支持觸摸的解決方案。

DevExpress技術(shù)交流群10：532598169      歡迎一起進(jìn)群討論

回顧lepoco/wpfui項(xiàng)目的圖標(biāo)庫(kù)，也可使用Font-Awesome-WPF圖標(biāo)庫(kù)

1. lepoco/wpfui項(xiàng)目的圖標(biāo)庫(kù)，列表選擇界面

lepoco/wpfui 項(xiàng)目的圖標(biāo)庫(kù)來(lái)源于Fluent System Icons，項(xiàng)目地址是：

這些圖標(biāo)映射到枚舉對(duì)象 SymbolRegular 和 SymbolFilled，一個(gè)是常規(guī)的，一個(gè)是填充的圖標(biāo)。我們封裝的選擇圖標(biāo)界面如下所示：

界面展示的圖標(biāo)代碼如下所示。

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

2. 使用Font-Awesome-WPF 圖標(biāo)組件

在WPF中使用Font-Awesome-WPF 圖標(biāo)組件的很多，它的項(xiàng)目地址：。

我們也可以用類(lèi)似的方式來(lái)整合這個(gè)圖標(biāo)組件到項(xiàng)目中進(jìn)行使用。圖標(biāo)選擇界面運(yùn)行效果如下所示，由于圖標(biāo)不是很多，所以一次性加載了（沒(méi)有分頁(yè)）。

界面展示的圖標(biāo)，代碼如下所示。

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

系統(tǒng)運(yùn)行，動(dòng)態(tài)從后端獲取菜單及圖標(biāo)展示如下所示。

結(jié)合阿里矢量圖標(biāo)庫(kù)使用Geometry圖標(biāo)

前面介紹了兩種圖標(biāo)的應(yīng)用方案，我們?cè)賮?lái)介紹一下Geometry圖標(biāo)的場(chǎng)景。

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

• 官方地址：
• 中文文檔地址：

通過(guò)它的控件擴(kuò)展屬性，我們可以很容易綁定按鈕圖標(biāo)的展示。

部分按鈕的定義如下所示。

<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="導(dǎo)入Excel"
Style="{StaticResource ButtonWarning}" />

通過(guò) hc:IconElement.Geometry 的綁定，我們就可以自定義圖標(biāo)的展示，第一個(gè)AddGeometry 是HandyControl的內(nèi)置Geometry，而第二個(gè)t_import 是我們用戶(hù)擴(kuò)展自定義導(dǎo)入的Geometry幾何圖形。

 我們?cè)陧?xiàng)目定義一個(gè) Geometries\Custom.xaml  文件，用來(lái)放置用戶(hù)自定義的圖標(biāo)幾何圖形。

其中文件就是一個(gè)XML的文件定義。

該文件里面的集合圖形，會(huì)在WPF應(yīng)用的App中進(jìn)行導(dǎo)入，如下代碼所示。

<Application
x:Class="WHC.SugarProject.WpfUI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:helpers="clr-namespace:WHC.SugarProject.WpfUI.Helpers"
xmlns:ui="http://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>

導(dǎo)入文件后，這些幾何圖形就可以在靜態(tài)資源中使用了，類(lèi)似上面的代碼，其中的t_import就是我們聲明的圖形key。

<Button
Margin="5"
hc:IconElement.Geometry="{StaticResource t_import}"
Command="{Binding ImportExcelCommand}"
Content="導(dǎo)入Excel"
Style="{StaticResource ButtonWarning}" />

為了更加直觀的展示我們所有的自定義幾何圖標(biāo)集合，我們可以通過(guò)也列表頁(yè)面進(jìn)行加載進(jìn)行展示。動(dòng)態(tài)加載所有自定義的圖標(biāo)集合，如下邏輯代碼所示。

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));
}
}
}

然后我們把它的數(shù)據(jù)整合到視圖模型ViewModel中，并創(chuàng)建一個(gè)幾何圖形的顯示列表界面，用來(lái)展示所有的圖標(biāo)顯示，如下部分代碼所示。

<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>

最終我們可以獲得下面的界面效果。

 介紹了大致的加載和顯示的界面代碼，我們來(lái)看看如何增加 Geometry圖標(biāo)，前面介紹到可以結(jié)合阿里矢量圖標(biāo)庫(kù)使用的，那么如何下載那些線上的圖標(biāo)庫(kù)為我們所用呢。

阿里矢量圖標(biāo)庫(kù)的地址：

我們打開(kāi)官網(wǎng)，如下界面所示。

金喜正規(guī)買(mǎi)球會(huì)列出一些新圖標(biāo)，我們也可以根據(jù)關(guān)鍵字查詢(xún)指定的圖表來(lái)定位處理。

按住CTRL+ShIFT+I 鍵進(jìn)入開(kāi)發(fā)者模式，查看元素的定義，找到對(duì)應(yīng)的圖標(biāo)位置，打開(kāi)代碼獲得Path的內(nèi)容，如下操作所示。

注意在元素代碼中切換位置，同時(shí)在UI上獲得具體的圖標(biāo)選中提示，通過(guò)提示確定Path的位置即可。

然后把這段Path的值復(fù)制到我們的 Geometries\Custom.xaml  文件中，如下所示。

上面的圖表Path只有一個(gè)，有時(shí)候 阿里矢量圖標(biāo)庫(kù)使用Geometry圖標(biāo)有多個(gè)Path的組合，我們?nèi)绻惨捎茫敲炊x稍微調(diào)整一下。

通過(guò)GeometryGroup來(lái)定義父級(jí)，然后添加多個(gè)PathGeometry集合即可，如下代碼所示。

通過(guò)這樣的添加，我們就可以運(yùn)行UI，看到加載的Geometry圖標(biāo)集合了。

以上通過(guò)介紹lepoco/wpfui 項(xiàng)目的圖標(biāo)庫(kù)、Font-Awesome-WPF 圖標(biāo)庫(kù)以及阿里矢量圖標(biāo)庫(kù)的幾種方式，實(shí)現(xiàn)了不同場(chǎng)景下的圖表顯示和處理。

本文轉(zhuǎn)載自：