微软最新设计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音乐那么美观。

（多是要用自定义？）

 

最后给你们看看效果

 

 

敢不敢点开阅读原文啊？

 

 

 

微信扫一扫关注该公众号