Сегодня мы выпускаем 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 см. в нашей документации.