原文:2018-2-13-win10-uwp-切换主题

title author date CreateTime categories
win10 uwp 切换主题
lindexi
2018-2-13 17:23:3 +0800
2018-2-13 17:23:3 +0800
Win10 UWP

一般我们的应用都要有多种颜色,一种是正常的白天颜色,一种是晚上的黑夜颜色,还需要一种辅助的高对比颜色。这是微软建议的,一般应用都要包含的颜色。

我们还可以自己定义多种颜色,例如金属、海蓝之光、彩虹雨。然而微软给我们的切换,简单只有亮和暗。

那么问题就是我们如何切换我们的主题。

在这前,我们先说如何制作主题,其实主题就是Dictionary,我们在解决方案加上两个文件夹,一个是View,一个是ViewModel,其中View将会放主题,如果主题比较多,还可以在View加一个文件夹。

首先在View文件夹新建资源

我根据原文说的新建几个资源叫LightThemeDiction本文主要说如何在UWP切换主题,并且如何制作主题。

一般我们的应用都要有多种颜色,一种是正常的白天颜色,一种是晚上的黑夜颜色,还需要一种辅助的高对比颜色。这是微软建议的,一般应用都要包含的颜色。

我们还可以自己定义多种颜色,例如金属、海蓝之光、彩虹雨。然而微软给我们的切换,简单只有亮和暗。

那么问题就是我们如何切换我们的主题。

在这前,我们先说如何制作主题,其实主题就是Dictionary,我们在解决方案加上两个文件夹,一个是View,一个是ViewModel,其中View将会放主题,如果主题比较多,还可以在View加一个文件夹。

首先在View文件夹新建资源

我根据原文说的新建几个资源叫LightThemeDictionary、DarkThemeDictionary,一个是白天颜色,一个是黑暗

然后我们在我们的资源写入几个资源

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:NightDayThemeToggleButton.View">
<SolidColorBrush x:Key="SystemBackgroundAltHighBrush" Color="#FFF0F0F0"/>
<SolidColorBrush x:Key="SystemBackgroundBaseHighBrush" Color="#FF101010"/>
<Color x:Key="SystemTranslucentBaseHighColor">#FF000000</Color>
<Color x:Key="SystemThemeMainColor">#FF0074CE</Color>
</ResourceDictionary>

然后在黑暗也写相同key的资源

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:NightDayThemeToggleButton.View"> <SolidColorBrush x:Key="SystemBackgroundAltHighBrush" Color="#FF1A1C37"/>
<SolidColorBrush x:Key="SystemBackgroundBaseHighBrush" Color="#FFDFDFDF"/>
<Color x:Key="SystemTranslucentBaseHighColor">#FFFFFFFF</Color>
<Color x:Key="SystemThemeMainColor">#FF0074CE</Color>
</ResourceDictionary>

然后我们需要在前台把资源放在Page

    <Page.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light" Source="View/DarkThemeDictionary.xaml"></ResourceDictionary>
<ResourceDictionary x:Key="Dark" Source="View/LightThemeDictionary.xaml"></ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Page.Resources>

我们使用资源需要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

<Page
x:Class="NightDayThemeToggleButton.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:NightDayThemeToggleButton"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
RequestedTheme="{x:Bind View.Theme,Mode=OneWay}">

我们要看到变化,在xaml使用

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Background="{ThemeResource SystemBackgroundAltHighBrush}">
<ToggleSwitch HorizontalAlignment="Center" Toggled="ToggleSwitch_OnToggled"></ToggleSwitch>
</Grid>
</Grid>

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,大家可以拿下来用。

做一个按钮,其实是修改

 <Style x:Key="NightDayThemeToggleButton" TargetType="CheckBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="Padding" Value="8,5,0,0"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="32"/>
<Setter Property="UseSystemFocusVisuals" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CombinedStates">
<VisualState x:Name="UncheckedNormal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Light" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Dark" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UncheckedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Light" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Dark" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UncheckedPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Light" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Dark" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UncheckedDisabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Light" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Dark" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="CheckedNormal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Light" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Dark" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="CheckedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Light" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Dark" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="CheckedPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Light" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Dark" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="CheckedDisabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Light" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Dark" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="IndeterminateNormal">
<Storyboard> </Storyboard>
</VisualState>
<VisualState x:Name="IndeterminatePointerOver">
<Storyboard> </Storyboard>
</VisualState>
<VisualState x:Name="IndeterminatePressed">
<Storyboard> </Storyboard>
</VisualState>
<VisualState x:Name="IndeterminateDisabled">
<Storyboard> </Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image x:Name="Light" Source="Assets/weather_sun.png"></Image>
<Image x:Name="Dark" Source="Assets/weather_moon.png"></Image>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

需要使用也简单,可以使用

<CheckBox Margin="16,193,0,75" Style="{StaticResource NightDayThemeToggleButton}" IsChecked="{x:Bind AreChecked,Mode=TwoWay}"></CheckBox>

这样复制我上面代码就好,如果想用我的控件,可以

<local:NightDayThemeToggleButton ></local:NightDayThemeToggleButton>

上面用到两张图片,一张是白天,一张是夜晚

首先我们是编辑副本,不知道这个在哪的可以去看我的入门http://blog.csdn.net/lindexi_gd/article/details/52041944,里面有很多连接

然后我们可以看到

<VisualState x:Name="UncheckedNormal">

我们把下面自带所有控件都删掉,然后添加两个Image,当然需要给他们x:Name

接着在上面添加透明度从1到0或从0到1,大概就是这样做。

