【新機能など】.NET MAUI (Multi-platform App UI) Preview 12 が出ました

皆さんごきげんよう。ついに 2022 年になってしまいましたがいかがお過ごしでしょうか。
さて本日は久しぶりになってしまいましたが、.NET MAUI Preview 12 がアナウンスされましたので、そちらを紹介させていただきます。

※元記事はこちら

---

米国時間 1 月 19 日（水）に、.NET Multi-platform App UI Preview 12 がリリースされました。

Stable なバージョンのリリースに近づいてくるにつれ、品質向上と安定化にフォーカスしていますが、今回のリリースには以下のような面白い新機能や、ドキュメントなども追加されています。

• App icons, App lifecycle, Brushes, Controls, and Single Project についての新しいドキュメントをリリース

• Android で FlyoutView ハンドラを実装 (#3513)

• RelativeLayout と AbsoluteLayout に互換性ハンドラを追加 (#3723)

• Z インデックスプロパティの追加 (#3635)

• .NET 6 の統一 - iOS タイプ (Issue)

• Windows 拡張ツール バー - non-Shell (#3693)

今回のリリースでは、Shell にも超かっこいい機能強化が実施されています。ここからは、Preview 12 の Shell をさらに詳しく見てみましょう。

Shell にフォーカスした .NET MAUI 12

Shell は、フライアウト メニューやタブを使用する一般的なアプリケーションのデザインを簡素化するアプリのスキャフォールドです。Shell 内でアプリのページを追加し、必要なナビゲーション構造に配置します。例えば、.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>

Shell コンテキストでのナビゲーションは、URI ベースのルーティングで行われます。このスクリーンショットの中央の画像では、上記で引用した XAML では表示されていない詳細ビューに移動しています。
表示する必要のないページについては、コードのなかでルートを宣言して、URI でナビゲートすることができます。この流れは、上記ポッドキャストアプリのコード "App.xaml.cs" でも確認できます。

App.xaml.cs

using Microsoft.NetConf2021.Maui.Helpers;
using Application = Microsoft.Maui.Controls.Application;

namespace Microsoft.NetConf2021.Maui
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            TheTheme.SetTheme();

            if (Config.Desktop)
                MainPage = new DesktopShell();
            else
                MainPage = new MobileShell();

            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 にアクセスして、ナビゲーション コマンドを発行したり、ナビゲーション イベントを Listen したりすることができます。

この例では、Shell のナビゲーションの強力な機能のひとつである、シンプルなデータを渡すためのクエリ パラメータも示しています。この例では、"Show.Id "がルートと共に渡され、シェルはその値を ShowDetailPage のバインディング コンテキストに適用して、すぐに使用できるようにします。"QueryProperty" は、querystring パラメータの Public プロパティへのマッピングを処理します。

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

Shell と依存関係の挿入（Dependency Injection : DI）

Shell 関連のフィードバックのなかで、上位項目のひとつがコンストラクタ インジェクションを使用したいというものでした。

.NET MAUI では、HostBuilder の利用と強力な依存関係の挿入がプレビュー 12 のハイライトとなっています。今回のリリースでは、Brian Runck 氏の協力により、コンストラクタ インジェクションを使用できるようになりました。

DI コンテナ内の "MauiProgram.cs" において依存関係を定義します。

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 ドキュメントをご覧ください。

ぜひ今すぐお試しくださいませ！

まずはプレビュー版をアンインストールから！（入れていた方のみ対象）

すでに .NET や Visual Studio 2022 それぞれのプレビュー版を入れていらっしゃる方は、お試しいただく前に、Visual Studio 2022 Preview と .NET 6 Preview をアンインストールすることを強くお勧めします。手順は以下をご覧ください。

VS 2022 17/1 Preview 3 をインストールしましょう

そのあとに、Visual Studio 2022 Preview（17.1 Preview 3）をインストールし、”Mobile Development with .NET workload” で .NET MAUI（preview）にチェックが入っていることを確認してください。
インストールが完了したら、Visual Studio 2022 を開き、新しいプロジェクト作成から、.NET MAUI を検索して作成してみてください。

今回紹介しました Preview 12 のリリースノートは GitHub のリポジトリに格納しています。.NET MAUI の使用に関するその他の情報については、ドキュメントを参照してください。

フィードバック超お待ちしてます！！

.NET MAUI で新しいアプリケーションを作成してみた結果、得られた経験については、GitHub（dotnet/maui）で私たちに教えていただけるとすごくうれしいです。

今後のリリースについては、ぜひ以下の製品ロードマップをご覧ください。また、機能の実装状況については、Status Wiki をご参照ください。

以上、David Ortinau さんでした。

それではみなさんごきげんよう。