チュートリアル: C# マークアップと Community Toolkit を使用して .NET MAUI アプリを作成する

[アーティクル]
11/20/2023

.NET MAUI Community Toolkit の C# マークアップを使用して、XAML なしで作成されたユーザーインターフェイスで .NET MAUI アプリを構築します。

はじめに

.NET MAUI Community Toolkit は、拡張機能、動作、アニメーション、その他のヘルパーのセットです。その機能の 1 つである C# マークアップにより、C# コードでユーザーインターフェイス全体を作成できます。このチュートリアルでは、C# マークアップを使用してユーザーインターフェイスを作成する Windows 用の .NET MAUI アプリを作成する方法について説明します。

環境のセットアップ

.NET MAUI 開発用に環境をまだ設定していない場合は、「Windows で .NET MAUI の使用を開始する」の手順に従ってください。

.NET MAUI プロジェクトの作成

Note

.NET MAUI プロジェクトの設定に既に慣れている場合は、次のセクションにスキップできます。

Visual Studio を起動し、スタートウィンドウで [新しいプロジェクトを作成する] をクリックして新しいプロジェクトを作成します。

[新しいプロジェクトの作成] ウィンドウの [すべてのプロジェクトの種類] ドロップダウンで [MAUI] を選択し、[.NET MAUI アプリ] テンプレートを選択し、[次へ] ボタンをクリックします。

.NET MAUI アプリテンプレート。

次に、[新しいプロジェクトの構成] 画面で、プロジェクトに名前を付けて場所を選択し、[次へ] ボタンをクリックします。

最後の画面の [追加情報] で、[作成] ボタンをクリックします。

プロジェクトが作成され、その依存関係が復元されるまで待ちます。

Visual Studio ツールバーで、[Windows マシン] ボタンを押してアプリをビルドして実行します。 [Click me] ボタンをクリックし、ボタンの内容がクリック数で更新されることを確認します。

Windows 上の .NET MAUI アプリが期待どおりに動作していることを確認したので、MVVM Toolkit と C# マークアップパッケージを統合できます。次のセクションでは、これらのパッケージを新しいプロジェクトに追加します。

.NET MAUI Community Toolkit から C# マークアップを追加する

.NET MAUI アプリが Windows 上で実行されているので、いくつかの NuGet パッケージをプロジェクトに追加して、MVVM Toolkit および .NET MAUI Community Toolkit の C# マークアップと統合しましょう。

ソリューションエクスプローラーでプロジェクトを右クリックし、コンテキストメニューから [NuGet パッケージの管理...] をクリックします。

[NuGet パッケージマネージャー] ウィンドウで、[参照] タブを選択して、CommunityToolkit.MVVM を検索します。

CommunityToolkit.MVVM パッケージ。

[インストール] をクリックして、CommunityToolkit.MVVM パッケージの最新の安定バージョンをプロジェクトに追加します。

次に、CommunityToolkit.Maui を検索します。

CommunityToolkit.Maui パッケージ。

[インストール] をクリックして、CommunityToolkit.Maui.Markup パッケージの最新の安定バージョンをプロジェクトに追加します。

新しいパッケージのインストールが完了したら、[NuGet パッケージマネージャー] ウィンドウを閉じます。

ViewModel をプロジェクトに追加する

MVVM Toolkit を使用して、シンプルな Model-View-ViewModel (MVVM) 実装を追加します。まず、ビューとペアになる viewmodel (MainPage) を作成します。プロジェクトを再度右クリックし、コンテキストメニューから [追加 | クラス] を選択します。

表示された [新しい項目の追加] ウィンドウで、クラスに MainViewModel という名前を付けて [追加] をクリックします。

MainViewModel クラスをプロジェクトに追加する。

MainViewModel では、MVVM Toolkit の機能を活用します。クラスの内容を、次のコードに置き換えます。

using CommunityToolkit.Mvvm.ComponentModel;
using System.ComponentModel;
using System.Diagnostics;

namespace MauiMarkupSample
{
    [INotifyPropertyChanged]
    public partial class MainViewModel
    {
        [ObservableProperty]
        private string name;
        partial void OnNameChanging(string value)
        {
            Debug.WriteLine($"Name is about to change to {value}");
        }
        partial void OnNameChanged(string value)
        {
            Debug.WriteLine($"Name has changed to {value}");
        }
    }
}

チュートリアル「初めての Windows 用 .NET MAUI アプリを構築する」を完了していれば、上記のコードで何が行われるかわかります。 MainViewModel クラスは INotifyPropertyChanged 属性で修飾されています。これにより、MVVM Toolkit でクラスの INotifyPropertyChanged 実装を生成できます。 .NET ソースジェネレーターを機能させるには、MainViewModel を partial class としてマークする必要があります。 name プライベートフィールドの ObservableProperty 属性には、作成した部分クラスでの適切な INotifyPropertyChanged 実装を持つクラスの Name プロパティが追加されます。 OnNameChanging および OnNameChanged メソッドの追加はオプションですが、Name プロパティを変更する予定がある場合や既に変更済みの場合にカスタムロジックを追加できます。

C# マークアップを使用して UI を構築する

C# マークアップを使用して UI を構築する場合、最初の手順は MauiProgram.cs で CreateMauiApp() メソッドを更新することです。メソッドの内容を次のコードに置き換えます。

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();

    builder
        .UseMauiApp<App>()
        .UseMauiCommunityToolkitMarkup();

    return builder.Build();
}

ファイルの先頭に新しい using ステートメントを追加する必要もあります (using CommunityToolkit.Maui.Markup;)。 UseMauiCommunityToolkitMarkup() を呼び出すと、アプリに C# マークアップが追加され、XAML ではなく C# コードを使用して UI を構築できます。

