win10 uwp 簡單製作一個 Path 路徑繪製的圖標按鈕

本文告訴大家在 UWP 或 WinUI 3 裏面如何簡單製作一個由 Path 幾何路徑圖形繪製的圖標按鈕

先在資源裏面定義按鈕的樣式，重寫 Template 屬性，通過在 Template 裏面放入 Path 綁定 Data 到內容從而實現讓 Path 顯示集合路徑圖形，代碼如下

        <Style x:Key="Style.TitlebarButton" TargetType="Button">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="#808080" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Top" />
            <Setter Property="Width" Value="24"/>
            <Setter Property="Height" Value="24"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ButtonBase">
                        <Grid Background="{TemplateBinding Background}">
                            <Path Fill="{TemplateBinding Foreground}" Data="{TemplateBinding Content}"></Path>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

接下來有路徑資源可以先在資源字典裏面定義，定義的是字符串即可，如以下代碼

        <x:String x:Key="Geometry.Close">M18.363961,5.63603897 C18.7544853,6.02656326 18.7544853,6.65972824 18.363961,7.05025253 L13.4142136,12 L18.363961,16.9497475 C18.7544853,17.3402718 18.7544853,17.9734367 18.363961,18.363961 C17.9734367,18.7544853 17.3402718,18.7544853 16.9497475,18.363961 L12,13.4142136 L7.05025253,18.363961 C6.65972824,18.7544853 6.02656326,18.7544853 5.63603897,18.363961 C5.24551468,17.9734367 5.24551468,17.3402718 5.63603897,16.9497475 L10.5857864,12 L5.63603897,7.05025253 C5.24551468,6.65972824 5.24551468,6.02656326 5.63603897,5.63603897 C6.02656326,5.24551468 6.65972824,5.24551468 7.05025253,5.63603897 L12,10.5857864 L16.9497475,5.63603897 C17.3402718,5.24551468 17.9734367,5.24551468 18.363961,5.63603897 Z</x:String>

這裏有一個細節點是在 UWP 或 WinUI 3 裏，字符串類型應該使用 x:String 而不是使用 system:String 的方式，如以下錯誤的代碼例子

<Page
    x:Class="LefernochihairWhemfawqarkemche.MainPage"
    ...
    xmlns:system="using:System">

    <Page.Resources>
        <system:String x:Key="Geometry.Close">M18.363961,5.63603897 C18.7544853,6.02656326 18.7544853,6.65972824 18.363961,7.05025253 L13.4142136,12 L18.363961,16.9497475 C18.7544853,17.3402718 18.7544853,17.9734367 18.363961,18.363961 C17.9734367,18.7544853 17.3402718,18.7544853 16.9497475,18.363961 L12,13.4142136 L7.05025253,18.363961 C6.65972824,18.7544853 6.02656326,18.7544853 5.63603897,18.363961 C5.24551468,17.9734367 5.24551468,17.3402718 5.63603897,16.9497475 L10.5857864,12 L5.63603897,7.05025253 C5.24551468,6.65972824 5.24551468,6.02656326 5.63603897,5.63603897 C6.02656326,5.24551468 6.65972824,5.24551468 7.05025253,5.63603897 L12,10.5857864 L16.9497475,5.63603897 C17.3402718,5.24551468 17.9734367,5.24551468 18.363961,5.63603897 Z</system:String>
    </Page.Resources>
    <Grid>
    </Grid>
</Page>

以上的代碼可能拋出的是 Microsoft.UI.Xaml.Markup.ReflectionHelperException Error in reflection helper. Please add '<PropertyGroup><EnableTypeInfoReflection>false</EnableTypeInfoReflection></PropertyGroup>' to your project file.. Created Xaml type 'String' has a different name than requested type 'System.String' 錯誤，也可能拋出的是 Windows.UI.Xaml.Markup.XamlParseException: XAML parsing failed. 異常。這幾個異常這麼奇怪，其實是微軟從 2015 開始就毫無長進的 WinUI 異常提示機制，由於經過了 COM 的 WinUI 底層，導致了上層拋出的不是本質的異常，也不知道是哪一行，只能依靠逐步靜態閱讀代碼和不斷運行嘗試才能知道是哪裏寫錯了

回到使用代碼裏面，圖標按鈕的使用方法特別簡單，只需要將以上的 x:String 的幾何路徑設置到按鈕的內容，然後設置按鈕的樣式就完成

        <Button Style="{StaticResource Style.TitlebarButton}" Content="{StaticResource Geometry.Close}"></Button>

如此簡單即可完成圖標按鈕

爲了防止大家不知道上文給的代碼是寫到哪裏，下面給出頁面的代碼，可以拷貝在自己的項目裏瞭解效果

<Page
    x:Class="LefernochihairWhemfawqarkemche.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LefernochihairWhemfawqarkemche"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:system="using:System"
    xmlns:helpers="using:LefernochihairWhemfawqarkemche.Helpers"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <x:String x:Key="Geometry.Close">M18.363961,5.63603897 C18.7544853,6.02656326 18.7544853,6.65972824 18.363961,7.05025253 L13.4142136,12 L18.363961,16.9497475 C18.7544853,17.3402718 18.7544853,17.9734367 18.363961,18.363961 C17.9734367,18.7544853 17.3402718,18.7544853 16.9497475,18.363961 L12,13.4142136 L7.05025253,18.363961 C6.65972824,18.7544853 6.02656326,18.7544853 5.63603897,18.363961 C5.24551468,17.9734367 5.24551468,17.3402718 5.63603897,16.9497475 L10.5857864,12 L5.63603897,7.05025253 C5.24551468,6.65972824 5.24551468,6.02656326 5.63603897,5.63603897 C6.02656326,5.24551468 6.65972824,5.24551468 7.05025253,5.63603897 L12,10.5857864 L16.9497475,5.63603897 C17.3402718,5.24551468 17.9734367,5.24551468 18.363961,5.63603897 Z</x:String>

        <Style x:Key="Style.TitlebarButton" TargetType="Button">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="#808080" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Top" />
            <Setter Property="Width" Value="24"/>
            <Setter Property="Height" Value="24"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ButtonBase">
                        <Grid Background="{TemplateBinding Background}">
                            <Path Fill="{TemplateBinding Foreground}" Data="{TemplateBinding Content}"></Path>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Grid>
        <Button Style="{StaticResource Style.TitlebarButton}" Content="{StaticResource Geometry.Close}" Click="Button_OnClick"></Button>
    </Grid>
</Page>