乘風破浪,遇見最美Windows 11之現代Windows桌面應用開發 - 探索WinUI 2.x系列

背景

Windows 11帶來了全新設計的開始菜單、任務欄、設置、資源管理器、搜索、側邊工具欄、微軟商店,並且自內測以來,微軟對內置的應用陸續進行了更新,包括畫圖、記事本、計算器、鬧鐘和時鐘、照片、截圖和草圖、電影和電視。

image

他們都有一個共同的特徵,披上了Windows 11新流暢設計外衣,大幅提高了Windows應用的審美高度。

image

通過App Packager Viewer這個小工具,我們可以清晰地查看到他們的背後都依賴了一個包爲Microsoft.UI.Xaml.2.x

WinUI,是Windows GUI解決方案進化的產物

它並非騰空而出,而是脫胎於微軟打磨了6年之久的Windows通用應用平臺,常簡稱爲UWP

UWP是伴隨Windows 10操作系統發佈的面向Windows終端設備的通用應用開發解決方案,新的通用平臺允許新類型的Windows10通用應用真正實現一次編寫、一套業務邏輯和統一的用戶界面。
應用在統一的Win10商店中將只會有一個安裝包,而它將適用於所有Win10設備。

image

Windows 10 v1809開始,微軟將UWP技術的UX框架剝離出來將原有的“UWP + Windows SDK”的組合,進化成“Windows SDK + Windows App SDK + WinUI”的組合。

WinUI現在是桌面應用和通用應用共同的UX框架,通過將流暢設計系統整合到所有體驗、控件和樣式中,使用最新的用戶界面模式提供一致、直觀且可訪問的體驗。

image

發行

https://docs.microsoft.com/zh-cn/windows/apps/winui/winui2/release-notes/

image

WinUI包括兩個NuGet包:

實踐

https://github.com/TaylorShi/HelloWinUI2.x

https://docs.microsoft.com/zh-cn/windows/apps/winui/winui2/getting-started

創建解決方案HelloWinUI2

dotnet new sln -o HelloWinUI2
cd .\HelloWinUI2\

image

創建UWP項目demoForWinUI2

explorer.exe .

image

image

選擇C#語言-Windows平臺-UWP類型,選中空白應用(通用Windows)模板,創建名爲demoForWinUI2的項目。

image

image

如果你打算使用Microsoft.UI.Xaml v2.7包,那麼最低版本要求 >= 10.0.15063.0,目標版本要求 >= 10.0.18362.0

所以這裏我們最低版本選15063,目標版本就選看到的最高版本19041了。

image

創建成功

image

運行一次

image

安裝WinUI的Nuget包

https://www.nuget.org/packages/Microsoft.UI.Xaml

截止到寫作時,最新穩定版是v2.7,預覽版到了v2.8了

image

dotnet add package Microsoft.UI.Xaml

這種DotNet-CLI的方式暫時對UWP還不支持哈,放棄。

image

Install-Package Microsoft.UI.Xaml

或者在demoForWinUI2項目上右鍵,選擇"管理Nuget程序包",直接搜索Microsoft.UI.Xaml進行安裝吧。

image

安裝完畢之後,我們會看到多了一個包Microsoft.UI.Xaml,還有個叫Microsoft.UI.Xaml.Markupwinmd組件依賴,它位於"Windows SDK 10.0.19041.0"裏面。

image

根據使用指引,我們還需要把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

image

在Windows 11上新增了一種雲母(Mica) 材質,它通過提取用戶桌面背景的顏色來獲取顏色,適合作爲應用背景來增加沉浸感。

image

在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>

運行看看效果,哈,果然是想要的效果。

image

參考

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章