使用简单的Xaml实现UWP切换主题

达到下面的效果其实非常简单

首先,建立一个对象,包含一个bool字段,指示是否显示 暗色主题

		private void SwitchThemeButton_Click(object sender, RoutedEventArgs e)
		{
			MySettings = new UserSetting {
				IsDarkTheme = !MySettings.IsDarkTheme
			};
		}

UserSetting对象是我用来存储用户设置的,IsDarkTheme绑定前台 请求的主题

忘了说一句,UWP主题和DataContext数据上下文一样是向后拓展的,即子元素默认和父元素使用的主题一致(如果子元素没有设置RequestTheme的话).所以绑定到Page或者Frame上,内部的元素均能受益.

         <Frame x:Name="Frame1" RequestedTheme="{x:Bind MySettings.IsDarkTheme,Mode=TwoWay,Converter={StaticResource ElementThemeConverter}}" Grid.Column="0">
                </Frame>

绑定的时候需要是ElementTheme或AppTheme的枚举类型,需要进行转换,Converter用法这里不说了,Converter如下:

public class ElementThemeConverter : IValueConverter
	{

		object IValueConverter.Convert(object value, Type targetType, object parameter, string language)
		{
			if ((bool)value)
			{
				return ElementTheme.Dark;
				
			}
			else
			{
				return ElementTheme.Light;
			}
		}

		object IValueConverter.ConvertBack(object value, Type targetType, object parameter, string language)
		{
			bool result = false;
			switch (value)
			{
				case ElementTheme.Dark:
					result = true;
					break;
				case ElementTheme.Light:
					result = false;

					break;
			}

			return result;
		}
	}

上面的Convert back实际上是没用的,如绑定Page则更改ElementTheme为AppTheme类型.

如此完成了Theme的后台绑定.

元素如果要相应绑定的主题变化,只需要更改Xaml即可.将元素绑定Theme资源主题(系统自带),即可跟随主题变换颜色.

     <Setter Property="Foreground" Value="{ThemeResource ApplicationForegroundThemeBrush}" />
     <Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}" />