.NET MAUI開発の強力な味方「CommunityToolkit」の紹介

前書き

• かなり久しぶりにブログを書きます。もともとほぼ書いていなくて放置していたのですが、いいかげんそろそろ真剣にアウトプットをしてスキルアップしなきゃいかんと思って再び書くに至った次第です。これまで雰囲気で実装していたものを、ちゃんと理解を深めたいのです。忙しくなったりモチベが下がったらまた書かなくなるかもですが、なるべく習慣化できるようにしたいと思っています。
• .NET MAUIを使う上で強力な味方になるライブラリ「CommunityToolkit」の紹介というか、リファレンスをつらつらメモった備忘録になります。

背景

• 先月(2022/08)に.NET MAUIのVisual Studio(Windows)のサポートがGAしました。あとはVisual Studio for Macのサポートが今年中を予定しているようですので、これがGAすれば一通りの開発環境が揃います。本家のGAとほぼ時を同じくして、.NET MAUI開発を強力にサポートしてくれるライブラリである「CommunityToolkit.Mvvm」もリリース(Ver8.0.0)されており、効率の良い開発を進めることができるようになっています。今回はこういったお役立ちライブラリを紹介します。

CommunityToolkitについて

• .NET MAUIで使用できるCommunityToolkitは2種類、「CommunityToolkit.Mvvm」と「CommunityToolkit.Maui」というものがあります。それぞれ役割が違うので必要に応じてインストールします。
• Xamarin.FormsのころはPrismが代表的なライブラリでしたが、.NET MAUIではどうやらCommunityToolkitが押されている雰囲気？です。公式で配信される動画コンテンツやサンプルコードでよく使われています。とはいうものの、ライブラリの選択基準は状況によって異なるので、事前に比較検討してから導入するようにしましょう。それぞれアプリ固有の事情は異なりますし、その時その時でトレンドの移り変わりもあります。

CommunityToolkit.Mvvm

• 特定のUIプラットフォームに依存しないライブラリになります。MVVMをサポートしてくれるもので、これまでかなり面倒であった変更通知の記述を大幅に減らしたり、ICommandの実装などが提供されています。すでに基本的な使用方法を解説しているブログなどがいくつかあるので、ここでは公式リファレンスのリンクを記載しておくにとどめます。

  MS Docs

• こちらに記載されています。

  .NET Blog

• CommunityToolkit.Mvvm Ver8.0.0がリリースされた際に投稿された.NET Blog になります。このライブラリの開発者(たぶん中心的な人)であるMSのエンジニア、Sergio Pedriさんが執筆しています。この記事でライブラリの特徴やだいたいの使い方がわかります。

  サンプルアプリ

• CommunityToolkit.Mvvmを使用したサンプルアプリがMicrosoft Storeにて提供されています。コードサンプルが記載されており、実際の動きを試すこともできます。素晴らしい！
  • ※Storeを「community toolkit」で検索すると似たものが2種類ヒットしますが、青いアイコンのアプリをDLインストールしてください。黒いアイコンのほうは古いものです。
• ↑のサンプルアプリのソースコードです。

  動画コンテンツ

• MSの.NET MAUIの開発者であるJames MontemagnoさんによるSergio Pedriさんへのインタビュー動画です。

CommunityToolkit.Maui

• .NET MAUI向けに作られたライブラリになります。.NET MAUI向けのbehaviorなど役立つ機能が含まれています。

  MS Docs

• こちらに記載されています。

  導入方法

• Nugetパッケージ「CommunityToolkit.Maui」をインストールします。(すぐ下の「.Core」が気になりますが、気にしなくて大丈夫です。.Mauiと一緒にインストールされます。)

• ライセンスに同意しインストールされるとreadmeが表示されます。使い方が記載されているのでそれに従います。

• MauiProgram.csに2か所記載

using CommunityToolkit.Maui;  //←★追加

namespace CommunityToolkitSample;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });

        builder.UseMauiApp<App>().UseMauiCommunityToolkit(); //←★追加

        return builder.Build();
    }
}

• 使いたいxamlファイルにxmlnsを記載すれば準備完了！

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    ★追加 → xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="CommunityToolkitSample.MainPage">

・
・
・

</ContentPage>

使用方法

• 使い方は下記の感じです。個人的によく使う「EventToCommandBehavior」を例に挙げます。

• 例えば素の状態では、↓のようにXamlでContentPageの「Appearing」(Pageが表示された)というイベントに対してイベントハンドラーを設定するしかありません。しかしMVVMで実装する場合、ViewModelのCommandにバインドをしたくなります。Appearingに対応するコマンドは.NET MAUIには用意されていないのでBehaviorを自作する必要があるのですが、CommunityToolkit.Mauiには「EventToCommandBehavior」があるのでそれを使用します。

• 例えばViewModelにこんなCommand(CommunityToolkit.MvvmのRelayCommand)があったとして、、。

using System.Diagnostics;
using CommunityToolkit.Mvvm.Input;

namespace CommunityToolkitSample.ViewModel;
internal partial class MainViewModel
{
    [RelayCommand]
    public void WriteLog()
    {
        Debug.WriteLine("Appearing!!!!");
    }
}

• View(xaml)ではこんな感じにするとAppearingイベントをコマンドに紐づけられます。<ContentPage.Behaviors>の「EventName」にイベントの名前を記載し対応するCommandを記載すればいいわけです。この例ではMainPageが表示された際にデバッグログを書き出します。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:viewModel="clr-namespace:CommunityToolkitSample.ViewModel"
             x:Class="CommunityToolkitSample.MainPage">
    <ContentPage.BindingContext>
        <viewModel:MainViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Behaviors>
        <toolkit:EventToCommandBehavior
            EventName="Appearing"
            Command="{Binding WriteLogCommand}" />
    </ContentPage.Behaviors>

・ 
・
・

</ContentPage>

あとがき

• 長くなるので今回はここまでとします。今回はほんの導入部分だけ書きましたが、紹介したライブラリはたくさんの機能を持っているので今後もっと掘り下げたTipsなどを投稿できたらと思っています。