UWP WinUI 製作一個路徑向量圖示按鈕樣式入門

lindexi發表於2024-07-07
UI

本文將告訴大家如何在 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 開發教程，請參閱 部落格導航

相關文章