基于WPF實現(xiàn)路徑圖標(biāo)控件

更新時間：2023年07月28日 09:09:17 作者：WPF開發(fā)者

這篇文章主要介紹了如何利用WPF實現(xiàn)路徑圖標(biāo)控件，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)或工作有一定幫助，需要的小伙伴可以參考一下

WPF 實現(xiàn)路徑圖標(biāo)控件

框架使用.NET4；

Visual Studio 2022;

實現(xiàn)方法

1）新增 PathIcon.cs 代碼如下:

定義PathIcon類，它繼承自Control類,新增兩個依賴屬性

Kind屬性是一個枚舉類型的依賴屬性，用于指定圖標(biāo)的種類。
Data屬性是一個Geometry類型的依賴屬性，用于存儲圖標(biāo)的路徑數(shù)據(jù)。

OnKindChanged當(dāng)Kind屬性發(fā)生變化時會被調(diào)用。它首先獲取新值，并根據(jù)新值構(gòu)建資源名稱。然后，通過調(diào)用FindResource方法查找對應(yīng)的$"WD.{kind}Geometry"資源，并將其賦值給Data屬性。

using?System.Windows;
using?System.Windows.Controls;
using?System.Windows.Media;
namespace?WPFDevelopers.Controls
{
????public?class?PathIcon?:?Control
????{
????????public?static?readonly?DependencyProperty?KindProperty?=
????????????DependencyProperty.Register(nameof(Kind),?typeof(string),?typeof(PathIcon),
????????????????new?PropertyMetadata(string.Empty,?OnKindChanged));
????????public?static?readonly?DependencyProperty?DataProperty?=
????????????DependencyProperty.Register(nameof(Data),?typeof(Geometry),?typeof(PathIcon));
????????public?PackIconKind?Kind
????????{
????????????get?{?return?(PackIconKind)GetValue(KindProperty);?}
????????????set?{?SetValue(KindProperty,?value);?}
????????}
????????public?Geometry?Data
????????{
????????????get?{?return?(Geometry)GetValue(DataProperty);?}
????????????set?{?SetValue(DataProperty,?value);?}
????????}
????????private?static?void?OnKindChanged(DependencyObject?d,?DependencyPropertyChangedEventArgs?e)
????????{
????????????var?pathIcon?=?(PathIcon)d;
????????????var?kind?=?(string)e.NewValue;
????????????if?(!string.IsNullOrWhiteSpace(kind))
????????????{
????????????????kind?=?$"WD.{kind}Geometry";
????????????????pathIcon.Data?=?(Geometry)pathIcon.FindResource(kind);
????????????}
????????????else
????????????????pathIcon.Data?=?null;
????????}
????????static?PathIcon()
????????{
????????????DefaultStyleKeyProperty.OverrideMetadata(typeof(PathIcon),?new?FrameworkPropertyMetadata(typeof(PathIcon)));
????????}
????}
}

2）新增 PathIcon.xaml 代碼如下:

使用Viewbox控件包裹Path控件，以實現(xiàn)路徑圖標(biāo)的縮放效果。

<ResourceDictionary
????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
????xmlns:controls="clr-namespace:WPFDevelopers.Controls">
????<ResourceDictionary.MergedDictionaries>
????????<ResourceDictionary?Source="Basic/ControlBasic.xaml"?/>
????</ResourceDictionary.MergedDictionaries>
????<Style
????????x:Key="WD.PathIcon"
????????BasedOn="{StaticResource?WD.ControlBasicStyle}"
????????TargetType="{x:Type?controls:PathIcon}">
????????<Setter?Property="Padding"?Value="0"?/>
????????<Setter?Property="FocusVisualStyle"?Value="{x:Null}"?/>
????????<Setter?Property="Focusable"?Value="False"?/>
????????<Setter?Property="Height"?Value="16"?/>
????????<Setter?Property="VerticalAlignment"?Value="Center"?/>
????????<Setter?Property="VerticalContentAlignment"?Value="Stretch"?/>
????????<Setter?Property="Foreground">
????????????<Setter.Value>
????????????????<Binding?Path="Foreground"?RelativeSource="{RelativeSource?Mode=FindAncestor,?AncestorType={x:Type?Control}}"?/>
????????????</Setter.Value>
????????</Setter>
????????<Setter?Property="Width"?Value="16"?/>
????????<Setter?Property="Template">
????????????<Setter.Value>
????????????????<ControlTemplate?TargetType="{x:Type?controls:PathIcon}">
????????????????????<Viewbox
????????????????????????Margin="{TemplateBinding?Padding}"
????????????????????????HorizontalAlignment="{TemplateBinding?HorizontalContentAlignment}"
????????????????????????VerticalAlignment="{TemplateBinding?VerticalContentAlignment}"
????????????????????????UseLayoutRounding="True">
????????????????????????<Path
????????????????????????????x:Name="PART_Path"
????????????????????????????Data="{TemplateBinding?Data}"
????????????????????????????Fill="{TemplateBinding?Foreground}"
????????????????????????????SnapsToDevicePixels="{TemplateBinding?SnapsToDevicePixels}"
????????????????????????????Stretch="Uniform"
????????????????????????????UseLayoutRounding="False"?/>
????????????????????</Viewbox>
????????????????</ControlTemplate>
????????????</Setter.Value>
????????</Setter>
????</Style>
????<Style
????????x:Key="WD.MiniPathIcon"
????????BasedOn="{StaticResource?WD.PathIcon}"
????????TargetType="{x:Type?controls:PathIcon}">
????????<Setter?Property="Height"?Value="10"?/>
????????<Setter?Property="Width"?Value="7"?/>
????</Style>
????<Style?BasedOn="{StaticResource?WD.PathIcon}"?TargetType="{x:Type?controls:PathIcon}"?/>
</ResourceDictionary>

