微软最新设计Fluent Design System初体验
本文图片不全!建议移步知乎专栏查看!!!
https://zhuanlan.zhihu.com/p/30582886
微软
![](https://i-blog.csdnimg.cn/blog_migrate/fa177b6a7e1661e4808378d661d2c3e7.jpeg)
在1709这次秋季创意者大更新中,微软终于将Fluent Design System做的像模像样了。之前只有部分,例如计算器、照片等App有FDS的影子,现在设置也有了。使得大家Windows10愈发的漂亮了(以前很丑)
Fluent Design System是微软最新的设计,是“一套基于平面化的、创新的、标准化的、自洽的设计逻辑”。
![](https://i-blog.csdnimg.cn/blog_migrate/e91ca9542ac42538eabc5e22a632326a.jpeg)
本质上与以前因苹果而流行起来的物化设计或者win8之后的平面化设计一样,都是一种设计风格+交互逻辑。(交互成分是次要的,满足审美需求是主要目的)
—— https://www.zhihu.com/question/59724483
而我认为初期的FDS就是亚克力材质与像手电筒一样的光照
![](https://i-blog.csdnimg.cn/blog_migrate/a15bb6ac51e50aa09a9c7348aa8849e1.jpeg)
昨晚(2017/10/29)我试着将自己之前做的一个图书馆查书的UWP,改了下样式,看看FDS到底怎么样。
实施步骤:
1.我先上官网看了下
https://fluent.microsoft.com/
2.看到上面有设计资源,转到了https://developer.microsoft.com/zh-cn/windows/apps/design
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
3.可以看到上来就是添加亚克力材料,话不多说我们上来就加!
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
4.前面有非常啰嗦的介绍,想知道亚克力是干嘛的你就看看,不想看,咱就翻到红色标记的地方,直接上代码。
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
睁大眼睛!醒醒!就是这一行!就可以了!快试试!
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
5.将Background修改后你会发现,你的窗口透明了。不太满意您先别急,这里还有很多默认的样式。
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
如果你想自定义透明度等设置,可以看看下面的内容
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
7.把标题栏也干掉
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
8.好了,这页基本讲完了。我们可以看到文尾有讲显示(Reveal)的,是教你把Button等控件加上手电筒效果的。
https://docs.microsoft.com/zh-cn/windows/uwp/style/reveal
这里给大家放一个CommandBar的
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
9.在我看Reveal的时候我还注意到自动使用的控件。所以我索性直接用了NavigationView(NavigationView真是好东西,懒人福音)
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
10.NavigationView大致细分为三个部分 - 左侧是用于导航的窗格,右侧是标题和内容区域
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
文档的这些地方非常重要一定要好好看
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
然后文档还说了怎么使用NavigationView
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
可以说是非常详细了。什么?你不会?给我复制粘贴上去就行!
11.给大家说几个坑(个人情况)
代码里在NavigationView加载的时候,Add了NavigationViewItem有点问题,所以大家直接注释掉。
直接在布局里写
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
而xaml.cs里只用下面的Invoked就可以。
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
这个Invoked也有点问题,它读不到Tag,所以我直接用的Content。
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
还有一点是Item的高度不够,我修改不了,做不到Groove音乐那么美观。
(可能是要用自定义?)
最后给大家看看效果
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c2a1f59e3d88ce76a2feb3760598b88c.png)
敢不敢点开阅读原文啊?
![](https://i-blog.csdnimg.cn/blog_migrate/8a02730ad5f65291c1e18ee75e96b91a.png)
微信扫一扫
关注该公众号