.NET MAUI Preview5 狀態預覽(6月)

MAUI Preview5

2021年06月17號, 微軟發布了最新的MAUI Preview5, 下面將主要介紹本次得更新內容。

本次更新內容

1.完成了多個UI組件的移植工作
說明: 下面會詳細介紹本次與上次的更新差異, 在官方文檔中, 微軟特意強調了本次即將完成的UI組件移植工作,
例如: CheckBox、Image、Stepper、Button等。

2.單項目模板更新(WinUI整合至一個項目)

• 上個版本
  

• 本次版本
  

說明: 之前運行WinUI項目, 有老鐵選擇第二個項目運行會發現報錯, 現在你總不會困惑了吧？當然,在最終的版本中, WinUI會被徹底消除,
即保留一個項目用來構建並且部署到所有支持的平台。

3.動畫移植
如果大家使用過Xamarin, 應該會比較熟悉這個東西, 本次更新同樣帶來了部分動畫的移植, 如下所示:

• FadeTo
• RotateTo
• ScaleTo
• TranslateTo
  說明: ViewExtensions 類提供了可用於構建簡單動畫的擴展方法。
  動畫文檔(此處引用Xamarin動畫文檔即可):
  https://docs.microsoft.com/zh-cn/xamarin/xamarin-forms/user-interface/animation/simple

4.Shell容器
在Xamarin當中已經有了Shell, 不出意外本次更新也是添加了對Shell的支持。

演示

為了能夠清楚的了解本次的幾個更新, 下面通過運行官方的案例來查看本次更新內容：
1.動畫
通過演示的代碼中, 我們可以看到在OnAppearing函數中調用了TransitionIn方法然后循環了所有Frame調用擴展方法FadeTo動畫, 如下所示:

        protected override async void OnAppearing()
        {
            base.OnAppearing();
            await Task.Delay(300);
            TransitionIn();
        }

        async void TransitionIn()
        {
            foreach (var item in tiles)
            {
                item.FadeTo(1, 800);
                await Task.Delay(50);
            }
        }

說明: 上面有講到, 這些動畫本質上是移植了Xamarin的部分, 這些動畫都是ViewExtensions的擴展方法, 如下所示:

通過查看擴展方法我們可以了解到一些基本信息, 然后我們修改一些動畫行為, 來測試一下實際效果, 如下所示:

• 淡入淡出動畫
  

• 旋轉動畫
  

• 縮放動畫
  

2.UI組件

3.WinUI項目合並

除了簡化的、共享的單個項目外，還對VisualStudio進行了更改，以支持單個項目。這些更改將啟用單個項目中的共享資源文件、用於平台特定開發的平台文件以及用於運行.NET MAUI 應用程序的簡化調試目標選擇：

關於自定義控制

MAUI提供可用於顯示數據、操作、指示活動、顯示集合、拾取數據等的控件集合。默認情況下，處理程序將這些跨平台控件映射到每個平台上的原生控件。
例如，在iOS上, .NET MAUI處理程序將映射到 iOS 的 .NET MAUI。在Andorid上，將映射為：Button UIButton Button AppCompatButton

處理程序可以通過 .NET MAUI 提供的特定於控制的界面訪問，例如。這避免了跨平台控制必須參考其處理程序，並且處理程序必須參考跨平台控制。跨平台控制 API 到平台 API 的映射由映射器提供。IButtonButton

如何查看並且運行MAUI示例項目

參考: https://devblogs.microsoft.com/dotnet/announcing-net-maui-preview-5/
官方文檔: https://docs.microsoft.com/zh-cn/dotnet/maui/what-is-maui

Preview5 UI組件更新一覽

✅ CheckBox
Preview4

API	Android	iOS / Mac Catalyst	Windows
Color	⚠️	⚠️	⚠️
CheckedChanged	✅	✅	✅
IsChecked	✅	✅	✅

Preview5

API	Android	iOS / Mac Catalyst	Windows
Color	✅	✅	✅
CheckedChanged	✅	✅	✅
IsChecked	✅	✅	✅

