原文:[UWP]使用Acrylic(亚克力) 1. 前言 在 如何使用Fluent Design System 这篇文章里已经简单介绍过Reveal的用法,这篇再详细介绍其它内容. 自Windows 8 放弃Aero后,群众对毛玻璃回归的呼声一致都很大.Fluent Design System带来了新的透明背景Acrylic,提供更好的性能及更时髦的外观.(不过由于使用简单,可以预见滥用已经不可避免.) 2. 使用Acrylic 2.1 在XAML中使用Acrylic UWP提供了一组已定义好的…

1. 前言 在 如何使用Fluent Design System 这篇文章里已经简单介绍过Reveal的用法,这篇再详细介绍其它内容. 自Windows 8 放弃Aero后,群众对毛玻璃回归的呼声一致都很大.Fluent Design System带来了新的透明背景Acrylic,提供更好的性能及更时髦的外观.(不过由于使用简单,可以预见滥用已经不可避免.) 2. 使用Acrylic 2.1 在XAML中使用Acrylic UWP提供了一组已定义好的Acrylic Brush供开发者使用,通过T…

文档:https://docs.microsoft.com/en-us/windows/uwp/design/style/acrylic Acrylic 能带来类似 win7 的毛玻璃效果 要使用 Acrylic ,需要 win10 的版本最低为 1709 ,在模拟器中是 16299 Acrylic 有两种: Background acrylic In-app acrylic 顾名思义,一种是应用背景用的,一种是应用中弹出遮罩层之类用的 win10 带了很多 acrylic resources…

原文 Customize Acrylic Brush in UWP Applications(在UWP中自定义亚克力笔刷) Windows 10 Fall Creators Update(Build 16299)添加了acrylic brush,这是一个类似于Windows 7 Aero效果的UI画笔. Windows中的很多内容,例如Calculator,都会使用丙烯画笔进行更新.但是,内置刷子并不总能满足我们自己的要求.特别是当Windows自动禁用丙烯酸渲染(如低功耗模式)或非活动窗口时,…

一时兴起想谈谈UWP按钮的设计. 按钮是UI中最重要的元素之一,可能也是用得最多的交互元素.好的按钮设计可以有效提高用户体验,构造让人眼前一亮的UI.而且按钮通常不会影响布局,小小的按钮无论怎么改也不会对性能有多大影响,所以不少注重细节的设计师最为热衷修改按钮.(例如 这位 ) 目前UWP只提供了基础款的按钮样式,网上相关资源也较少,所有写了这篇文章用于介绍在UWP上设计按钮的入门知识. 1. VisualStates Button的CotrolTemplate(可以参考 这里 )中包含四个Vi…

毛玻璃在UWP很简单,不会和WPF那样伤性能. 本文告诉大家,如何在 UWP 使用 win2d 做毛玻璃. 毛玻璃可以使用 win2D 方法,也可以使用 Compositor . 使用 win2d 得到软件内控件毛玻璃,而使用 Compositor 可以获得窗口毛玻璃. 先来说下如何使用 Compositor 做窗口毛玻璃,感觉小伙伴感兴趣的是窗口毛玻璃. Compositor 创建毛玻璃 先写最简单的页面,只有一个 Grid, 给他名称 GlassHost,这个控件用于显示毛玻璃 <Grid…

1. 前言 微软在Build 2017中公布了新的设计语言Fluent Design System(以下简称FDS),不过官网只是堆砌了各种华丽的词语以及一堆动画.至于在UWP中要做成怎么样,怎么做,可以参考这个视频: Build Amazing Apps with Fluent Design - Build 2017 视频中使用BuildCast这个示例应用详细展示了Fall Creators Update(16299)中如何实现FDS以及其它FCU的新API,极具参考价值. 或者参考开发人员…

4. 兼容旧版本 FDS最常见的问题之一是如何与Fall Creators Update之前的版本兼容,其实做起来也挺简单的,ColorfulBox就实现了Creators Update与Fall Creators Update之间的兼容. 4.1 使用HamburgerMenu代替NavigationView UWP Community Toolkit中的HamburgerMenu是以前制作汉堡包导航菜单最常用的方案,升级到2.0版本以后它会判断运行的Windows版本,如果是Fall Cre…

1. 前言 之前在 如何使用Fluent Design System 这篇文章里已经简单介绍过Reveal的用法,这篇再详细介绍其它内容. 2. 自定义RevealButtonStyle 我觉得常用ItemsControl都已经自动应用了Reveal,用就是了. 没有默认应用Reveal的控件,UWP也为其中一部分提供了可用的Reveal样式. 只需简单地应用Style即可: <Button Content="Button Content" Style="{Static…

1. 前言 每一个有理想的UWP应用都会打标题栏的注意,尤其当微软提供 将 Acrylic 扩展到标题栏 这个功能后,大部分Windows 10的原生应用都不乖了,纷纷占领了标题栏的一亩三分地.这篇博客将介绍在UWP中如何自定义标题栏. 2.示例代码 UWP的限制很多,标题栏的自定义几乎全部内容集中在 这篇文档 里面.但只参考这篇文章做起来还不够顺手,我参考了微软开源的计算器应用中的 TitleBar 写了一个示例应用,可以在 这里 查看它的源码.我也把TitleBar实际应用到了我的 OneP…