[.NET MAUI][Binding] MVVM ツールキットを利用したバインディング

.NET MAUI

.NET MAUI TIPS

2022.08.13

本記事の概要
MVVMツールキットとは
1. プロジェクトに MVVM ツールキットを導入する
画面のデザイン
クラスの追加
XAML へデータをバインディングする
.NET MAUI Tips

本記事の概要

この記事では MVVMツールキットを使用したバインディングについて説明します。

本記事では、性と名を入力できる Entry を２つ配置し、入力された性と名を連結して Label に表示されるようにする例を示します。

バインディングについての公式サイト情報はコチラを参照してください。

実行例

MVVMツールキットとは

WPF や UWP、.NET MAUI では MVVM デザインパターンによるバインディングがよく使用されます。自力で MVVM パターンに沿ってコーディングすることも可能ですが、MVVMツールキットを導入することで、もっと楽にコーディングすることが可能です。

プロジェクトに MVVM ツールキットを導入する

プロジェクトにMVVMツールキットを導入するには、はじめに VIsual Studio のメニューで [プロジェクト] – [NuGet パッケージの管理]をクリックします。

検索ウィンドウの横にある「プレスリリースを含める」にチェックを付け、「Microsoft.Toolkit.Mvvm」と入力して検索をします。一覧から CommunityToolkit.Mvvm を選択して、最新のプレスリリース版 8.0.0-preview4をインストールします。本記事執筆時点の安定版はバージョン7なのですが、この後説明するコードでエラーが発生しますので、8.0.0-preview4 以上をインストールしてください。

MVVMツールキットのインストール

画面のデザイン

画面デザインの XAML は以下のように性と名の Entry を１つずつ、性と名を連結して表示するための Label を１つ準備します。

<?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:viewModel="clr-namespace:BindingSample"
             x:DataType="viewModel:NameViewModel"
             x:Class="BindingSample.MainPage">
			 
    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Entry Placeholder="姓" />
            <Entry Placeholder="名" />

            <Label />

        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>

画面のデザイン

クラスの追加

続いて、新規でクラスを作成します。このクラスは Model View ViewModel クラスで、先ほど作成した画面の性と名、連結した姓名を管理します・

ここでは、クラス名を NameViewModel としました。using 句に CommunityToolkit.Mvvm.ComponentModel を追加し、クラスは public partial に変更、ObservableObject を継承させます。

次に「性」を管理するための firstName プロパティ、「名」を管理するための lastName プロパティ、両方を連結する FullName を実装します。

[ObservableProperty] を付けると値の変更を監視できるプロパティになります。また [NotifyPropertyChangedFor(通知先)] を付けると、プロパティの変更を「通知先」に通知することができます。

ですので、画面の性や名の入力欄にテキストを入力すると firstName や lastName が変更されたことを受け取り、変更通知を FullName へと連携します。

using CommunityToolkit.Mvvm.ComponentModel;

namespace BindingSample
{
    public partial class NameViewModel : ObservableObject
    {
        [ObservableProperty]
        [NotifyPropertyChangedFor(nameof(FullName))]
        string firstName;

        [ObservableProperty]
        [NotifyPropertyChangedFor(nameof(FullName))]
        string lastName;

        public string FullName => $"{LastName}{FirstName}";
    }
}

XAML へデータをバインディングする

はじめに、先ほど作成した NameViewModel を BindingContext にセットする必要があります。これは、対象の画面 XAML のコードビハインドで（この例では MainPage.xaml.cs）行います。

C# の例

public partial class MainPage : ContentPage
{
    public MainPage()
    {
	InitializeComponent();
        BindingContext = new NameViewModel();
    }

}

次に、画面（XAML のコード）で、先ほど作成したプロパティを Binding します。

また 4行目 xmlns:viewModel=”clr-namespace:BindingSample” と 5行目x:DataType=”viewModel:NameViewModel” を追加します。

書式
xmlns: 任意の名前 =”clr-namespace:プロジェクト名”
x:Data=”任意の名前:Model View ViewModel のクラス名”

<?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:viewModel="clr-namespace:BindingSample"
             x:DataType="viewModel:NameViewModel"
             x:Class="BindingSample.MainPage">
			 
    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Entry Placeholder="姓" 
                   Text="{Binding LastName}"/>
            <Entry Placeholder="名" 
                   Text="{Binding FirstName}"/>

            <Label Text="{Binding FullName}" />

        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>

実行例