微軟最新設計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音樂那么美觀。
（可能是要用自定義？）
最后給大家看看效果
敢不敢點開閱讀原文啊？
微信掃一掃
關注該公眾號