Представляем .NET MAUI Preview 12

Сегодня мы выпускаем 12 превью-версию .NET Multi-platform App UI со многими улучшениями качества и некоторыми новыми возможностями. По мере того, как мы приближаемся к выпуску нашей первой стабильной версии, баланс работы начинает смещаться в сторону улучшения качества и стабильности, хотя есть еще и несколько интересных нововведений, на которые стоит обратить внимание, в том числе:

• Новая документация по значкам приложений, жизненному циклу приложений, кистям, элементам управления и Single Project

• Обработчик FlyoutView реализован на Android

• Добавлены обработчики совместимости для RelativeLayout и AbsoluteLayout

• Добавлено свойство Z Index

• Унификация .NET 6 — типы iOS

• Расширенная панель инструментов Windows — без оболочки

В этом выпуске также представлено захватывающее усовершенствование Shell. Давайте более подробно рассмотрим Shell в Preview 12.

Навигация в .NET MAUI: фокус на оболочке

Shell — это шаблон приложения, который упрощает общий дизайн приложений, использующих всплывающие меню и вкладки. В вашей оболочке, обычно называемой AppShell в наших примерах, вы начинаете добавлять страницы своего приложения и упорядочивать их в нужной структуре навигации. Вот пример приложения .NET Podcast:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"        xmlns:pages="clr-namespace:Microsoft.NetConf2021.Maui.Pages"        xmlns:root="clr-namespace:Microsoft.NetConf2021.Maui"        xmlns:viewmodels="clr-namespace:Microsoft.NetConf2021.Maui.ViewModels"        x:DataType="viewmodels:ShellViewModel"        x:Class="Microsoft.NetConf2021.Maui.Pages.MobileShell">     <TabBar>         <Tab Title="{Binding Discover.Title}"              Icon="{Binding Discover.Icon}">             <ShellContent ContentTemplate="{DataTemplate pages:DiscoverPage}" />         </Tab>         <Tab Title="{Binding Subscriptions.Title}"              Icon="{Binding Subscriptions.Icon}">             <ShellContent ContentTemplate="{DataTemplate pages:SubscriptionsPage}" />         </Tab>         <Tab Title="{Binding ListenLater.Title}"              Icon="{Binding ListenLater.Icon}">             <ShellContent ContentTemplate="{DataTemplate pages:ListenLaterPage}" />         </Tab>         <Tab Title="{Binding ListenTogether.Title}"              Icon="{Binding ListenTogether.Icon}"              IsVisible="{x:Static root:Config.ListenTogetherIsVisible}">             <ShellContent                  ContentTemplate="{DataTemplate pages:ListenTogetherPage}" />         </Tab>         <Tab Title="{Binding Settings.Title}"              Icon="{Binding Settings.Icon}">             <ShellContent ContentTemplate="{DataTemplate pages:SettingsPage}" />         </Tab>     </TabBar> </Shell>

Навигация в контексте оболочки осуществляется с помощью маршрутизации на основе URI. На центральном изображении снимка экрана мы перешли к представлению сведений, которое не представлено в XAML выше. Для страниц, которые не должны быть видны, вы можете объявить маршруты для них в коде, а затем перейти к ним по URI. Вы можете увидеть это снова в коде приложения подкаста «App.xaml.cs»:

Routing.RegisterRoute(nameof(DiscoverPage), typeof(DiscoverPage)); Routing.RegisterRoute(nameof(ShowDetailPage), typeof(ShowDetailPage)); Routing.RegisterRoute(nameof(EpisodeDetailPage), typeof(EpisodeDetailPage)); Routing.RegisterRoute(nameof(CategoriesPage), typeof(CategoriesPage)); Routing.RegisterRoute(nameof(CategoryPage), typeof(CategoryPage));

Чтобы перейти с главного экрана к представлению сведений, когда пользователь касается изображения обложки, приложение выполняет команду в контексте привязки ShowViewModel:

private Task NavigateToDetailCommandExecute() {     return Shell.Current.GoToAsync($"{nameof(ShowDetailPage)}?Id={Show.Id}"); }

Из любого места в коде приложения вы можете получить доступ к Shell.Current для выполнения команд навигации, прослушивания событий навигации и многого другого.

Это также демонстрирует одну из мощных функций навигации в Shell: параметры запроса для передачи простых данных. В этом случае «Show.Id» передается вместе с маршрутом, а затем Shell применяет это значение к контексту привязки ShowDetailPage, делая его немедленно готовым к использованию. «QueryProperty» обрабатывает сопоставление параметра строки запроса с общедоступным свойством.

 [QueryProperty(nameof(Id), nameof(Id))] public class ShowDetailViewModel : BaseViewModel {     public string Id { get; set; } }

Оболочка и внедрение зависимостей

Использование HostBuilder в .NET MAUI и мощное внедрение зависимостей было основным моментом предварительных версий. Один из самых популярных отзывов, которые мы получили о Shell, — это желание использовать внедрение конструктора, и в этом выпуске благодаря усилиям участника Брайана Ранка вы теперь можете его использовать!

Определите свои зависимости в контейнере DI, обычно в «MauiProgram.cs»:

public static class MauiProgram     {         public static MauiApp CreateMauiApp()         {             var builder = MauiApp.CreateBuilder();             builder                 .UseMauiApp<App>();              builder.Services                 .AddSingleton<MainViewModel>();              return builder.Build();         }     }

Затем на странице, куда нужно ввести:

public partial class MainPage {     readonly MainViewModel _viewModel;      public MainPage(MainViewModel viewModel)     {         InitializeComponent();          BindingContext = _viewModel = viewModel;     } }

Shell предлагает множество возможностей для стилей и шаблонов, поэтому вы можете быстро удовлетворить большинство распространенных потребностей. Для получения более подробной информации ознакомьтесь с документацией Shell.

Начните работу сегодня!

Перед установкой Visual Studio 2022 Preview мы настоятельно рекомендуем начать с чистого листа, удалив все предварительные версии .NET 6 и Visual Studio 2022.

Теперь установите Visual Studio 2022 Preview (17.1 Preview 3) и убедитесь, что .NET MAUI (предварительная версия) отмечен в разделе «Мобильная разработка с рабочей нагрузкой .NET».

Готовый? Откройте Visual Studio 2022 и создайте новый проект. Найдите и выберите .NET MAUI.

Примечания к выпуску Preview 12 находятся на GitHub. Дополнительные сведения о начале работы с .NET MAUI см. в нашей документации.