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

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

※元記事はこちら

https://devblogs.microsoft.com/dotnet/announcing-net-maui-preview-12/

---------------------------

米国時間 1 月 19 日（水）に、[.NET Multi-platform App UI **Preview 12**](https://github.com/dotnet/maui) がリリースされました。

https://github.com/dotnet/maui

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

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

https://docs.microsoft.com/dotnet/maui/

* Android で FlyoutView ハンドラを実装 (#[3513](https://github.com/dotnet/maui/pull/3513))

https://github.com/dotnet/maui/pull/3513

* `RelativeLayout` と `AbsoluteLayout` に互換性ハンドラを追加 (#[3723](https://github.com/dotnet/maui/pull/3723))

https://github.com/dotnet/maui/pull/3723

* Z インデックスプロパティの追加 (#[3635](https://github.com/dotnet/maui/pull/3635))

https://github.com/dotnet/maui/pull/3635

* .NET 6 の統一 - iOS タイプ ([Issue](https://github.com/xamarin/xamarin-macios/issues/13087))

https://github.com/xamarin/xamarin-macios/issues/13087

* Windows 拡張ツール バー - non-Shell (#[3693](https://github.com/dotnet/maui/pull/3693))

https://github.com/dotnet/maui/pull/3693

![img](https://devblogs.microsoft.com/dotnet/wp-content/uploads/sites/10/2022/01/windows_toolbar.png)

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

#Shell にフォーカスした .NET MAUI 12
Shell は、フライアウト メニューやタブを使用する一般的なアプリケーションのデザインを簡素化するアプリのスキャフォールドです。Shell 内でアプリのページを追加し、必要なナビゲーション構造に配置します。例えば、[.NET Podcast アプリのサンプル](https://github.com/microsoft/dotnet-podcasts)は以下の通りです。

https://github.com/microsoft/dotnet-podcasts

```xml
<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>
```

![img](https://devblogs.microsoft.com/dotnet/wp-content/uploads/sites/10/2022/01/podcast_mobile.png)

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

https://github.com/microsoft/dotnet-podcasts/blob/main/src/Mobile/App.xaml.cs

```csharp: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` のバインディング コンテキスト上でコマンドを実行します。

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

> アプリケーションのコードのどこからでも `Shell.Current` にアクセスして、ナビゲーション コマンドを発行したり、ナビゲーション イベントを Listen したりすることができます。

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

```csharp
 [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](https://github.com/dotnet/maui/pull/3375) 氏の協力により、コンストラクタ インジェクションを使用できるようになりました。

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

```csharp:MauiProgram.cs
public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>();

            builder.Services
                .AddSingleton<MainViewModel>();

            return builder.Build();
        }
    }
```

続いて、挿入したいページに以下のように入れます。

```csharp
public partial class MainPage
{
    readonly MainViewModel _viewModel;

    public MainPage(MainViewModel viewModel)
    {
        InitializeComponent();

        BindingContext = _viewModel = viewModel;
    }
}
```

このように、Shell には、多くのスタイリングやテンプレート機能があり、よくある一般的なニーズを素早く実現することができるようになりました。詳細については、以下の [Shell ドキュメント](https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/)をご覧ください。

https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/

#ぜひ今すぐお試しくださいませ！
##まずはプレビュー版をアンインストールから！（入れていた方のみ対象）
すでに [.NET](https://docs.microsoft.com/dotnet/core/install/remove-runtime-sdk-versions?pivots=os-windows#uninstall-net) や Visual Studio 2022 それぞれのプレビュー版を入れていらっしゃる方は、お試しいただく前に、[Visual Studio 2022 Preview](https://docs.microsoft.com/visualstudio/install/uninstall-visual-studio?view=vs-2022) と .NET 6 Preview をアンインストールすることを強くお勧めします。手順は以下をご覧ください。

https://docs.microsoft.com/en-us/dotnet/core/install/remove-runtime-sdk-versions?pivots=os-windows#uninstall-net

https://docs.microsoft.com/en-us/visualstudio/install/uninstall-visual-studio?view=vs-2022

##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 のリポジトリ](https://github.com/dotnet/maui/releases/tag/6.0.200-preview.12)に格納しています。.NET MAUI の使用に関するその他の情報については、ドキュメントを参照してください。

https://github.com/dotnet/maui/releases/tag/6.0.200-preview.12

https://docs.microsoft.com/dotnet/maui/get-started/installation

#フィードバック超お待ちしてます！！
.NET MAUI で新しいアプリケーションを作成してみた結果、得られた経験については、[GitHub（dotnet/maui）](https://github.com/dotnet/maui)で私たちに教えていただけるとすごくうれしいです。

https://github.com/dotnet/maui

今後のリリースについては、ぜひ以下の[製品ロードマップ](https://github.com/dotnet/maui/wiki/roadmap)をご覧ください。また、機能の実装状況については、[Status Wiki](https://github.com/dotnet/maui/wiki/status) をご参照ください。

https://github.com/dotnet/maui/wiki/roadmap

https://github.com/dotnet/maui/wiki/status

以上、[David Ortinau](https://devblogs.microsoft.com/dotnet/announcing-net-maui-preview-12/) さんでした。

![david](https://devblogs.microsoft.com/dotnet/wp-content/uploads/sites/10/2021/04/davidortinau-300x300.png)


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