透過主題設定,可以在執行時更改應用的主題外觀,比如切換亮色主題和暗黑主題。主題設定並沒有新的知識點,基本的原理如下:
- 定義每個應用主題的ResourceDictionary,每個ResourceDictionary有相同的Key,但值不同。
- 在根頁面App.xaml的資源字典中,引用預設的ResourceDictionary。
- 使用方式①:直接在頁面中,透過DynamicResource擴充套件標記,引用ResourceDictionary的Key值。
- 使用方式②:在App.xaml中,定義應用級別的Style,樣式值使用DynamicResource擴充套件標記,引用ResourceDictionary的Key值。頁面中,則使用StaticResource擴充套件標記引用Style。
- 如需在執行時更改主題,透過後臺程式碼更換ResourceDictionary即可。
一、在Themes資料夾下,建立MAUI的資源字典檔案LightTheme.xaml和DarkTheme.xaml
二、在根頁面App.xaml的資源字典中,引用預設的ResourceDictionary
<Application ......> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Resources/Styles/Colors.xaml" /> <ResourceDictionary Source="Resources/Styles/Styles.xaml" /> <!--引用預設主題資源字典LightTheme.xaml--> <ResourceDictionary Source="Themes/LightTheme.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application>
三、在App.xaml中,定義應用級別的Style(非必要)
<Application ......> <Application.Resources> <ResourceDictionary> ...... </ResourceDictionary> <!--定義Style,TargetType為Label--> <Style x:Key="PrimaryLabelStyle" TargetType="Label"> <Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" /> <Setter Property="FontSize" Value="25" /> </Style> <Style x:Key="SecondLabelStyle" TargetType="Label"> <Setter Property="TextColor" Value="{DynamicResource SecondaryTextColor}" /> <Setter Property="FontSize" Value="30" /> </Style> </Application.Resources> </Application>
四、在頁面中透過DynamicResource擴充套件標記引用ResourceDictionary的Key值,或透過StaticResource和Style間接引用
<ContentPage ...... BackgroundColor="{DynamicResource PageBackgroundColor}"> <StackLayout BackgroundColor="{DynamicResource PrimaryColor}"> <Label Text="直接繫結ResourceDictionary的Key值①" TextColor="{DynamicResource PrimaryTextColor}"/> <Label Text="直接繫結ResourceDictionary的Key值②" TextColor="{DynamicResource SecondaryTextColor}"/> <Label Text="透過Style間接繫結ResourceDictionary①" Style="{StaticResource PrimaryLabelStyle}"/> <Label Text="透過Style間接繫結ResourceDictionary②" Style="{StaticResource PrimaryLabelStyle}"/> <Button Text="切換主題" Clicked="Button_Clicked"/> </StackLayout> </ContentPage>
五、透過後臺程式碼切換主題,本案例使用Button的點選事件
public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } private void Button_Clicked(object sender, EventArgs e) { //獲取當前資源字典 ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries; //先將當前資源字典清空,再添回暗黑主題DarkTheme if (mergedDictionaries != null) { mergedDictionaries.Clear(); mergedDictionaries.Add(new DarkTheme()); } } }