WinUI 3 設定頁面 示範(SettingsCard) 上

在微軟的官方開源社群中有一個設定畫面的套件，據說 Windows 11 的設定頁面就是使用 WinUI 3 + 這個套件寫的

屬性變更

「設定頁面」有很多「設定」，我不會會希望它只有介面，會希望介面的內容會和資料連動，請先依照這篇文章練習一下 ObservableObject： C# 使用 CommunityToolkit.Mvvm 套件更簡單實現屬性變更通知

這裡也快速帶過：

使用 NuGet 安裝 CommunityToolkit.Mvvm 套件，或是使用 .NET CLI 執行以下指令安裝

	
dotnet add package CommunityToolkit.Mvvm
    

在 ViewModels 資料夾中建立 Settings 類別並繼承 ObservableObject：

    
public class Settings : ObservableObject
{
}
    

後面的文章會在此類別中陸續增加屬性

並在頁面的 C# 程式碼檔案中(例如 MainWindow.cs)

    
public readonly SettingsViewModel Settings = new();
    

增加 Settings 的屬性變更事件，方便我們確認介面上的變更會確實觸發到資料更新：

    

Settings.PropertyChanged += (sender, args) =>
{
    Console.WriteLine($"Settings.{args.PropertyName} = {Settings.GetType().GetProperty(args.PropertyName)?.GetValue(Settings)}");
};
    

安裝

先使用 NuGet 安裝 CommunityToolkit.WinUI.Controls.SettingsControls 套件，或是使用 .NET CLI 執行以下指令安裝：

	
dotnet add package CommunityToolkit.WinUI.Controls.SettingsControls
    

設定頁面示範

沒有功能的設定卡片

    
<StackPanel
    Spacing="4"
    Padding="20"
        xmlns:controls="using:CommunityToolkit.WinUI.Controls"
        xmlns:winUi="using:CommunityToolkit.WinUI">
    <controls:SettingsCard
        Header="標題"
        Description="描述"
        HeaderIcon="{winUi:FontIcon Glyph=&#xe700;}"
    </controls:SettingsCard>
</StackPanel>
    

上面左側小圖示，可以參考下面這篇，取得 Glyph 的 Icon 字串即可變更 Icon：
WinUi3 顯示 Icon

切換按鈕

在 SettingsViewModel 中加入 _isOn 屬性，用來儲存切換按鈕的狀態

    
public partial class SettingsViewModel : ObservableObject
{
    [ObservableProperty] private bool _isOn;
}
    

註： 記得加上 partial 關鍵字 在 SettingsCard 中加入 ToggleSwitch ，並將 IsOn 屬性綁定我們 Settings 的 IsOn (ObservableProperty 這個 Attribute 會幫我們把 _isOn屬性自動建立 IsOn 的 get 和 set)

    
<StackPanel
    Spacing="4"
    Padding="20"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:winUi="using:CommunityToolkit.WinUI">
    <controls:SettingsCard
        Header="標題"
        Description="描述"
        HeaderIcon="{winUi:FontIcon Glyph=&#xe700;}">
        
        <ToggleSwitch IsOn="{x:Bind Settings.IsOn, Mode=TwoWay}" />

    </controls:SettingsCard>
</StackPanel>
    

執行結果如下：

並且在切換時在一開始建立的 PropertyChanged 事件中也會收到變更通知。

下拉式選單

在 SettingsViewModel 中加入 _selectedIndex 屬性，用來儲存下拉式選單選擇的第幾個選項

    
public partial class SettingsViewModel : ObservableObject
{
    [ObservableProperty] private int _selectedIndex;
}
    

在 SettingsCard 中加入 ComboBox ，並將 SelectedIndex 屬性綁定我們 Settings 的 SelectedIndex

    
<StackPanel
    Spacing="4"
    Padding="20"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:winUi="using:CommunityToolkit.WinUI">
    <controls:SettingsCard
        Header="標題"
        Description="描述"
        HeaderIcon="{winUi:FontIcon Glyph=&#xe700;}">
        
        <ComboBox SelectedIndex="{x:Bind Settings.SelectedIndex, Mode=TwoWay}">
            <ComboBoxItem>選項一</ComboBoxItem>
            <ComboBoxItem>選項二</ComboBoxItem>
            <ComboBoxItem>選項三</ComboBoxItem>
        </ComboBox>

    </controls:SettingsCard>
</StackPanel>
    

按鈕

加上按鈕事件

    
using Microsoft.UI.Xaml;


private void Button_OnClick(object sender, RoutedEventArgs routedEventArgs)
{
    Console.WriteLine($"ButtonBase_OnClick");
}
    

在 SettingsCard 中加入 Button ，並綁定剛剛建立的 Button_OnClick 按鈕事件

    
<StackPanel
    Spacing="4"
    Padding="20"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:winUi="using:CommunityToolkit.WinUI">
    <controls:SettingsCard
        Header="標題"
        Description="描述"
        HeaderIcon="{winUi:FontIcon Glyph=&#xe700;}">
        
        <Button Content="按鈕" Click="Button_OnClick" />

    </controls:SettingsCard>
</StackPanel>
    

將描述變更為超連結

可以使用 SettingsCard.Description 來訂製「描述」位置的元素，下面是示範 塞入 HyperlinkButton 元件，即可達成超連結的效果：

    
<StackPanel
    Spacing="4"
    Padding="20"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:winUi="using:CommunityToolkit.WinUI">
    <controls:SettingsCard
        Header="標題"
        HeaderIcon="{winUi:FontIcon Glyph=&#xe700;}">
        
        <controls:SettingsCard.Description>
            <HyperlinkButton Content="描述的連結" NavigateUri="https://www.ruyut.com" />
        </controls:SettingsCard.Description>

    </controls:SettingsCard>
</StackPanel>
    

註： 原本的 Description 要移除，不然會衝突，兩個只能留一個

總之，很多元件都可以塞入 SettingsCard 中，有機會再來寫下一篇 - SettingsExpander 示範

參考資料：
Microsoft.Learn - SettingsCard