最新.NET MAUI有什麼驚喜？

MicrosoftReactor發表於2021-10-16
UI

.NET 6 Preview 7 現已釋出啦，我們為 .NET 多平臺應用程式 UI (MAUI) 引入了所有的新佈局。這是效能和可靠性的重大變化。我們很高興我們還增加了一些關於accessibility方面的基於新的SemanticService、字型縮放選項和對Xamarin.Forms 效果的相容性的功能。

d1535ee0aab6ae75d6932458bee918ed.png

新的佈局

到目前為止，你在.NET MAUI中使用的佈局都是Xamarin.Forms佈局,他們知道如何調整渲染器和新的基於控制元件的處理程式的大小和位置。我們開始採用這種方法是為了快速將 UI 放在螢幕上，並集中精力完成我們的 UI 40 控制元件庫，並證明我們能夠與從 Xamarin.Forms 遷移的專案相容。與此同時，我們一直在基於新的 LayoutManager 方法構建優化佈局，利用我們 7 年的 Xamarin.Form 佈局經驗來優化一致性、效能和可維護性。

在這個預覽中，舊的佈局現在只能在Microsoft.Maui.Controls.Compatibility名稱空間中找到，而新的佈局預設是啟用的:

  • 網格佈局
  • 彈性佈局

  • 堆疊佈局

    水平堆疊佈局
    垂直堆疊佈局

堆疊佈局現在包裝了兩個佈局，側重於水平和垂直方向。我們建議您選擇一個適合您的佈局需要。堆疊佈局仍然有一個您可以設定的方向屬性，在某些情況下，當你的自適應佈局根據螢幕大小或裝置習慣改變方向時，這是必要的。

每個佈局都有一個相應的佈局管理器負責測量和定位檢視。Measure方法接受高度和寬度的限制，並負責測量所有佈局的子元素。然後，ArrangeChildren功能根據佈局規則設定每個檢視的大小和位置。對於有些情況，您可以覆蓋佈局的CreateLayoutManager方法，以提供ILayoutManager介面的自定義實現。

您會注意到的即時更新之一是調整了這些佈局上的預設間距值：0。如果您使用過舊版佈局，那麼您已經知道之前在那裡設定的各種不同的任意值。零設定了更明確的期望，並指引您去設定更滿足需求的值。為方便起見，請在全域性樣式中設定這些起始值：

<ResourceDictionary>
    <Style TargetType="StackLayout">
        <Setter Property="Spacing" Value="6"/>
</Style>

    <Style TargetType="Grid">
        <Setter Property="ColumnSpacing" Value="6"/>
        <Setter Property="RowSpacing" Value="6"/>
</Style>
</ResourceDictionary>

絕對佈局和相對佈局現在只存在於相容性名稱空間中，我們建議您仔細考慮是否真的需要使用它們。在可能的情況下，使用上面列出的佈局之一。同時，您可以通過新增新名稱空間併為 XAML 引用新增字首來更新程式碼以使用它們：

<ContentPage
    xmlns:cmp="clr-namespace:Microsoft.Maui.Controls.Compatibility;assembly=Microsoft.Maui.Controls"
    ...
    >
    <cmp:AbsoluteLayout>
        ...
    </cmp:AbsoluteLayout>
</ContentPage>

.NET 升級助手正在針對所有這些更改進行更新，如果在升級過程中沒有為您處理，我們將盡最大努力指導您完成這些更改。

在接下來的衝刺階段，我們將重點關注改進這些新佈局，因此請檢視它們並記錄您在嘗試使用它們時觀察到的任何問題。

網格佈局：
https://docs.microsoft.com/zh...
彈性佈局：
https://docs.microsoft.com/zh...
堆疊佈局：
https://docs.microsoft.com/zh...
絕對佈局：
https://docs.microsoft.com/zh...
相對佈局：
https://docs.microsoft.com/zh...
所有這些更改進行更新：
https://github.com/dotnet/upg...
記錄您在嘗試使用它們時觀察到的任何問題：
https://github.com/dotnet/mau...

可訪問性更改和改進

我們每個月都會與來自不同公司的幾位開發人員會面，這些公司在交付能夠滿足最高可訪問性評級的應用程式方面投入了大量資金。通過這些會議，我們對可訪問性支援做了一些改變和增加，使每個人都能更容易地生產可訪問性應用程式。

1.TabIndex 和 IsTabStop 屬性已移除

Xamarin.Forms 中引入了 TabIndex 和 IsTabStop 屬性，以幫助開發人員控制螢幕閱讀器讀取 UI 元素的順序。在實踐中，他們最終會讓人感到困惑並且無法滿足這種需求。在 .NET MAUI 中，我們建議採用一種深思熟慮的設計方法，按照您希望的方式來排列您的UI，而不是尋找程式設計方式來操作您的介面結構。對於必須控制指令的情況，我們建議使用社群工具包的 SemanticOrderView，該工具在相同的 .NET MAUI 版本中也可以使用。

2.SetSemanticFocus 和 Announce 方法

作為新 SemanticExtensions 類的一部分，我們新增了一個新的 SetSemanticFocus 方法，允許您將螢幕閱讀器焦點移動到特定元素。將此與設定輸入焦點的 VisualElement.Focus 進行比較。

