.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	✅	✅	✅