.NET MAUI で C# マークアップを試そう！

こんにちは、虎の穴ラボのT.Kです。

この記事は「虎の穴ラボ夏のアドベントカレンダー」7日目の記事です。

6日目はS.Sさんによる「SwitchBotのAPIで家電を遠隔操作してみた」が投稿されました。
8日目は片岡さんによる「タイムトラッキングをやってみましょう」が投稿されます。こちらもぜひご覧ください。

はじめに

今回の内容は「.NET MAUI」です。

今週のテーマは「仕事には役立たないかもしれない技術」ということで、今回はとらラボ内では業務で使用しているわけではないが個人的に追っているC#について書いていきます。

.NET MAUI

先日、.NET MAUI（.NET Multi-Platform App UI）がリリースされました。以前から開発は公表されていたもので、C#で複数のプラットフォーム向けの開発ができる、事実上Xamarin.Formsの後継として扱われるフレームワークです。

docs.microsoft.com

プロジェクト作成まで

現在、.NET MAUIをVisual Studioで開発する場合は、Preview版を利用する必要があります。今回はWindows版のVisual Studio 2022 v17.3 Preview 2.0 で試します。（Visual Studio for Macでのサポートは今後リリースとのこと）

visualstudio.microsoft.com

インストールする際はうっかりデスクトップ開発のほうを選んでしまいそうになりますが、「.NETマルチプラットフォームアプリのUI開発」を選択。その後、新規プロジェクトで「.NET MAUIアプリ」を選択します。プロジェクトにはすでにサンプルコードが実装されていて、そのままデバッグを開始すると以下のようにアプリが起動します。

ちなみにターゲットをAndroidにするとエミュレータのインストールが始まり、それが済むとAndroidエミュレータ上で同じアプリが起動することも確認できます。

C# マークアップ

.NET MAUIでは、Viewを従来のXAMLではなくC#で書くことのできるC#マークアップ機能があります。Xamarin.Formsのときからあった機能だそうなのですが、私は使ったことがなかったので、せっかくなので試してみました。

ファイルを追加するときに、以下のようにC#かXAMLかが選べるようになっているので、今回は「.NET MAUI ContentPage (C#)」を選択します。

せっかくなのでViewModelも用意して、MVVM形式にします。今回の本題ではないですが、PropertyChanged部分の記載省略のためにFodyを使用しています。

using System.ComponentModel;

namespace MauiApp1
{
    public class SampleViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public int Number1 { get; set; }
        public int Number2 { get; set; }
        public int Sum => Number1 + Number2;
    }
}

肝心のC# マークアップ部分。

Converterの記述が簡単になったと公式記事で見かけたので、最下段のLabelではそちらも試しています。XAMLでの実装ではConverter用のClassを作成してそれをバインドする形を取りますが、C#マークアップでは変換内容を直接記述できます。

using CommunityToolkit.Maui.Markup;

namespace MauiApp1;

public class Contents : ContentPage
{
    public Contents()
    {
        BindingContext = new SampleViewModel();

        Content = new VerticalStackLayout
        {
            Padding = new Thickness(20),
            HorizontalOptions = LayoutOptions.Start,
            Children = {
                new HorizontalStackLayout()
                {
                    new Label().Text("A ：").Font(size: 20),
                    new Editor().Font(size: 20).Bind(Editor.TextProperty, nameof(SampleViewModel.Number1)),
                },

                new HorizontalStackLayout()
                {
                    new Label().Text("B ：").Font(size: 20),
                    new Editor().Font(size: 20).Bind(Editor.TextProperty, nameof(SampleViewModel.Number2)),
                },

                new HorizontalStackLayout()
                {
                    new Label().Text("A + B  =").Font(size: 20).Padding(new Thickness(0, 0 ,10, 0)),
                    new Label().Font(size: 20, bold: true).CenterHorizontal().CenterVertical().Bind(Label.TextProperty, nameof(SampleViewModel.Sum)),
                },

                new HorizontalStackLayout()
                {
                    new Label().Text("(A + B) * 2  =").Font(size: 20).Padding(new Thickness(0, 0 ,10, 0)),
                    new Label().Font(size: 20, bold: true).CenterHorizontal().CenterVertical().Bind<Label, int, int>(Label.TextProperty, nameof(SampleViewModel.Sum), convert: n =>  n * 2),
                },
            }
        };
    }
}

起動すると、意図した通り動いてくれました。

感想

まずMAUIそのものについて。私はWPF経験ありでXamarin.Forms未経験なのですが、XAMLでの書き味はWPFとほぼ同じだったのでそこが少し意外でした（もっと違うものかと…）。WPFは基本的にWindowsで動作する前提なので、似たような書き方でマルチプラットフォームに対応できるMAUIはとても便利だと感じました。

その上でC# マークアップについては、見ての通りC#のコードでViewまわりのもろもろを実装できるので、取り回しはかなりよさそうだなという印象です。共通パーツの取り扱いが非常にしやすそうなほか、今回の実装でも試したConverterまわりも、XAMLでの実装に比べるととても分かりやすくなりました。

参考：XAMLでのConverter実装例バインディングの値コンバーター - .NET MAUI | Microsoft Docs

最初に書いた通り業務で使う予定は今の所ありませんが、MAUIもC#マークアップも便利だと感じたので個人的には折を見て使っていこうと思いますし、よければ皆さんもぜひ試してみてください！