C# Markup

[アーティクル]
03/18/2024

概要

C# マークアップは、宣言型 .NET Multi-Platform App UI (.NET MAUI) ユーザーインターフェイスをコードで構築するプロセスを簡略化するように設計された、流暢なヘルパーメソッドとクラスのセットです。 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 データは viewmodel の RegistrationCode プロパティにバインドされます。各子ビューは Grid の特定の行に表示されるように設定され、Entry は Grid のすべての列にまたがっています。さらに、Entry の高さが、キーボード、色、テキストのフォントサイズ、Margin と共に設定されます。

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

次のように、C# マークアップでは、fluent API を使用してこれを定義できます。

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` 実装をインラインで定義する機能を提供します。

Extensions

Note

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` の構成をサポートする一連の流暢な拡張メソッドを提供します。
`TextAlignment`	`TextAlignment` 拡張機能は、`ITextAlignment` を実装するコントロールの `HorizontalTextAlignment` および `VeticalTextAlignment` プロパティの構成をサポートする一連の拡張メソッドを提供します。
`View`	`View` 拡張機能は、`View` から継承されるコントロールの配置の構成をサポートする一連の拡張メソッドを提供します。
`VisualElement`	`VisualElement` 拡張機能は、`VisualElement` のサイズ設定、スタイル設定、ビヘイビアーの構成をサポートする一連の拡張メソッドを提供します。