在SqlSugar開發框架的WPF應用中，有時候需要在按鈕或者其他界面元素上使用一些圖標，框架中我們可以使用 lepoco/wpfui 項目的圖標庫，也可以使用Font-Awesome-WPF 圖標庫，另外如果喜歡阿里矢量圖標庫的，也可以通過使用Geometry圖標來實現圖標的展示，本文介紹在WPF應用中，結合阿里矢量圖標庫使用Geometry圖標。
PS：給大家推薦一個C#開發可以用到的界面組件——DevExpress WPF，它擁有120+個控件和庫，將幫助您交付滿足甚至超出企業需求的高性能業務應用程序。通過DevExpress WPF能創建有著強大互動功能的XAML基礎應用程序，這些應用程序專注于當代客戶的需求和構建未來新一代支持觸摸的解決方案。
DevExpress技術交流群10：532598169 歡迎一起進群討論
回顧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="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>
導入文件后，這些幾何圖形就可以在靜態資源中使用了，類似上面的代碼，其中的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>
最終我們可以獲得下面的界面效果。
介紹了大致的加載和顯示的界面代碼，我們來看看如何增加 Geometry圖標，前面介紹到可以結合阿里矢量圖標庫使用的，那么如何下載那些線上的圖標庫為我們所用呢。
阿里矢量圖標庫的地址：
我們打開官網，如下界面所示。
半島外圍網上直營會列出一些新圖標，我們也可以根據關鍵字查詢指定的圖表來定位處理。
按住CTRL+ShIFT+I 鍵進入開發者模式，查看元素的定義，找到對應的圖標位置，打開代碼獲得Path的內容，如下操作所示。
注意在元素代碼中切換位置，同時在UI上獲得具體的圖標選中提示，通過提示確定Path的位置即可。
然后把這段Path的值復制到我們的 Geometries\Custom.xaml 文件中，如下所示。
上面的圖表Path只有一個，有時候 阿里矢量圖標庫使用Geometry圖標有多個Path的組合，我們如果也要采用，那么定義稍微調整一下。
通過GeometryGroup來定義父級，然后添加多個PathGeometry集合即可，如下代碼所示。
通過這樣的添加，我們就可以運行UI，看到加載的Geometry圖標集合了。
以上通過介紹lepoco/wpfui 項目的圖標庫、Font-Awesome-WPF 圖標庫以及阿里矢量圖標庫的幾種方式，實現了不同場景下的圖表顯示和處理。
本文轉載自：
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
11次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線