⚠️ DatePicker
Preview4

API	Android	iOS / Mac Catalyst	Windows
BackgroundColor	✅	✅	⚠️
CharacterSpacing	✅	✅	✅
Date	✅	✅	✅
DateSelected	✅	✅	✅
FontAttributes	✅	✅	✅
FontFamily	✅	✅	✅
FontSize	✅	✅	✅
Format	✅	✅	✅
MaximumDate	✅	✅	✅
MinimumDate	✅	✅	✅
TextColor	✅	✅	⚠️

Preview5

API	Android	iOS / Mac Catalyst	Windows
BackgroundColor	✅	✅	✅
CharacterSpacing	✅	✅	✅
Date	✅	✅	✅
DateSelected	✅	✅	✅
FontAttributes	✅	✅	✅
FontFamily	✅	✅	✅
FontSize	✅	✅	✅
Format	✅	✅	✅
MaximumDate	✅	✅	✅
MinimumDate	✅	✅	✅
TextColor	✅	✅	⏳

⚠️ Editor
Preview4

API	Android	iOS / Mac Catalyst	Windows
AutoSize	⚠️	⚠️	⚠️
Completed	✅	✅	✅
CharacterSpacing	✅	✅	⚠️
FontAttributes	✅	✅	✅
FontFamily	✅	✅	✅
FontSize	✅	✅	✅
IsReadOnly	✅	✅	⏳
IsTextPredictionEnabled	✅	✅	⚠️
PlaceHolder	✅	✅	⚠️
PlaceHolderColor	✅	✅	⚠️
Text	✅	✅	⏳
TextColor	✅	✅	⚠️
MaxLength	✅	✅	✅

Preview5

API	Android	iOS / Mac Catalyst	Windows
AutoSize	⏳	⏳	⏳
Completed	✅	✅	✅
CharacterSpacing	✅	✅	⏳
FontAttributes	✅	✅	✅
FontFamily	✅	✅	✅
FontSize	✅	✅	✅
IsReadOnly	✅	✅	⏳
IsTextPredictionEnabled	✅	✅	⚠️
PlaceHolder	✅	✅	⚠️
PlaceHolderColor	✅	✅	⚠️
Text	✅	✅	⏳
TextColor	✅	✅	⚠️
MaxLength	✅	✅	✅

⚠️ Entry
Preview4

API	Android	iOS / Mac Catalyst	Windows
ClearButtonVisibility	✅	✅	⚠️
CharacterSpacing	✅	✅	⚠️
Completed	⏳	⏳	⏳
CursorPosition	⚠️	⚠️	⚠️
FontAttributes	✅	✅	⚠️
FontFamily	✅	✅	⚠️
FontSize	✅	✅	⚠️
HorizontalTextAlignment	✅	✅	⚠️
IsTextPredictionEnabled	✅	✅	⚠️
IsPassword	✅	✅	⏳
PlaceHolder	✅	✅	✅
PlaceHolderColor	⚠️	⚠️	⚠️
VerticalTextAlignment	⏳	⏳	⚠️
ReturnCommand	⚠️	⚠️	⚠️
ReturnCommandParameter	⚠️	⚠️	⚠️
ReturnType	✅	✅	⏳
SelectionLength	⚠️	⚠️	⚠️
Text	✅	✅	✅
TextColor	✅	✅	⚠️

Preview5

API	Android	iOS / Mac Catalyst	Windows
ClearButtonVisibility	✅	✅	⏳
CharacterSpacing	✅	✅	⏳
Completed	⏳	⏳	⏳
CursorPosition	✅	✅	⚠️
FontAttributes	✅	✅	✅
FontFamily	✅	✅	✅
FontSize	✅	✅	✅
HorizontalTextAlignment	✅	✅	⚠️
IsTextPredictionEnabled	✅	✅	⚠️
IsPassword	✅	✅	⏳
PlaceHolder	✅	✅	✅
PlaceHolderColor	⚠️	⚠️	⚠️
VerticalTextAlignment	⏳	⏳	⚠️
ReturnCommand	⚠️	⚠️	⚠️
ReturnCommandParameter	⚠️	⚠️	⚠️
ReturnType	✅	✅	⏳
SelectionLength	✅	✅	⚠️
Text	✅	✅	✅
TextColor	✅	✅	✅