2018-2-13-win10-uwp-切换主题的更多相关文章

  1. win10 uwp 切换主题

    本文主要说如何在UWP切换主题,并且如何制作主题. 一般我们的应用都要有多种颜色,一种是正常的白天颜色,一种是晚上的黑夜颜色,还需要一种辅助的高对比颜色.这是微软建议的,一般应用都要包含的颜色. 我们 ...

  2. 【Win10 UWP】QQ SDK(一):SDK基本使用方法

    每当开发一个应用需要社交分享的应用时,总是心里咯噔一下:到底什么时候分享能加上QQ和微信?除了WP8.0版本的微信SDK,官方似乎从未正面发布过适应时代发展的QQ SDK,就连后台,也没有一个可以创建 ...

  3. win10 uwp 使用 Microsoft.Graph 发送邮件

    在 2018 年 10 月 13 号参加了 张队长 的 Office 365 训练营 学习如何开发 Office 365 插件和 OAuth 2.0 开发,于是我就使用 UWP 尝试使用 Micros ...

  4. Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App

    安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...

  5. Win10 UWP开发系列:实现Master/Detail布局

    在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...

  6. Win10/UWP开发—使用Cortana语音与App后台Service交互

    上篇文章中我们介绍了使用Cortana调用前台App,不熟悉的移步到:Win10/UWP开发—使用Cortana语音指令与App的前台交互,这篇我们讲讲如何使用Cortana调用App的后台任务,相比 ...

  7. 【Win10 UWP】URI Scheme(一):Windows Store协议的解析和使用

    协议是Windows Phone和Windows Store应用的一个重要特点,可以做到在不同应用之间进行互相呼起调用.小小协议,学问大着呢.我打算写几篇关于协议在UWP中使用的文章. 这一讲的主要对 ...

  8. iOS 实现快速切换主题详细教程(附上源码)

    前言 iOS 实现主题切换,相信在未来的app里也是会频繁出现的,尽管现在只是出现在主流的APP,如(QQ.新浪微博.酷狗音乐.网易云音乐等),但是现在是看颜值.追求个性的年代,所以根据用户喜好自定义 ...

  9. 【广告】win10 uwp 水印图床 含代码

    本文主要是广告我的软件. 图床可以加速大家写博客上传图片的时间,通过简化我们的操作来得到加速. 在写博客的时候,我们发现,我们需要上传一张图片,需要先打开图片,然后选择本地图片,然后上传. 但是我经常 ...

  10. Win10 UWP版《芒果TV》v2.4.0直播超女,芒果台综艺一网打尽

    Win10 UWP版<芒果TV>直播超女,芒果台综艺一网打尽 Win10版UWP<芒果TV>自2015年9月登录商店以来,一直在持续更新,积极改进,拥有芒果台视频的独家点播和直 ...

随机推荐

  1. Linux & Go & Vscode & 插件

    Linux Deepin 安装Go 安装Go环境 sudo apt-get install golang 验证一下: 输入 $ go env 输出 GOARCH="amd64" G ...

  2. swoole怎么保持不掉线

    正常情况下客户端中断TCP连接时,会发送一个FIN包,进行4次断开握手来通知服务器.但一些异常情况下,如客户端突然断电断网或者网络异常,服务器可能无法得知客户端已断开连接. 尤其是移动网络,TCP连接 ...

  3. Java学习笔记之面向对象、static关键字

    一周Java学习总结 今天就总结理清一下关于面向对象和面向过程的程序设计的一些不同特点,以及讲下static关键字. 面向对象 现在接触的Java是面向对象的,现在的程序开发几乎都是以面向对象为基础的 ...

  4. Hyperledger Fabric相关文件解析

    1相关文件说明 这一部分涉及相关配置文件的解析, 网络的启动涉及到多个文件,本文按以下顺序进行分析: . ├── base │   ├── docker-compose-base.yaml #1 │  ...

  5. Java面试必备:手写单例模式

    面试官:请手写下几种常见的单例模式 我:好的(面带微笑),心里暗喜(送分题). 没成想提笔便写出了如此豪放的代码,不堪回首,请原谅我的不羁! 此篇整理了几种常见的单例模式代码示例,再有面试官让手撕单例 ...

  6. C# 波浪线绘制

    波浪线效果如上 界面绘制操作 private Point? _startPoint = null; private void ContainerCanvas_OnPreviewMouseLeftBut ...

  7. jvm虚拟机笔记<四> 虚拟机字节码执行引擎

    一.运行时栈帧结构 栈帧是用于支持虚拟机进行方法调用和执行的数据结构,是虚拟机栈的栈元素. 栈帧存储了局部变量表,操作数栈,动态连接,和返回地址等. 每一个方法的执行 对应的一个栈帧在虚拟机里面从入栈 ...

  8. Python爬虫,你是否真的了解它?

    程序员有时候很难和外行人讲明白自己的工作是什么,甚至有些时候,跟同行的人讲清楚“你是干什么的”也很困难.比如我自己,就对Daivd在搞的语义网一头雾水.所以我打算写一篇博客,讲一下“爬虫工程师”的工作 ...

  9. execjs使用时异常

    一.异常信息(...gbk.....) UnicodeDecodeError: 'gbk' codec can't decode byte 0xa1 in position 26: illegal m ...

  10. docker redis实现主从复制

    1.使用docker启动三个redis实例,容器名称分别为:myredis-master-6379,myredis-slave-6380,myredis-slave-6381.通过命令可以看到容器给三 ...