微软最新设计Fluent Design System初体验

微软最新设计Fluent Design System初体验

本文图片不全！建议移步知乎专栏查看！！！

https://zhuanlan.zhihu.com/p/30582886

原创 2017-11-06 MSP-李桑郁 MSPrecious成长荟

微软

在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音乐那么美观。

（可能是要用自定义？）

最后给大家看看效果

敢不敢点开阅读原文啊？

 

 

微信扫一扫
关注该公众号