WinUI 3 使用 ResourceDictionary 定義可以重複使用的樣式

在 WinUI 中如果想要定義樣式重複使用，可以使用 ResourceDictionary 達成

定義樣式

建立 Styles 資料夾，建立 MyStyles.xaml 檔案，預設內容如下:

    
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</ResourceDictionary>
    

現在要建立一個用於 Button 的自訂樣式，需要定義 x:Key ，才能將指定的元件套用自訂的範本，範例內容如下:

    
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <SolidColorBrush x:Key="MyButtonBackground" Color="Blue" />
    
    <Style x:Key="MyButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="{StaticResource MyButtonBackground}" />
        <Setter Property="BorderBrush" Value="Red" />
        <Setter Property="Padding" Value="10" />
        <Setter Property="FontSize" Value="20" />
    </Style>

</ResourceDictionary>
    

假設沒有定義 x:Key ，則在此資源的作用域下，所有目標類型(TargetType)元件都會自動套用樣式

套用樣式

我們建立了一個 Page1.xaml 頁面，在這之中建立了兩個 Button ，其中一個要套用我們剛剛做的自訂樣式：

    
<Page
    x:Class="WinUi3InputValidationTest.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
    <Page.Resources>
        <ResourceDictionary Source="/Styles/MyStyles.xaml" />
    </Page.Resources>
    
    <StackPanel>
        <Button >按鈕1</Button>
        <Button Style="{StaticResource MyButtonStyle}">按鈕2</Button>
    </StackPanel>
    
</Page>
    

上面做了兩個步驟：
1. 在 Page.Resources 加入 Styles/MyStyles.xaml 檔案
2. 替「按鈕2」套用名稱為「MyButtonStyle」的自訂樣式

上面是使用 Page ，在 Page 中定義了 Page.Resources ，但並不是所有的布局元件都有 .Resources 可以使用，具筆者查到的資料來看，只有 Border, Page, Application 這三個有 .Resources 可以使用，或許也是因為這個原因所以主要頁面都會使用 <Page> 來製作，而不會直接放在 <Window> 中

<Application> 位於 App.xaml ，是所有頁面的起點，所以如果要全域改變元件的樣式，直接放在這裡就可以了:

    
<?xml version="1.0" encoding="utf-8"?>
<Application
    x:Class="WinUi3InputValidationTest.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUi3InputValidationTest">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <ResourceDictionary Source="ms-appx:///Styles/MyStyles.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

    

參考資料：
Microsoft.Learn - Border Class
Microsoft.Learn - Page Class
Microsoft.Learn - Application Class
Microsoft.Learn - ResourceDictionary and XAML resource references