UI のレンダリング時に MainPage.xaml ファイルが使用されなくなるため、ContentPage の内容を削除できます。

<?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"
             x:Class="MauiMarkupSample.MainPage">
</ContentPage>

MainPage.xaml.cs で、クリックイベントハンドラーを削除し、3 つのプライベートメンバーをクラスに追加します。

private readonly MainViewModel ViewModel = new();
private enum Row { TextEntry }
private enum Column { Description, Input }

ViewModel プロパティは、UI をデータバインディングするときに使用する MainViewModel クラスのインスタンスを作成します。 Row および Column 列挙型は、C# マークアップを使用して UI のレイアウトを定義するために使用されます。これは、次の手順で定義する 1 つの行と 2 つの列を持つ単純な UI です。また、ファイルの先頭に名前空間ディレクティブ ( using static CommunityToolkit.Maui.Markup.GridRowsColumns;) を追加する必要があります。

UI 要素は C# コードで定義されるため、InitializeComponent() メソッドは必要ありません。この呼び出しを削除し、次のコードに置き換えて UI を作成します。

public MainPage()
{
    BindingContext = ViewModel;
    Content = new Grid
    {
        RowDefinitions = Rows.Define(
            (Row.TextEntry, 36)),

        ColumnDefinitions = Columns.Define(
            (Column.Description, Star),
            (Column.Input, Stars(2))),

        Children =
        {
            new Label()
                .Text("Customer name:")
                .Row(Row.TextEntry).Column(Column.Description),

            new Entry
            {
                Keyboard = Keyboard.Numeric,
                BackgroundColor = Colors.AliceBlue,
            }.Row(Row.TextEntry).Column(Column.Input)
                .FontSize(15)
                .Placeholder("Enter name")
                .TextColor(Colors.Black)
                .Height(44)
                .Margin(6, 6)
                .Bind(Entry.TextProperty, nameof(ViewModel.Name), BindingMode.TwoWay)
        }
    };
}

MainPage コンストラクターの新しいコードでは、C# マークアップを利用して UI を定義します。 Grid はページの Content として設定されます。新しいグリッドでは、高さが 36 ピクセルの 1 つの行と、絶対ピクセル値ではなくアスタリスク値を使用して定義された幅の 2 つの列が定義されます。 Input 列は常に Description 列の幅の 2 倍になります。これらの定義に相当する XAML は次のようになります。

<Grid.RowDefinitions>
    <RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>

グリッドを作成するコードの残りの部分では、2 つの Children、1 つの Label、1 つの Entry を追加します。 Text、Row、および Column プロパティは Label 要素で設定され、Entry は次のプロパティで作成されます。

プロパティ	値	説明
`Row`	`Row.TextEntry`	行番号を定義します。
`Column`	`Column.Input`	列番号を定義します。
`FontSize`	`15`	フォントサイズを設定します。
`Placeholder`	`"Enter name"`	要素が空の場合に表示するプレースホルダーテキストを設定します。
`TextColor`	`Colors.Black`	テキストの色を指定します。
`Height`	`44`	要素の高さを設定します。
`Margin`	`6, 6`	要素の周囲の余白を定義します。
`Bind`	`Entry.TextProperty, nameof(ViewModel.Name), BindingMode.TwoWay`	双方向データバインディングを使用して、要素の `Text` プロパティをビューモデルの `Name` プロパティにバインドします。

これらの子要素を定義する同等の XAML は次のようになります。

<Label Text="Customer name:"
       Grid.Row="0" Grid.Column="0" />
<Entry Grid.Row="1" Grid.Column="0"
       FontSize="15"
       Placeholder="Enter name"
       HeightRequest="44"
       Margin="6, 6"
       Text="{Binding Path=ViewModel.Name, Mode=TwoWay}" />

上記のマークアップで TextColor プロパティが設定されていないことに気付いたかもしれません。コントロールの TextColor を設定するには、カスタムスタイルを設定する必要があります。 .NET MAUI でのスタイルの使用の詳細については、「XAML を使用してアプリのスタイルを設定する」を参照してください。これは、C# マークアップでプロパティを設定する方が、同等の XAML よりも合理化できる 1 つの例です。ただし、スタイルを使用すると、再利用と継承が容易になります。

これで、アプリを実行する準備が整いました。 F5 キーを押し、プロジェクトをビルドして実行します。アプリは次のスクリーンショットのようになります。

.NET MAUI C# マークアップアプリを実行します。

.NET MAUI を使用して Windows 上に最初の C# マークアップアプリを作成しました。 C# マークアップでできることの詳細については、C # マークアップのドキュメントを参照してください。

.NET MAUI を学習するためのリソース

.NET MAUI Community Toolkit のドキュメント

C# マークアップのドキュメント

次の方法で共有

チュートリアル: C# マークアップと Community Toolkit を使用して .NET MAUI アプリを作成する

はじめに

環境のセットアップ

.NET MAUI プロジェクトの作成

.NET MAUI Community Toolkit から C# マークアップを追加する

ViewModel をプロジェクトに追加する

C# マークアップを使用して UI を構築する

その他のリソース

次の方法で共有

チュートリアル: C# マークアップと Community Toolkit を使用して .NET MAUI アプリを作成する

はじめに

環境のセットアップ

.NET MAUI プロジェクトの作成

.NET MAUI Community Toolkit から C# マークアップを追加する

ViewModel をプロジェクトに追加する

C# マークアップを使用して UI を構築する

関連トピック

その他のリソース