⚠️ SearchBar
Preview4

API	Android	iOS / Mac Catalyst	Windows
BackgroundColor	✅	✅	⚠️
CharacterSpacing	✅	✅	⏳
CancelButtonColor	⚠️	⚠️	⚠️
FontAttributes	✅	✅	⚠️
FontSize	✅	✅	⚠️
HorizontalTextAlignment	✅	✅	⚠️
MaxLength	✅	✅	⏳
SearchCommand	⚠️	⚠️	⚠️
SearchCommandParameter	⚠️	⚠️	⚠️
Text	✅	✅	⏳
TextColor	✅	✅	⚠️
VerticalTextAlignment	⚠️	⚠️	⚠️

Preview5

API	Android	iOS / Mac Catalyst	Windows
BackgroundColor	✅	✅	⚠️
CharacterSpacing	✅	✅	⏳
CancelButtonColor	⏳	⏳	⏳
FontAttributes	✅	✅	⚠️
FontSize	✅	✅	⚠️
HorizontalTextAlignment	✅	✅	⚠️
MaxLength	✅	✅	⏳
SearchCommand	⚠️	⚠️	⚠️
SearchCommandParameter	⚠️	⚠️	⚠️
Text	✅	✅	✅
TextColor	✅	✅	⚠️
VerticalTextAlignment	⚠️	⚠️	⚠️

⚠️ Shapes
Preview4

API	Android	iOS / Mac Catalyst	Windows
Fill	⏳	⏳	⚠️
Stroke	⏳	⏳	⚠️
StrokeDashArray	⏳	⏳	⚠️
StrokeDashOffset	⏳	⏳	⚠️
StrokeLineCap	⏳	⏳	⚠️
StrokeLineJoin	⏳	⏳	⚠️
StrokeMiterLimit	⏳	⏳	⚠️
StrokeThickness	⏳	⏳	⚠️

Preview5

API	Android	iOS / Mac Catalyst	Windows
Fill	⏳	⏳	⏳
Stroke	⏳	⏳	⏳
StrokeDashArray	⏳	⏳	⏳
StrokeDashOffset	⏳	⏳	⏳
StrokeLineCap	⏳	⏳	⏳
StrokeLineJoin	⏳	⏳	⏳
StrokeMiterLimit	⏳	⏳	⏳
StrokeThickness	⏳	⏳	⏳

⚠️ Slider
Preview4

API	Android	iOS / Mac Catalyst	Windows
DragCompleted	✅	✅	✅
DragCompletedCommand	✅	⚠️	✅
DragStarted	✅	✅	✅
DragStartedCommand	✅	✅	✅
Maximum	✅	✅	✅
MaximumTrackColor	✅	✅	✅
Minimum	✅	✅	✅
MinimumTrackColor	✅	✅	✅
ThumbColor	✅	✅	⚠️
Value	✅	✅	✅
ValueChanged	✅	✅	✅

Preview5

API	Android	iOS / Mac Catalyst	Windows
DragCompleted	✅	✅	✅
DragCompletedCommand	✅	✅	✅
DragStarted	✅	✅	✅
DragStartedCommand	✅	✅	✅
Maximum	✅	✅	✅
MaximumTrackColor	✅	✅	✅
Minimum	✅	✅	✅
MinimumTrackColor	✅	✅	✅
ThumbColor	✅	✅	⏳
ThumbImageSource	⏳	⏳	⏳
Value	✅	✅	✅
ValueChanged	✅	✅	✅

✅ View Transforms
Preview4

Feature	Android	iOS / Mac Catalyst	Windows
View Transforms	⏳	⏳	⏳

Preview5

Feature	Android	iOS / Mac Catalyst	Windows
View Transforms	✅	✅	✅