微软最新设计Fluent Design System初体验
微软最新设计Fluent Design System初体验
本文图片不全！建议移步知乎专栏查看！！！
https://zhuanlan.zhihu.com/p/30582886
微软
在1709这次秋季创意者大更新中，微软终于将Fluent Design System做的像模像样了。之前只有部分，例如计算器、照片等App有FDS的影子，现在设置也有了。使得大家Windows10愈发的漂亮了（以前很丑）
Fluent Design System是微软最新的设计，是“一套基于平面化的、创新的、标准化的、自洽的设计逻辑”。
本质上与以前因苹果而流行起来的物化设计或者win8之后的平面化设计一样，都是一种设计风格+交互逻辑。（交互成分是次要的，满足审美需求是主要目的）
—— https://www.zhihu.com/question/59724483
而我认为初期的FDS就是亚克力材质与像手电筒一样的光照
昨晚（2017/10/29）我试着将自己之前做的一个图书馆查书的UWP，改了下样式，看看FDS到底怎么样。
实施步骤：
1.我先上官网看了下
https://fluent.microsoft.com/
2.看到上面有设计资源，转到了https://developer.microsoft.com/zh-cn/windows/apps/design
3.可以看到上来就是添加亚克力材料，话不多说我们上来就加！
4.前面有非常啰嗦的介绍，想知道亚克力是干嘛的你就看看，不想看，咱就翻到红色标记的地方，直接上代码。
睁大眼睛！醒醒！就是这一行！就可以了！快试试！
5.将Background修改后你会发现，你的窗口透明了。不太满意您先别急，这里还有很多默认的样式。
如果你想自定义透明度等设置，可以看看下面的内容
7.把标题栏也干掉
8.好了，这页基本讲完了。我们可以看到文尾有讲显示（Reveal）的，是教你把Button等控件加上手电筒效果的。
https://docs.microsoft.com/zh-cn/windows/uwp/style/reveal
这里给大家放一个CommandBar的
9.在我看Reveal的时候我还注意到自动使用的控件。所以我索性直接用了NavigationView（NavigationView真是好东西，懒人福音）
10.NavigationView大致细分为三个部分 - 左侧是用于导航的窗格，右侧是标题和内容区域
文档的这些地方非常重要一定要好好看
然后文档还说了怎么使用NavigationView
可以说是非常详细了。什么？你不会？给我复制粘贴上去就行！
11.给大家说几个坑（个人情况）
代码里在NavigationView加载的时候，Add了NavigationViewItem有点问题，所以大家直接注释掉。
直接在布局里写
而xaml.cs里只用下面的Invoked就可以。
这个Invoked也有点问题，它读不到Tag，所以我直接用的Content。
还有一点是Item的高度不够，我修改不了，做不到Groove音乐那么美观。
（可能是要用自定义？）
最后给大家看看效果
敢不敢点开阅读原文啊？
微信扫一扫
关注该公众号
微软最新设计Fluent Design System初体验的更多相关文章
- 流畅设计 Fluent Design System 中的光照效果 RevealBrush，WPF 也能模拟实现啦！
UWP 才能使用的流畅设计效果好惊艳,写新的 UWP 程序可以做出更漂亮的 UI 啦!然而古老的 WPF 项目也想解解馋怎么办? 于是我动手实现了一个! 迫不及待看效果 ▲ 是不是很像 UWP 中 ...
- Microsoft Fluent Design System
转载自:http://www.ui.cn/detail/131217.html 就在刚刚举办的 Microsoft Build 2017 中,微软对外公布了它们最新的设计语言--"Fluen ...
- [UWP]如何使用Fluent Design System (上)
1. 前言 微软在Build 2017中公布了新的设计语言Fluent Design System(以下简称FDS),不过官网只是堆砌了各种华丽的词语以及一堆动画.至于在UWP中要做成怎么样,怎么做, ...
- [UWP]如何使用Fluent Design System (下)
4. 兼容旧版本 FDS最常见的问题之一是如何与Fall Creators Update之前的版本兼容,其实做起来也挺简单的,ColorfulBox就实现了Creators Update与Fall C ...
- 微软How old do I Look——初体验
前段时间微软发布了一个可爱的网站how old.net,着实火了一把,全民体验魔镜魅力. 上传自己的靓照到http://www.how-old.net/,它就可以告诉你性别和年龄,大家还习惯称之为“颜 ...
- 设计系统（Design System），设计和开发之间的“DevOps”
最近,我们网站的上新增了几个新功能,比如通过导航栏的QR Code可以下载App:通过Carousel的方式,显示多条信息. 以往这样的功能可能需要2-3个Sprints完成,但是现在这些功能都是在一 ...
- Qsys 设计流程---Qsys System Design Tutorial
Qsys 设计流程 ---Qsys System Design Tutorial 1.Avalon-MM Pipeline Bridge Avalon-MM Pipeline Bridge在slave ...
- Microsoft IoT Starter Kit 开发初体验
1. 引子 今年6月底,在上海举办的中国国际物联网大会上,微软中国面向中国物联网社区推出了Microsoft IoT Starter Kit ,并且免费开放1000套的申请.申请地址为:http:// ...
- Spring之初体验
Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...
随机推荐
- 关于delete和对象复制
本码农的惯例,开篇废话几句... 前天小生又被虐了... 没办法,作为一个资深code user,我用代码的能力,解决问题的能力自问是不弱的... 但是自身的前端基础说实话还是不过硬,最明显的表现就是 ...
- Django时间与时区设置问题
在Django的配置文件settings.py中,有两个配置参数是跟时间与时区有关的,分别是TIME_ZONE和USE_TZ 如果USE_TZ设置为True时,Django会使用系统默认设置的时区,即 ...
- Redis: under the hood---转载
http://pauladamsmith.com/articles/redis-under-the-hood.html#redis-under-the-hood How does the Redis ...
- vs2015 点击cshtml 后提示 "无效指针" 的解决办法
1. 关闭vs 2. 删除 %LocalAppData%\Microsoft\VisualStudio\14.0\ComponentModelCache 3. 打开vs OK 解决
- 深度为君剖析CTO、技术总监、首席架构师的区别
CTO.技术总监.首席架构师的区别 经常有创业公司老板来拜访我,常常会拜托给我一句话:帮我找一个CTO. 我解释的多了,所以想把这个写下来,看看你到底需要的应该是啥. 一.高级程序员 如果你是一个 ...
- Firebird 安装多实例
火鸟数据库的安装向导,默认不允许多实例. 但是不管出于什么原因,若想安装多实例,很简单. 1.先用安装文件,按照向导安装第一个实例. 2.安装后不要启动服务,根据需要配置好Firebird.conf. ...
- WordPress主题开发：主题初始化
在最简单的情况下,一个WordPress主题由两个文件构成: index.php ------------------主模版 style.css -------------------主样式表(注意 ...
- HDOJ2037 今年暑假不AC （经典的贪心问题）
Description “今年暑假不AC?” “是的.” “那你干什么呢?” “看世界杯呀,笨蛋!” “@#$%^&*%...” 确实如此,世界杯来了,球迷的节日也来了,估计很多ACMer也会 ...
- js中的同步与异步的问题
前言 近来,总是忙于拿js写一些案例,因为是小白,并没有什么丰富的经验,对各个知识点把握也不是很全面,写起来真的是...一言难尽,太痛苦了= =.尤其是在写一些轮播的时候,里面需要用到定时器,而一旦用 ...
- sql: MySQL and Microsoft SQL Server Stored Procedures IN, OUT using csharp code
MySQL存储过程: #插入一条返回值涂聚文注 DELIMITER $$ DROP PROCEDURE IF EXISTS `geovindu`.`proc_Insert_BookKindOut` $ ...