本文主要說如何在UWP切換主題,并且如何制作主題。
一般我們的應用都要有多種顏色,一種是正常的白天顏色,一種是晚上的黑夜顏色,還需要一種輔助的高對比顏色。這是微軟建議的,一般應用都要包含的顏色。
我們還可以自己定義多種顏色,例如金屬、海藍之光、彩虹雨。然而微軟給我們的切換,簡單只有亮和暗。
那么問題就是我們如何切換我們的主題。
在這前,我們先說如何制作主題,其實主題就是Dictionary,我們在解決方案加上兩個文件夾,一個是View,一個是ViewModel,其中View將會放主題,如果主題比較多,還可以在View加一個文件夾。
首先在View文件夾新建資源
我根據原文說的新建幾個資源叫LightThemeDictionary、DarkThemeDictionary,一個是白天顏色,一個是黑暗
然后我們在我們的資源寫入幾個資源
#FF000000 #FF0074CE
然后在黑暗也寫相同key的資源
#FFFFFFFF #FF0074CE
然后我們需要在前臺把資源放在Page
我們使用資源需要ThemeDictionaries,這個是主題
記住要把資源一個叫x:Key="Light"一個Dark,原因在下面會說。
我們建立ViewModel,其中ViewModel繼承NotifyProperty,這是一個我寫的類,這個類主要是INotifyPropertyChanged,如果自己寫ViewModel也好
ViewModel建立在ViewModel文件夾,一般少把類名稱和文件夾一樣
我們ViewModel主要是屬性
ElementTheme Theme,ElementTheme 有Default,Light,Dark,就是我們要把key叫light和dark,這樣就可以綁定ViewModel修改
viewModel
public class ViewModel : NotifyProperty
{
public ViewModel()
{
}
public ElementTheme Theme
{
get
{
return _theme;
}
set
{
_theme = value;
OnPropertyChanged();
}
}
private ElementTheme _theme = ElementTheme.Light;
}
我們綁定Page.RequestedTheme
先在xaml.cs寫
private ViewModel.ViewModel View { set; get; }=new ViewModel.ViewModel();
然后在xaml
我們要看到變化,在xaml使用
SystemBackgroundAltHighBrush是我們兩個資源的,其中一個是白天,一個不是
private void ToggleSwitch_OnToggled(object sender, RoutedEventArgs e)
{
View.Theme = View.Theme == ElementTheme.Light ? ElementTheme.Dark :
ElementTheme.Light;
}
運行可以看到點擊就變成白天顏色,再點擊就變為黑暗,這就是uwp切換主題,這樣主題顏色很少,只有兩個。
參見:https://embracez.xyz/xaml-uwp-themes/
我們總是會使用白天,夜間模式,那么我們需要切換主題,UWP切換主題簡單
下面使用我做的一個按鈕
夜間白天主題按鈕
NightDayThemeToggleButton
我做的還有游戲鍵,這些都是可以簡單使用的控件
這些控件放在https://github.com/lindexi/UWP,大家可以拿下來用。
做一個按鈕,其實是修改
需要使用也簡單,可以使用
這樣復制我上面代碼就好,如果想用我的控件,可以
上面用到兩張圖片,一張是白天,一張是夜晚
首先我們是編輯副本,里面有很多連接
然后我們可以看到
我們把下面自帶所有控件都刪掉,然后添加兩個Image,當然需要給他們x:Name
接著在上面添加透明度從1到0或從0到1,大概就是這樣做。