微软最新设计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音乐那么美观。
（可能是要用自定义？）
最后给大家看看效果
敢不敢点开阅读原文啊？
微信扫一扫
关注该公众号