背景
Windows 11帶來了全新設計的開始菜單、任務欄、設置、資源管理器、搜索、側邊工具欄、微軟商店,並且自內測以來,微軟對內置的應用陸續進行了更新,包括畫圖、記事本、計算器、鬧鐘和時鐘、照片、截圖和草圖、電影和電視。
他們都有一個共同的特徵,披上了Windows 11新流暢設計外衣,大幅提高了Windows應用的審美高度。
通過App Packager Viewer這個小工具,我們可以清晰地查看到他們的背後都依賴了一個包爲Microsoft.UI.Xaml.2.x
WinUI,是Windows GUI解決方案進化的產物
它並非騰空而出,而是脫胎於微軟打磨了6年之久的Windows通用應用平臺,常簡稱爲UWP。
UWP是伴隨Windows 10操作系統發佈的面向Windows終端設備的通用應用開發解決方案,新的通用平臺允許新類型的Windows10通用應用真正實現一次編寫、一套業務邏輯和統一的用戶界面。
應用在統一的Win10商店中將只會有一個安裝包,而它將適用於所有Win10設備。
從Windows 10 v1809開始,微軟將UWP技術的UX框架剝離出來將原有的“UWP + Windows SDK”的組合,進化成“Windows SDK + Windows App SDK + WinUI”的組合。
WinUI現在是桌面應用和通用應用共同的UX框架,通過將流暢設計系統整合到所有體驗、控件和樣式中,使用最新的用戶界面模式提供一致、直觀且可訪問的體驗。
發行
https://docs.microsoft.com/zh-cn/windows/apps/winui/winui2/release-notes/
WinUI包括兩個NuGet包:
- Microsoft.UI.Xaml:適用於UWP應用的控件和FluentDesign。這是主WinUI包。
- Microsoft.UI.Xaml.Core.Direct:用在中間件組件中的低級別API。
實踐
https://docs.microsoft.com/zh-cn/windows/apps/winui/winui2/getting-started
創建解決方案HelloWinUI2
dotnet new sln -o HelloWinUI2
cd .\HelloWinUI2\
創建UWP項目demoForWinUI2
explorer.exe .
選擇C#
語言-Windows
平臺-UWP
類型,選中空白應用(通用Windows)
模板,創建名爲demoForWinUI2
的項目。
如果你打算使用Microsoft.UI.Xaml v2.7包,那麼最低版本要求 >=
10.0.15063.0
,目標版本要求 >=10.0.18362.0
所以這裏我們最低版本選15063
,目標版本就選看到的最高版本19041
了。
創建成功
運行一次
安裝WinUI的Nuget包
截止到寫作時,最新穩定版是v2.7,預覽版到了v2.8了
dotnet add package Microsoft.UI.Xaml
這種DotNet-CLI的方式暫時對UWP還不支持哈,放棄。
Install-Package Microsoft.UI.Xaml
或者在demoForWinUI2
項目上右鍵,選擇"管理Nuget程序包",直接搜索Microsoft.UI.Xaml
進行安裝吧。
安裝完畢之後,我們會看到多了一個包Microsoft.UI.Xaml
,還有個叫Microsoft.UI.Xaml.Markup
的winmd
組件依賴,它位於"Windows SDK 10.0.19041.0"裏面。
根據使用指引,我們還需要把WinUI的主題資源加到UWP項目裏面來,我們打開App.xaml
,把Microsoft.UI.Xaml.Controls
的Xaml控件資源加載進來。
<Application
x:Class="demoForWinUI2.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:demoForWinUI2">
<Application.Resources>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
</Application.Resources>
</Application>
如果你已經有其他資源了,應該使用MergedDictionaries
來添加,舉例爲:
<Application
x:Class="ExampleApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<ResourceDictionary Source="/Styles/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
通過我們需要把
Microsoft.UI.Xaml.Controls
的Xaml控件資源放在多組自定義樣式資源的最前面,因爲Xaml的加載機制會按順序覆蓋同Key的資源的,這樣可以避免其他自定義資源被覆蓋掉。
在.xaml.cs
文件中,如果需要使用到Microsoft.UI.Xaml
的資源,需要引入Using項:
using MUXC = Microsoft.UI.Xaml.Controls;
在.xaml
文件中,如果需要使用到Microsoft.UI.Xaml
的資源,需要引入Xml項:
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
使用WinUI樣式Mica
https://docs.microsoft.com/zh-cn/windows/apps/design/style/mica
在Windows 11上新增了一種雲母(Mica) 材質,它通過提取用戶桌面背景的顏色來獲取顏色,適合作爲應用背景來增加沉浸感。
在UWP裏面,基於Microsoft.UI.Xaml
包啓用雲母(Mica) 材質非常簡單,它實際上是一直存在的底層背景,我們只需要告訴應用,讓它呈現出來即可。
打開MainPage.xaml
,在Page
在根節點指定BackdropMaterial.ApplyToRootOrPageBackground
屬性爲True
<Page
x:Class="demoForWinUI2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:demoForWinUI2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
muxc:BackdropMaterial.ApplyToRootOrPageBackground="True"
>
<Grid>
</Grid>
</Page>
運行看看效果,哈,果然是想要的效果。