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