<VerticalStackLayout>
    <Label
        Text="Explore SemanticExtensions below"
        TextColor="RoyalBlue"
        FontAttributes="Bold"
        FontSize="16"
        Margin="0,10"/>
    <Button
        Text="Click to set semantic focus to label below"
        FontSize="14"
        Clicked="SetSemanticFocusButton_Clicked"/>
    <Label
        x:Name="semanticFocusLabel"
        Text="Label receiving semantic focus"
        FontSize="14"/>
</VerticalStackLayout>

private void SetSemanticFocusButton_Clicked(object sender, System.EventArgs e)
{
  semanticFocusLabel.SetSemanticFocus();
}

在Essentials中，我們新增了另一個新方法Announce，它設定螢幕閱讀器要宣佈的文字。例如，單擊按鈕，您可以觸發以下重要資訊來讀取:

void Announce_Clicked(object sender, EventArgs e)
{
  SemanticScreenReader.Announce("Make accessible apps with .NET MAUI");
}

SemanticOrderView：
https://github.com/xamarin/Xa...

字型縮放

所有平臺上的所有控制元件預設都啟用了字型縮放功能。這意味著當你的應用程式使用者在作業系統中調整他們的文字縮放首選項時，你的UI將反映他們的選擇。預設情況下，這會生成一個更容易訪問的應用程式。

5a18ecd49719e63d0459f28446a7db4b.png
每個控制元件都有一個新增的 FontAutoScalingEnabled，它甚至可以與 FontImageSource 一起用於你的字型圖示。設定 FontSize 是你的 100% 大小，並鎖定它，你將設定 FontAutoScalingEnabled="false"。

<VerticalStackLayout>    
    <Label 
        Text="Scaling disabled" 
        FontSize="18"
        FontAutoScalingEnabled="False"/>
    <Label 
        Text="Scaling enabled" 
        FontSize="18"/>
</VerticalStackLayout>

請務必檢視您的螢幕並根據需要調整樣式，以確保它們適用於所有尺寸。

其他亮點

在這個版本中還增加了幾個值得注意的內容。

我們增加了對Effects的支援，它將支援從Xamarin.Forms升級的專案#1574。
Effects：
https://docs.microsoft.com/zh...
1574：
https://github.com/dotnet/mau...

對AppThemeBinding的改進，支援深色和淺色主題模式#1657。
1657：
https://github.com/dotnet/mau...

滾動檢視處理程式#1669。
1669：
https://github.com/dotnet/mau...

Android Shell移植到core #979。
979：
https://github.com/dotnet/mau...

Shell導航傳遞複雜物件#204。
204：
https://github.com/dotnet/mau...

Visual Tree Helper新增了XAML熱過載#1845。
1845：
https://github.com/dotnet/mau...

切換到System.ComponentModel.TypeConverter #1725。
1725：
https://github.com/dotnet/mau...

Window生命週期事件#1754。
1754：
https://github.com/dotnet/mau...

頁面導航事件#1812。
1812：
https://github.com/dotnet/mau...

CSS字首更新為-maui #1877。
1877：
https://github.com/dotnet/mau...

對於一組完整的更改，請檢視分支比較。
分支比較：
https://github.com/dotnet/mau...

現在開始

首先，安裝 .NET 6 Preview 7。接下來使用 maui-check 新增 maui 工作負載。還要確保您已更新到 Visual Studio 2022 的最新預覽版。

在Visual Studio 2022的未來版本中，MAUI將與其他工作負載一起安裝。現在，我們建議您通過命令列安裝所有需要的元件。

準備好了嗎?開啟Visual Studio 2022預覽3並建立一個新專案。搜尋並選擇.NET MAUI。

e1eb6b695c5fc48c3af18a737f36a2de.png有關 .NET MAUI 入門的其他資訊，請參閱我們的文件。

歡迎反饋

Visual Studio 2022 預覽版正在快速啟用 .NET MAUI 的新功能。當您在除錯、部署和編輯器相關體驗方面遇到任何問題時，請使用“幫助”>“傳送反饋”選單報告您的體驗。

目前，我們也正在對 Visual Studio 2022中最新 Windows 應用程式 SDK 單專案 MSIX 擴充套件 和.NET MAUI進行最後的故障排除，以解決除錯失敗的問題。您可以直接成功部署 Windows 應用程式並從“開始”選單執行它。

請通過在 GitHub 上的 dotnet/maui 與我們互動，讓我們瞭解您使用 .NET MAUI Preview 7 建立新應用程式的體驗。

如果想了解未來的版本，請訪問我們的產品路線圖，如果想了解特性的完整性，請訪問我們的狀態wiki。

單專案 MSIX 擴充套件：
https://marketplace.visualstu...
dotnet/maui：
https://github.com/dotnet/maui
產品路線圖：
https://github.com/dotnet/mau...
狀態wiki：
https://github.com/dotnet/mau...

這裡有更多微軟官方學習資料和技術文件，掃碼獲取免費版！
內容將會不定期更新哦！
208f6785e4bc3f899ded709a80dff426.jpg

相關文章