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,大概就是这样做。