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

留言