win10 通用應用 切換主題

本文主要說如何在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，大概就是這樣做。