3）新增示例 PathIconExample.xaml 代碼如下:

<UniformGrid
????????????HorizontalAlignment="Center"
????????????VerticalAlignment="Center"
????????????Columns="6"
????????????Rows="2">
????????????<Button
????????????????Margin="4"
????????????????wd:ElementHelper.IsRound="True"
????????????????Style="{StaticResource?WD.PrimaryButton}">
????????????????<wd:PathIcon?Data="M682?256h256v256l-98-98-268?268-170-170-256?256-60-60?316-316?170?170?208-208z"?/>
????????????</Button>
????????????<Button
????????????????Margin="4"
????????????????wd:ElementHelper.IsRound="True"
????????????????Style="{StaticResource?WD.DangerPrimaryButton}">
????????????????<wd:PathIcon?Kind="Arrow"?/>
????????????</Button>
????????????<Button
????????????????Margin="4"
????????????????wd:ElementHelper.IsRound="True"
????????????????Style="{StaticResource?WD.DangerDefaultButton}">
????????????????<wd:PathIcon?Kind="SortArrow"?/>
????????????</Button>
????????????<Button
????????????????Margin="4"
????????????????wd:ElementHelper.IsRound="True"
????????????????Style="{StaticResource?WD.WarningDefaultButton}">
????????????????<wd:PathIcon?Kind="SmileyOutline"?/>
????????????</Button>
????????????<Button
????????????????Margin="4"
????????????????wd:ElementHelper.IsRound="True"
????????????????Style="{StaticResource?WD.DefaultButton}">
????????????????<wd:PathIcon?Kind="Replace"?/>
????????????</Button>
????????????<Button
????????????????Margin="4"
????????????????wd:Badge.HorizontalOffset="17"
????????????????wd:Badge.IsShow="True"
????????????????wd:Badge.VerticalOffset="8"
????????????????wd:ElementHelper.IsRound="True"
????????????????Style="{StaticResource?WD.SuccessDefaultButton}">
????????????????<wd:PathIcon?Kind="Home"?/>
????????????</Button>
????????????<Button
????????????????Margin="4"
????????????????wd:ElementHelper.IsRound="True"
????????????????Style="{StaticResource?WD.NormalButton}">
????????????????<wd:PathIcon?PathData="M682?256h256v256l-98-98-268?268-170-170-256?256-60-60?316-316?170?170?208-208z"?/>
????????????</Button>
????????????<Button?Margin="4"?Style="{StaticResource?WD.SuccessPrimaryButton}">
????????????????<wd:PathIcon?Kind="Arrow"?/>
????????????</Button>
????????????<Button?Margin="4"?Style="{StaticResource?WD.DangerPrimaryButton}">
????????????????<wd:PathIcon?Kind="SortArrow"?/>
????????????</Button>
????????????<Button
????????????????Margin="4"
????????????????wd:Badge.IsShow="True"
????????????????Style="{StaticResource?WD.WarningPrimaryButton}">
????????????????<wd:PathIcon
????????????????????Width="20"
????????????????????Height="20"
????????????????????Kind="SmileyOutline"?/>
????????????</Button>
????????????<Button?Margin="4"?Style="{StaticResource?WD.PrimaryButton}">
????????????????<wd:PathIcon?Kind="Replace"?/>
????????????</Button>
????????????<Button?Margin="4"?Style="{StaticResource?WD.SuccessPrimaryButton}">
????????????????<StackPanel?Orientation="Horizontal">
????????????????????<wd:PathIcon?Kind="Home"?/>
????????????????????<TextBlock?Margin="4,0"?Text="Home"?/>
????????????????</StackPanel>
????????????</Button>
????????</UniformGrid>

效果圖