C# Markup

2025-03-27

概要

C# マークアップは、コードで宣言型 .NET マルチプラットフォームアプリ UI (.NET MAUI) ユーザーインターフェイスを構築するプロセスを簡略化するように設計された、Fluent ヘルパーメソッドとクラスのセットです。 C# マークアップによって提供される fluent API は、CommunityToolkit.Maui.Markup 名前空間で使用できます。

XAML と同様に、C# マークアップを使用すると、UI (ビュー) とビジネスロジック (ビューモデル) を完全に分離できます。

C# マークアップは、.NET MAUI でサポートされているすべてのプラットフォームで使用でき、.NET ホットリロードサポートしています。

NuGet パッケージ

C# マークアップパッケージは、ファーストステップガイドで説明されているように、プロジェクトに含めることができます。

例示

マークアップパッケージを使用して一般的なタスクを実現する方法を示す簡単な例を次に示します。

バインド

C# マークアップを使用すると、バインディングを流暢に定義できるため、コードの詳細度を下げるために複数のメソッドを連結できます。

new Entry().Bind(Entry.TextProperty, static (ViewModel vm) => vm.RegistrationCode, static (ViewModel vm, string text) => vm.RegistrationCode = text)

Bind メソッドで使用できるオプションの詳細については、BindableObject 拡張機能のドキュメントを参照してください。

サイズ

C# マークアップを使用すると、サイズ設定を流暢に定義できるため、コードの詳細度を下げるために複数のメソッドを連結できます。

new Entry().Size(200, 40);

Size メソッドで使用できるオプションの詳細については、VisualElement 拡張機能のドキュメントを参照してください。

詳細な例

次の使用例は、子 Label オブジェクトと Entry オブジェクトを含む Grid オブジェクトを作成します。 Label はテキストを表示し、Entry データはビューモデルの RegistrationCode プロパティにバインドされます。各子ビューは、Grid内の特定の行に表示されるように設定され、Entry は Grid内のすべての列にまたがっています。さらに、Entry の高さは、キーボード、色、テキストのフォントサイズ、および Marginと共に設定されます。

C# マークアップ拡張機能を使用すると、開発者は enumを使用して列と行の名前 (Column.Inputなど) を定義することもできます。

C# マークアップを使用すると、fluent API を使用してこれを定義できます。

using CommunityToolkit.Maui.Markup;

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

class SampleContentPage : ContentPage
{
    public SampleContentPage()
    {
        Content = new Grid
        {
            RowDefinitions = Rows.Define(
                (Row.TextEntry, 36)),

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

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

                new Entry
                {
                    Keyboard = Keyboard.Numeric,
                }.Row(Row.TextEntry).Column(Column.Input)
                 .BackgroundColor(Colors.AliceBlue)
                 .FontSize(15)
                 .Placeholder("Enter number")
                 .TextColor(Colors.Black)
                 .Height(44)
                 .Margin(5, 5)
                 .Bind(Entry.TextProperty, static (ViewModel vm) => vm.RegistrationCode, static (ViewModel vm, string text) => vm.RegistrationCode = text)
            }
        };
    }

    enum Row { TextEntry }
    enum Column { Description, Input }
}

コンバーター

C# マークアップパッケージでは、アプリケーション UI をビルドするときに、IValueConverter 実装と IMultiValueConverter 実装をインラインで定義する機能が提供されます。

コンバータ	説明
`FuncConverter`	`FuncConverter` は、UI のビルド時に `IValueConverter` 実装をインラインで定義する機能を提供します。
`FuncMultiConverter`	`FuncMultiConverter` は、UI のビルド時に `IMultiValueConverter` 実装をインラインで定義する機能を提供します。

拡張機能

注

C# マークアップには、特定のビュープロパティを設定する拡張メソッドが含まれています。これらはコードの読みやすさを向上させるために設計されており、プロパティセッターと組み合わせて使用できます。プロパティに拡張メソッドが存在する場合は、常に拡張メソッドを使用することをお勧めしますが、優先する残高を選択できます。

拡張	説明
`AbsoluteLayout`	AbsoluteLayout 拡張機能は、`AbsoluteLayout` に `View` を配置するのをサポートする一連の拡張メソッドを提供します。
`AutomationProperties`	`AutomationProperties` 拡張機能は、アクセシビリティ関連の設定の構成をサポートする一連の拡張メソッドを提供します。
`BindableLayout`	`BindableLayout` 拡張機能は、`EmptyView`、`ItemSource`、および `ItemTemplate`の構成をサポートする一連の拡張メソッドを提供します。
`BindableObject`	`BindableObject` 拡張機能は、`BindableObject` で `Binding` を構成するのをサポートする一連の拡張メソッドを提供します。
`DynamicResourceHandler`	`DynamicResourceHandler` 拡張機能には、アプリのテーマ設定に使用できる `IDynamicResourceHandler` の構成をサポートする一連の拡張メソッドが用意されています。
`Element`	`Element` 拡張機能は、`Element`のパディング、効果、フォント属性、動的リソース、テキスト、テキストの色の構成をサポートする一連の拡張メソッドを提供します。
`FlexLayout`	FlexLayout 拡張機能は、`FlexLayout`での `View` の配置をサポートする一連の拡張メソッドを提供します。
`Grid`	Grid 拡張機能には、Grid の構成をサポートする一連の拡張メソッドが用意されています。
`Image`	`Image` 拡張機能には、`IImage` コントロールの構成をサポートする一連の拡張メソッドが用意されています。
`ItemsView`	`ItemsView` 拡張機能は、`CarouselView` や `CollectionView`などの `ItemsView` コントロールの構成をサポートする一連の拡張メソッドを提供します。
`Label`	`Label` 拡張機能には、`Label` コントロールの構成をサポートする一連の拡張メソッドが用意されています。
`Placeholder`	`Placeholder` 拡張機能には、`IPlaceholder` コントロールの構成をサポートする一連の拡張メソッドが用意されています。
`SemanticProperties`	`SemanticProperties` 拡張機能は、アクセシビリティ関連の設定の構成をサポートする一連の拡張メソッドを提供します。
`Style`	`Style<T>` は、`Microsoft.Maui.Controls.Style`の構成をサポートする一連の fluent 拡張メソッドを提供します。
`TextAlignment`	`TextAlignment` 拡張機能は、`ITextAlignment`を実装するコントロールの `HorizontalTextAlignment` および `VeticalTextAlignment` プロパティの構成をサポートする一連の拡張メソッドを提供します。
`View`	`View` 拡張機能は、`View`から継承するコントロールの配置の構成をサポートする一連の拡張メソッドを提供します。
`VisualElement`	`VisualElement` 拡張機能は、`VisualElement`のサイズ設定、スタイル設定、および動作の構成をサポートする一連の拡張メソッドを提供します。