.NET MAUI Preview 5 功能预览

虽然Microsoft Build才刚过去不久，但我们在这里会继续分享我们在.NET多平台应用程序 UI (.NET MAUI) 的持续进展。在此版本中，我们启用了动画和视图转换，完成了多个 UI 组件的移植，并对单个项目模板进行了改进。
我们还发布了第一批涵盖 .NET MAUI 介绍和基础方面的预览文档：https://docs.microsoft.com/en-us/dotnet/maui/。

动画

在 .NET MAUI 中有几种执行动画的方法，其中最简单的方法是使用视图扩展方法，例如 FadeTo、RotateTo、ScaleTo、TranslateTo 等。在以下示例中，我使用新的 HandlerAttached 事件获取对每个绑定到布局的视图的引用（请参阅可绑定布局）：

<DataTemplate x:Key="FavouriteTemplate">
    <Frame
        AttachedHandler="OnAttached"
        Opacity="0">
        ...
</Frame>

<FlexLayout
BindableLayout.ItemTemplate="{StaticResource FavouriteTemplate}"
BindableLayout.ItemsSource="{Binding Favorites}"
 >
...
</FlexLayout>

当页面出现时，我会以略微交错的方式对视图进行动画处理，以创建漂亮的级联效果。

public partial class FavoritesPage : ContentPage
{
 List<Frame> tiles = new List<Frame>();
void OnAttached(object sender, EventArgs e)
{
  Frame f = (Frame)sender;
tiles.Add(f);
}
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);
   }
}    
}

如需更完整的视图动画编排，请查看自定义动画文档，该文档演示了添加多个可以并行运行的子动画。
您可以从 GitHub 上的 WeatherTwentyOne 项目查看和运行此示例的源代码。

用户界面组件

在此版本中，几个控件现在已将所有属性和事件从 Xamarin.Forms 的渲染器体系结构移植到处理程序，包括 ActivityIndicator、CheckBox、Image 和 Stepper。 在之前的预览版中，您需要检查是否移植了控件并从兼容包中为不可用的渲染器注册渲染器。 在 .NET MAUI Preview 5 中，我们通过更新 UseMauiApp 扩展（请参阅 Startup wiki）为您连接所有控件，无论它们是基于处理程序还是渲染器，使这变得更加容易。

Preview 5 中的另一个新功能是首次引入 Shell，它是一个应用程序容器，可提供 URI 导航和实现弹出菜单,选项卡的快速方法。 首先，将 Shell 作为根元素添加到 App.xaml.cs 中的窗口中。 我遵循的典型模式是将其命名为“AppShell”，但您可以随意命名。

protected override IWindow CreateWindow(IActivationState activationState)
{
    return new Microsoft.Maui.Controls.Window(
        new AppShell()
    );
}

现在，在您的 AppShell 类中，开始使用代表您希望显示的导航的类型（FlyoutItem 或 Tab）使用内容填充菜单。 这些不是 UI 控件，而是代表将创建这些 UI 控件的类型。 您可以稍后使用我们将在Preview 6 中介绍的内容模板来设置控件的样式。

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:pages="clr-namespace:ControlGallery.Pages"
       Title="ControlGallery"
       x:Class="ControlGallery.AppShell">

    <FlyoutItem Title="Margin and Padding">
        <ShellContent Route="marginpadding" 
                      ContentTemplate="{DataTemplate pages:ControlsPage}" />
    </FlyoutItem>

    <FlyoutItem Title="ActivityIndicator">
        <ShellContent Route="activityindicator" 
                      ContentTemplate="{DataTemplate pages:ActivityIndicatorPage}" />
    </FlyoutItem>

    ...

</Shell>

在我们的 .NET MAUI 状态页面上获取有关控件、布局和功能的最新信息。

单个项目模板更新

我们在此版本中取得了进展，将多个 WinUI 项目合并为一个。 现在，当您创建一个新的maui项目时，您将看到两个项目：多目标 .NET MAUI 项目和 WinUI 项目。

现在要运行WinUI项目，您就不会对选择哪个项目感到困惑了。这是朝着只有一个项目可以构建并部署到所有支持平台的最终愿景迈进了一步。为了支持这个功能，你需要在Visual Studio 16.11 Preview 2中安装这些Project Reunion 0.8 (Preview)扩展。

• Project Reunion(预览)扩展
• 单项目MSIX打包工具(预览)

.NET MAUI 预览版 5 入门

在此版本中，我们启用了在不添加自定义 NuGet 源的情况下还原您的项目。只需创建一个新项目并运行它！要获取所有最新内容，我们继续建议运行 maui-check dotnet 工具。
安装：

$ dotnet tool install -g redth.net.maui.check

现在运行并遵循更新以获取 .NET 6 Preview 5、平台 SDK、.NET MAUI、项目模板，甚至检查您的环境是否存在第三方依赖项。

$ maui-check

如果您希望自己一步一步来，您可以按照这些说明单独安装所有内容。
安装后，您就可以基于Preview 5 模板创建新应用程序了。

$ dotnet new maui -n MauiFive

在 Visual Studio 16.11 Preview 1 中打开您的新 MauiFive.sln 并运行您选择的平台！

注意：如果您之前安装了 .NET 6 Preview 4（直接或通过安装 .NET MAUI），那么您可能会在安装和运行 .NET 6
Preview 5 时遇到问题。有关如何修复的说明，请参阅 .NET 6 已知问题安装。

渴望尝试Visual Studio 2022 Preview1吗?开始探索移动平台使用安卓模拟器或者远程iOS设备，或连接Mac主机。确保禁用XAML热重载以避免类型错误，或坚持使用Visual Studio 2019版本16.11 Preview 2.2。
在未来，Project Reunion扩展将支持Visual Studio 2022，你将能够使用Windows上的所有平台。
如果你已经有了 .NET MAUI项目,想要迁移到Preview 5，我建议你创建一个像上面那样的新项目，并将你的文件复制到多目标项目中，这样你就可以避免协调WinUI项目的麻烦。
有关使用.NET MAUI的更多信息，请参考我们新的文档网站。

欢迎反馈

请让我们知道您使用.NET MAUI Preview 5创建新的应用程序的经验，通过在dotnet/ MAUI GitHub上与我们合作。
要了解未来版本中将要发布的内容，请访问我们的产品路线图。
有任何技术问题，请在 Microsoft Q&A 上提问。