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,一个是白天颜色,一个是黑暗

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

<ResourceDictionaryxmlns="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的资源

<ResourceDictionaryxmlns="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

<Pagex: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 使用 Microsoft.Graph 发送邮件

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

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

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

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

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

  5. Win10 UWP开发中的重复性静态UI绘制小技巧 1

    Win10 UWP开发中的重复性静态UI绘制小技巧 1 原文:Win10 UWP开发中的重复性静态UI绘制小技巧 1 介绍 在Windows 10 UWP界面实现的过程中,有时会遇到一些重复性的.静态 ...

  6. Android 实现切换主题皮肤功能(类似于众多app中的 夜间模式,主题包等)

    首先来个最简单的一键切换主题功能,就做个白天和晚上的主题好了. 先看我们的styles文件: 1 <resources>2 3 <!-- Base application theme ...

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

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

  8. WIN10 自动切换夜间模式

    WIN10 自动切换夜间模式 介绍 系统版本 步骤 1. 更改power shell执行策略,以便能执行切换脚本 2.创建切换脚本 3. 添加脚本到任务计划程序中 介绍 Win10 现在还没有自动切换 ...

  9. win10 uwp 通过 Win2d 完全控制笔迹绘制逻辑

    本文来告诉大家如何通过 Win2d 完全控制笔迹绘制逻辑,本文适合用来实现复杂的自定义逻辑,可以完全控制笔迹的行为.包括在书写过程中切换模式,如进行手势擦除切换为橡皮擦模式 本文提供的方法适合用来做复 ...

  10. 笔记:2018/6-7-2018-6/13

    2018/6/7 1.  H5 3D转换 2.  通配符: _:一个字符 %:任意长度字符串 []:括号范围内一个字符 [^]:不在括号范围内一个字符 3.  模糊查询关键字: LIKE(只与字符型数 ...

最新文章

  1. java泛型的实现和原理_java 泛型实现原理
  2. 新思路!商汤开源利用无标注数据大幅提高精度的人脸识别算法
  3. rhel8手动安装mysql_RHEL8 CentOS8 下安装 MySQL 8.0亲测
  4. 数据迁移方法之expdp
  5. vue2.0 通过ip访问自己运行的项目
  6. LeetCode14 最长公共前缀
  7. Nginx反向代理,负载均衡,redis session共享,keepalived高可用
  8. 我们是如何通过全球第一免费开源ERP Odoo做到项目100%交付
  9. Linux 命令(67)—— time 命令
  10. 爬虫之User-Agent
  11. 接口压力测试:Jmeter【专门做接口压力测试】
  12. Mysql安装+卸载教程
  13. 新泽西理工计算机科学硕士,新泽西理工学院计算机科学专业硕士申请需要满足哪些条件?...
  14. 淘宝嘉年华5元无门槛红包使用范围 怎么设置淘宝嘉年华5元无门槛红包
  15. 重装系统,只需一行命令,一键激活win10家庭版。清理电脑缓存垃圾。
  16. PCI驱动框架简单分析
  17. 雷神战争中简单megetexture地图制作
  18. 为什么说《千与千寻》是一部优秀的职场电影
  19. 【概率论与数理统计】1.5 独立性
  20. k8s集成containerd,集成crictl工具,集成kata

热门文章

  1. 疫情过后,制造业中小企业应用工业互联网数字化转型之路的探讨
  2. A Self-paced Multiple-instance Learning Framework for Co-saliency Detection文章阅读
  3. unity PC 、安卓修改数据库文件
  4. bzoj2456瞎搞
  5. vue如何跳转支付宝付款页面
  6. 安卓java模拟器跳过付费,不用花钱买android手机,电脑端Android模拟器安装使用教程...
  7. 还是gif动画的处理
  8. 服务器系统需要装显卡驱动吗,显卡驱动需要更新吗,详细教您显卡驱动需要更新吗...
  9. 软件工程师能力自我评价表
  10. 爬虫(二) 豆瓣音乐评论爬虫 文末附完整代码