Share via


C# Markup

概要

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 の特定の行に表示されるように設定され、EntryGrid のすべての列にまたがっています。 さらに、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 を構築するときに、IValueConverterIMultiValueConverter の実装をインラインで定義できます。

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

Extensions

Note

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

拡張機能 説明
AbsoluteLayout AbsoluteLayout 拡張機能は、AbsoluteLayout 内での View の位置付けをサポートする一連の拡張メソッドを提供します。
AutomationProperties AutomationProperties 拡張機能は、アクセシビリティ関連の設定の構成をサポートする一連の拡張メソッドを提供します。
BindableLayout BindableLayout 拡張機能は、その EmptyViewItemSourceItemTemplate の構成をサポートする一連の拡張メソッドを提供します。
BindableObject BindableObject 拡張機能は、BindableObject 上での Binding の構成をサポートする一連の拡張メソッドを提供します。
DynamicResourceHandler DynamicResourceHandler 拡張機能は、アプリのテーマ設定に使用できる IDynamicResourceHandler の構成をサポートする一連の拡張メソッドを提供します。
Element Element 拡張機能は、Element のパディング、効果、フォント属性、動的リソース、テキスト、テキストの色の構成をサポートする一連の拡張メソッドを提供します。
FlexLayout FlexLayout 拡張機能は、FlexLayout 内での View の位置付けをサポートする一連の拡張メソッドを提供します。
Grid Grid 拡張機能は、Grid の構成をサポートする一連の拡張メソッドを提供します。
Image Image 拡張機能は、IImage コントロールの構成をサポートする一連の拡張メソッドを提供します。
ItemsView ItemsView 拡張機能は、CarouselViewCollectionView などの 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 のサイズ設定、スタイル設定、ビヘイビアーの構成をサポートする一連の拡張メソッドを提供します。