在微軟的官方開源社群中有一個設定畫面的套件,據說 Windows 11 的設定頁面就是使用 WinUI 3 + 這個套件寫的
這裡也快速帶過:
使用 NuGet 安裝 CommunityToolkit.Mvvm 套件,或是使用 .NET CLI 執行以下指令安裝
在 ViewModels 資料夾中建立 Settings 類別並繼承 ObservableObject:
後面的文章會在此類別中陸續增加屬性
並在頁面的 C# 程式碼檔案中(例如 MainWindow.cs)
增加 Settings 的屬性變更事件,方便我們確認介面上的變更會確實觸發到資料更新:
上面左側小圖示,可以參考下面這篇,取得 Glyph 的 Icon 字串即可變更 Icon:
WinUi3 顯示 Icon
註: 記得加上 partial 關鍵字 在 SettingsCard 中加入 ToggleSwitch ,並將 IsOn 屬性綁定我們 Settings 的 IsOn (ObservableProperty 這個 Attribute 會幫我們把 _isOn屬性自動建立 IsOn 的 get 和 set)
執行結果如下:
並且在切換時在一開始建立的 PropertyChanged 事件中也會收到變更通知。
在 SettingsCard 中加入 ComboBox ,並將 SelectedIndex 屬性綁定我們 Settings 的 SelectedIndex
在 SettingsCard 中加入 Button ,並綁定剛剛建立的 Button_OnClick 按鈕事件
註: 原本的 Description 要移除,不然會衝突,兩個只能留一個
總之,很多元件都可以塞入 SettingsCard 中,有機會再來寫下一篇 - SettingsExpander 示範
參考資料:
Microsoft.Learn - SettingsCard
屬性變更
「設定頁面」有很多「設定」,我不會會希望它只有介面,會希望介面的內容會和資料連動,請先依照這篇文章練習一下 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=}"
</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=}">
<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=}">
<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=}">
<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=}">
<controls:SettingsCard.Description>
<HyperlinkButton Content="描述的連結" NavigateUri="https://www.ruyut.com" />
</controls:SettingsCard.Description>
</controls:SettingsCard>
</StackPanel>
註: 原本的 Description 要移除,不然會衝突,兩個只能留一個
總之,很多元件都可以塞入 SettingsCard 中,有機會再來寫下一篇 - SettingsExpander 示範
參考資料:
Microsoft.Learn - SettingsCard
留言
張貼留言
如果有任何問題、建議、想說的話或文章題目推薦,都歡迎留言或來信: a@ruyut.com