MAUI候选版本3发布啦

技术分享 3年前 (2022-05-19) 0 999+

我们很高兴发布.NET 多平台应用程序UI (.NET MAUI) 候选版本3，这个版本包含一系列新的改进。与以前的候选版本一样，RC3 包含在"上线"支持政策中，这意味着Microsoft 为您的MAUI生产应用程序提供技术支持。

要开始使用.NET MAUI，请安装或升级到最新的Visual Studio 2022 预览版并选择".NET 多平台应用程序UI 开发"工作负载。这将安装您需要的所有.NET 6 组件，并启用预览功能以使您的.NET MAUI 开发体验更加高效。

有关将Xamarin 库迁移到.NET 6 和.NET MAUI 的指导，请查看 Xamarin 博客上的这些提示

专注于导航

.NET MAUI 为您提供了两种在应用程序中实现导航的主要方法。最简单但功能强大的选项是通过Shell来运行您的应用程序，Shell加强了针对桌面和移动模式的优化。第二种选择是直接使用基本导航页面控件： FlyoutPage、 TabbedPage 和 NavigationPage。

	Shell	Base Controls
Flyout	Yes	Yes
Tabs	Yes	Yes
Navigation	URI Based	Push/Pop
Passing Data	URI Based	View Models
Template-able	Yes	No

您应该用什么呢？.NET MAUI 新项目模板实现了Shell并提供了优化的体验，因此我们建议您从该模板开始。如果将来您想更换特定控件，您仍然可以重用所有UI。Shell是一个UI 控件，用于托管您的应用程序页面并提供弹出菜单和选项卡菜单。

模板项目包含一个带有单个页面的"AppShell.xaml"，它被分配给了App.MainPage，为了更好的看到Flyout控件的效果，并简单的添加更多的页面，只需开启flyout通过更改.App.MainPageShell.FlyoutBehavior

<Shell     x:Class="MauiApp2.AppShell"     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"     xmlns:local="clr-namespace:MauiApp2"     Shell.FlyoutBehavior="Flyout">      <ShellContent         Title="Home"         ContentTemplate="{DataTemplate local:MainPage}"         Route="MainPage" />      <ShellContent         Title="Items"         ContentTemplate="{DataTemplate local:ItemsPage}"         Route="ItemsPage" />  </Shell>

ShellContent使您能够描述用于导航的URI 路由，并使用数据模板以便按需加载页面以保持启动性能。更明确地说，您可以将ShellContent导航别名包装起来，以清楚地指示Shell 如何呈现您的UI。

<FlyoutItem Title="Home" FlyoutIcon="home.png">     <ShellContent ...> </FlyoutItem>  <FlyoutItem Title="Items" FlyoutIcon="store.png">     <ShellContent ...> </FlyoutItem>

Shell 支持Flyout控件的许多自定义，包括设置背景样式、覆盖内容的背景、模板页眉、页脚、整个内容或仅菜单项。您还可以设置弹出按钮的宽度并使其保持打开或完全隐藏。以下是一些不同设计的示例：

要显示选项卡，您只需替换FlyoutItem为Tab. 要对选项卡集合进行分组，您可以将它们进一步包装在TabBar. 根据需要混合和匹配应用程序的页面，并将Shell为您完成所有导航。

有关自定义flyout的更多信息，请查看Shell Flyout文档。

当您需要导航到应用程序中更深入的页面时，您可以声明自定义路由，并通过URI 导航——甚至传递查询字符串参数。

// declare a new route Routing.RegisterRoute(nameof(SettingsPage), typeof(SettingsPage));  // execute a route await Shell.Current.GoToAsync(nameof(SettingsPage));  // execute a route passing data await Shell.Current.GoToAsync($"{nameof(SettingsPage)}?setting=appearance");  // receive querystring value [QueryProperty(nameof(SelectedSubSection), "setting")] public partial class TipsPage : ContentPage {     ...     public string SelectedSubSection { get;set;}     ... }

除了参数之外，您还可以通过.NET MAUI 引入的新API 传递复杂的数据对象：

// execute a route passing full object var person = new Person { Name="James" }; await Shell.Current.GoToAsync("DetailsPage", new Dictionary<string, object> {     { "person", person } });  // received the object [QueryProperty(nameof(Person), "person")] public partial class DetailsPage : ContentPage {     Person person;     public Person Person     {         get => person;         set => person = value;     } }

查看.NET MAUI Workshop以获取更多示例。

该QueryProperty属性将传入的查询字符串参数路由到提供的公共属性。在实现MVVM 模式时，您也可以使用视图模型执行此操作。

有关使用Shell 导航的更多信息，请查看Shell 文档。