在 Visual Studio 中,至少可以創建三種不同類型的類庫: 類庫(.NET Framework) 類庫(.NET 標準) 類庫 (.NET Core) 雖然第一種是我們多年來一直在使用的,但一直感到困惑的一個主要問題是何時使用 .NET Standard 和 .NET Core 類庫類型。 ...
本文將告訴大家如何在 UWP 或 WinUI3 或 UNO 里,如何製作一個路徑按鈕。路徑按鈕就是使用幾何路徑輪廓表示內容的按鈕,常見於各種圖標按鈕,或 svg 系貼圖矢量圖按鈕
在網上有非常多矢量圖庫,其中免費的圖庫也非常多,比如 https://www.iconfont.cn/ 等等。在咱的應用程式裡面,可以使用這些矢量圖作為按鈕的圖標,從而更好的進行表意,讓界面有更好的設計。使用矢量圖還自然帶有縮放時依然清晰的功能
最為簡單的製作方式就是在按鈕裡面存放一個 Path 作為內容,比如做一個簡單的路徑矢量圖標按鈕
<Button HorizontalAlignment="Center" VerticalAlignment="Center">
<Path Stroke="Black" StrokeThickness="1" Data="M5,5L15,15L5,25"></Path>
</Button>
可以看到簡單的幾行代碼就可以實現一個圖標按鈕的功能了。不過哩作為有追求的開發者,可不能像在樹上的小貓一樣,咱還需要多加一些需求。比如我希望滑鼠移動到按鈕上的時候,按鈕可以變色,比如說我感覺上面的重覆代碼多了,即我有多個圖標按鈕都有大量相似的代碼,能不能做一個樣式實現這些功能?當然是可以的啦
先在一個資源裡面定義按鈕的樣式,資源可以放在自己的應用業務代碼 xaml 文件裡面,也可以單獨做一個資源字典。本文為了簡單,就放在 MainPage.xaml 裡面了。如果大家想要放在資源字典裡面,別忘了引用資源字典哦
<Style x:Key="Style.Button.PathButtonStyle" TargetType="Button">
...
</Style>
如上面代碼,就定義了一個名為 Style.Button.PathButtonStyle
的代碼樣式。這樣的樣式命名方法是我習慣用的,因為如此可以方便一級級點下去,特別在有 ReSharper 的幫助下,會更加好用,在樣式特別多的時候,這樣寫能夠和 ReSharper 更好的進行配合
這樣的樣式,可以應用到按鈕代碼上,如下麵代碼
<Button Style="{StaticResource Style.Button.PathButtonStyle}"
.../>
此樣式都是給路徑圖標按鈕製作,可以製作非常明確的按鈕樣式實現。對於 xaml 的界面樣式實現的編碼思路有些會和 C# 不一樣,即不追求抽象性,有很多界面邏輯都是越具體越好,且允許有一些代碼是重覆的。核心追求就是讓界面代碼在看的時候可以更好的和界面效果聯繫起來,按照界面組織的方式走而不是按照邏輯的組織方式走。且有些界面效果是追求界面像,而不追求邏輯合理,即只要界面像就好更重要,當然,能兩者都兼顧那是最好的。放心,本文提供的方法還是兩者都兼顧的。那是否只有本文介紹的附加屬性的方法才是最佳實踐?當然不是啦,只不過這個方法我用的順手而已
<Style x:Key="Style.Button.PathButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<Path x:Name="ButtonContentPath" StrokeThickness="1" Stroke="Black" Data="M5,5L15,15L5,25"></Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
如上面代碼,即定義了一個圖標按鈕的樣式,也寫明瞭圖標按鈕的內容,應用此樣式的按鈕即可顯示出也如上圖的效果
樣式自然是追求一定的通用性的,上面代碼只能顯示固定的路徑圖標,自然不符合咱的需求。能否讓 ButtonContentPath 的 Data 參與業務定製?自然是可以的,接下來咱使用簡單的附加屬性來解決此問題
通過附加屬性的方式,既可以用在 UWP 等框架上,同樣在 WPF 裡面也是可以使用的,畢竟都是相同系列的框架
在後臺 cs 代碼裡面定義一個名為 ButtonHelper 的類型,將在這個類型裡面定義附加屬性,實現代碼如下
public class ButtonHelper
{
public static readonly DependencyProperty ButtonPathProperty = DependencyProperty.RegisterAttached(
"ButtonPath", typeof(string), typeof(ButtonHelper), new PropertyMetadata(default(string)));
public static void SetButtonPath(DependencyObject element, string value)
{
element.SetValue(ButtonPathProperty, value);
}
public static string GetButtonPath(DependencyObject element)
{
return (string)element.GetValue(ButtonPathProperty);
}
... // 忽略其他代碼
}
如此即可在樣式裡面進行綁定 Data 的內容,核心代碼如下
<Path x:Name="ButtonContentPath" StrokeThickness="2" Stroke="#FF666666" Data="{Binding RelativeSource={RelativeSource TemplatedParent},Path=(local:ButtonHelper.ButtonPath)}"></Path>
如果大家看了本文的內容不知道代碼寫在哪,可以到本文末尾獲取所有代碼的下載方法,拉取我的代碼跑跑看
通過以上代碼,可以看到使用 (local:ButtonHelper.ButtonPath)
將 Data 綁定到 ButtonHelper 的 ButtonPath 附加屬性上,屬性源是通過 RelativeSource={RelativeSource TemplatedParent}
指定的,在這裡就是按鈕本身。以上代碼的 local:
的 local 表示的 xaml 命名空間,這是因為我將 ButtonHelper 放在和 MainPage 相同的命名空間上,於是就剛好就是 local 的值,如果大家放在其他命名空間,還請在 VisualStudio 的幫助下進行命名空間引用 。以上代碼的細節在於必須通過 RelativeSource
和 TemplatedParent 指定,且使用 Binding 進行綁定,不能通過 TemplateBinding 和 Source 指定綁定
應用以上樣式的按鈕,需要在按鈕上給 ButtonHelper 的 ButtonPath 附加屬性進行賦值,如以下代碼
<Button Style="{StaticResource Style.Button.PathButtonStyle}"
local:ButtonHelper.ButtonPath="M5,5L15,15L5,25"
.../>
運行代碼也可以看到大概如上圖的效果,也就是本文以上提供的三個方式都是實現相同的一個按鈕效果。可以看到第一個代碼最簡單,最後一個代碼最有通用性,可以將更多的圖標按鈕使用樣式減少重覆的代碼
那接下來給樣式提出更多的要求,如滑鼠移動到按鈕上方時,修改按鈕的圖標顏色
對於 Path 元素來說,可以通過 Stroke 和 StrokeThickness 分別修改輪廓顏色畫刷和輪廓線條粗細,可以使用 Fill 屬性修改填充畫刷。在滑鼠移動到按鈕上方,即 PointerOver 時,通過設置輪廓畫刷或填充畫刷即可修改按鈕的圖標顏色
期望在滑鼠移動到按鈕上方,即 PointerOver 時,設置輪廓畫刷或填充畫刷,需要配合 VisualStateManager 提供的多個視覺狀態,在每個視覺狀態下給屬性賦值或製作動畫
最常用的 VisualStateManager 的 VisualStateGroup 是 CommonStates 組,基礎代碼組成如下
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<!-- 正常狀態 -->
</VisualState>
<VisualState x:Name="PointerOver">
<!-- 滑鼠移動到控制項上,即 WPF 的 Hover 效果 -->
</VisualState>
<VisualState x:Name="Pressed">
<!-- 滑鼠按下的狀態,或叫點擊的狀態 -->
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
這裡有一些細節事項:
- 由於 VisualStateManager 必須放在容器裡面,因此這裡必須需要有一個容器控制項住 VisualStateManager 的代碼。簡單的容器就是如 Grid 等控制項,想省一點資源的話,可以用 Border 代替 Grid 做容器
- 一般情況下,第一個狀態是 Normal 狀態,裡面啥都不用做,啥都不用做可以清空其他的 VisualState 的狀態。正常狀態需要放在第一個
開始編寫正式的代碼之前,先複習一下 VisualStateManager 的用法,如下麵的代碼,既可以在 VisualState 裡面使用 Setter 修改屬性。也可以使用 Storyboard 做動畫修改屬性。做動畫的方式可以比較柔和,有漸變的效果
<Page.Resources>
<Style x:Key="Style.Button.FooButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<!-- 由於 VisualStateManager 必須放在容器裡面,因此這裡必須需要有一個容器 想省一點的話,可以用 Border 代替 Grid 做容器-->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<!--啥都不用做,清空狀態即可-->
<!-- 正常狀態需要放在第一個 -->
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<!-- Hover 效果 -->
<VisualState.Setters>
<Setter Target="ButtonContentPath.Stroke" Value="Transparent"></Setter>
<Setter Target="ButtonContentPath.Fill" Value="Blue"></Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<!-- 按下狀態 -->
<Storyboard>
<!-- 顏色用 ColorAnimation 也可以 -->
<!-- <ColorAnimation To=""></ColorAnimation> -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonContentPath" Storyboard.TargetProperty="Stroke" >
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonContentPath" Storyboard.TargetProperty="Fill" >
<DiscreteObjectKeyFrame KeyTime="0" Value="#FF666666"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<!-- 不可用的狀態 -->
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="ButtonContentPath" StrokeThickness="2" Stroke="#FF666666" Data="M7,15C6.85289858,15.5677816,6.85289858,16.4322348,7,17L22,29C22.7348015,29.3762198,24,28.8227297,24,28L24,4C24,3.1772867,22.7348015,2.62379657,22,3L7,15z"></Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<StackPanel
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Border BorderBrush="Black" BorderThickness="0">
<Button Style="{StaticResource Style.Button.FooButtonStyle}"
Background="Transparent" Padding="0">
</Button>
</Border>
</StackPanel>
以上代碼的細節點在於想要讓 VisualStateManager 的 VisualStateGroups 生效,必須放在容器裡面,直接寫在 ControlTemplate 下麵是不行的。第一個 Normal 的 VisualState 需要放在最前面,裡面可以不寫任何的代碼,將會自動清空狀態
也如上面代碼,設置屬性的值時候,既可以使用 Setters 的方式,也可以使用動畫的方式。使用 Setters 的代碼比較短,如下麵代碼
<VisualState x:Name="PointerOver">
<!-- Hover 效果 -->
<VisualState.Setters>
<Setter Target="ButtonContentPath.Stroke" Value="Transparent"></Setter>
<Setter Target="ButtonContentPath.Fill" Value="Blue"></Setter>
</VisualState.Setters>
</VisualState>
使用 Setters 時不需要管 Property 屬性,只需要保證 Target 是 對象.屬性
的寫法就好了
使用動畫的例子如下
<VisualState x:Name="Pressed">
<!-- 按下狀態 -->
<Storyboard>
<!-- 顏色用 ColorAnimation 也可以 -->
<!-- <ColorAnimation To=""></ColorAnimation> -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonContentPath" Storyboard.TargetProperty="Stroke" >
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonContentPath" Storyboard.TargetProperty="Fill" >
<DiscreteObjectKeyFrame KeyTime="0" Value="#FF666666"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
動畫代碼比較多,但是可以實現比較柔和的效果。因為 Setters 是立刻變化的,動畫可以實現慢慢變化。對於視覺效果比較大的範圍,推薦使用動畫
具體一個控制項有哪些 VisualState 可以設置,需要查閱文檔,詳細請看: https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.visualstate
瞭解基礎用法之後,咱就可以繼續在 ButtonHelper 裡面定義滑鼠移動到按鈕上的邊框輪廓顏色畫刷附加屬性,如下麵代碼
public class ButtonHelper
{
public static readonly DependencyProperty PointerOverStrokeBrushProperty = DependencyProperty.RegisterAttached(
"PointerOverStrokeBrush", typeof(Brush), typeof(ButtonHelper), new PropertyMetadata(default(Brush)));
public static void SetPointerOverStrokeBrush(DependencyObject element, Brush value)
{
element.SetValue(PointerOverStrokeBrushProperty, value);
}
public static Brush GetPointerOverStrokeBrush(DependencyObject element)
{
return (Brush)element.GetValue(PointerOverStrokeBrushProperty);
}
}
定義完成附加屬性,嘗試在 XAML 裡面使用這個屬性。正常的使用方法是會在樣式裡面,給定附加屬性初值的。為什麼不在附加屬性定義的時候,寫附加屬性預設值?這是因為不同的樣式一般都會有樣式自身期望的初值,因此作為樣式使用的附加屬性,比較少會配置預設值。但也不是不能,取決於你的開森
<Style x:Key="Style.Button.PathButtonStyle" TargetType="Button">
<Setter Property="local:ButtonHelper.PointerOverStroke" Value="#FF666666"/>
...
</Style>
將此 PointerOverStroke 在 PointerOver 賦值給到按鈕的 Path 上,代碼如下,以下代碼使用 Setter 的方式賦值,代碼看起來比較短
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="ButtonContentPath.Stroke" Value="{Binding RelativeSource={RelativeSource TemplatedParent},Path=(local:ButtonHelper.PointerOverStrokeBrush)}"></Setter>
</VisualState.Setters>
</VisualState>
如此即可完成樣式的對滑鼠移動到按鈕上,按鈕使用附加屬性配置的顏色的定義
按鈕可以通過 PointerOverStrokeBrush 附加屬性定義按鈕期望滑鼠移動到按鈕上的顏色畫刷,如以下代碼
<Button Style="{StaticResource Style.Button.PathButtonStyle}"
local:ButtonHelper.ButtonPath="M5,5L15,15L5,25"
local:ButtonHelper.PointerOverStrokeBrush="Blue">
</Button>
可以看到,在完成樣式定義的基礎上,只需簡單的代碼就可以讓按鈕工作起來了
如果剛好有一組按鈕都需要做相同的滑鼠移動到按鈕上的 Hover 顏色畫刷更改,可以再定義一個新的樣式,繼承 Style.Button.PathButton
樣式,如以下代碼
<Style x:Key="Style.Button.SlideButtonStyle" TargetType="Button" BasedOn="{StaticResource Style.Button.PathButton}">
<Setter Property="Width" Value="50"></Setter>
<Setter Property="Height" Value="50"></Setter>
<Setter Property="local:ButtonHelper.PointerOverStrokeBrush" Value="#FF996666"/>
</Style>
如此可以在不影響閱讀界面代碼的前提下,減少界面代碼的重覆量,也能讓界面代碼編寫更加方便
本文定義的 Style.Button.PathButton
按鈕樣式的代碼如下
<Style x:Key="Style.Button.PathButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="local:ButtonHelper.PointerOverStrokeBrush" Value="#FF666666"/>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="ButtonContentPath.Stroke" Value="{Binding RelativeSource={RelativeSource TemplatedParent},Path=(local:ButtonHelper.PointerOverStrokeBrush)}"></Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="ButtonContentPath" StrokeThickness="2" Stroke="#FF666666" Data="{Binding RelativeSource={RelativeSource TemplatedParent},Path=(local:ButtonHelper.ButtonPath)}"></Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
本文代碼放在 github 和 gitee 上,可以使用如下命令行拉取代碼
先創建一個空文件夾,接著使用命令行 cd 命令進入此空文件夾,在命令行裡面輸入以下代碼,即可獲取到本文的代碼
git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin 2eb5da7c4a63d65e1a2424ca40e2ae94f5da7549
以上使用的是 gitee 的源,如果 gitee 不能訪問,請替換為 github 的源。請在命令行繼續輸入以下代碼,將 gitee 源換成 github 源進行拉取代碼
git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git
git pull origin 2eb5da7c4a63d65e1a2424ca40e2ae94f5da7549
獲取代碼之後,進入 UnoDemo/PathButtonDemo 文件夾,即可獲取到源代碼
更多 UWP 或 WinUI3 或 UNO 開發教程,請參閱 博客導航
博客園博客只做備份,博客發佈就不再更新,如果想看最新博客,請訪問 https://blog.lindexi.com/
如圖片看不見,請在瀏覽器開啟不安全http內容相容
本作品採用知識共用署名-非商業性使用-相同方式共用 4.0 國際許可協議進行許可。歡迎轉載、使用、重新發佈,但務必保留文章署名[林德熙](https://www.cnblogs.com/lindexi)(包含鏈接:https://www.cnblogs.com/lindexi ),不得用於商業目的,基於本文修改後的作品務必以相同的許可發佈。如有任何疑問,請與我[聯繫](mailto:[email protected])。