XAML マークアップ拡張機能を使用する

[アーティクル]
02/25/2025

を参照してください。

.NET マルチプラットフォームアプリ UI (.NET MAUI) XAML マークアップ拡張機能は、さまざまなソースから要素属性を設定できるようにすることで、XAML の能力と柔軟性を高めるのに役立ちます。

たとえば、通常、BoxView の Color プロパティを次のように設定します。

<BoxView Color="Blue" />

ただし、代わりに、リソースディクショナリに格納されている値から、または作成したクラスの静的プロパティの値から、またはページ上の別の要素の Color 型のプロパティから、または個別の色相、彩度、および明度の値から構築された Color 属性を設定することをお勧めします。これらすべてのオプションは、XAML マークアップ拡張を使用して使用できます。

マークアップ拡張は、要素の属性を表す別の方法です。 .NET MAUI XAML マークアップ拡張機能は、通常、中かっこで囲まれた属性値によって識別できます。

<BoxView Color="{StaticResource themeColor}" />

いかなる中かっこ内の属性値も、常に XAML マークアップ拡張です。ただし、中かっこを使用せずに XAML マークアップ拡張機能を参照することもできます。

手記

いくつかの XAML マークアップ拡張は、XAML 2009 仕様の一部です。これらは、カスタムの x 名前空間プレフィックスを持つ XAML ファイルに表示され、一般的にこのプレフィックスと呼ばれます。

この記事で説明するマークアップ拡張機能に加えて、次のマークアップ拡張機能が .NET MAUI に含まれており、他の記事で説明されています。

AppThemeBinding - 現在のシステムテーマに基づいて使用するリソースを指定します。詳細については、「AppThemeBinding マークアップ拡張を参照してください。
Binding - 2 つのオブジェクトのプロパティ間のリンクを確立します。詳細については、「データバインディングの」を参照してください。
DynamicResource - リソースディクショナリ内のオブジェクトの変更に応答します。詳細については、「動的スタイル」を参照してください。
FontImage - ImageSourceを表示できる任意のビューにフォントアイコンを表示します。詳細については、「フォントアイコンを読み込む」を参照してください。
OnIdiom - アプリケーションが実行されているデバイスのイディオムに基づいて UI の外観をカスタマイズします。詳細については、「デバイスのイディオムに基づいて UI の外観をカスタマイズする」を参照してください。
OnPlatform - プラットフォームごとに UI の外観をカスタマイズします。詳細については、「プラットフォームに基づいて UI の外観をカスタマイズする」を参照してください。
RelativeSource - バインディングターゲットの位置を基準にバインディングソースを設定します。詳細については、「相対バインディングの」を参照してください。
StaticResource - リソースディクショナリからオブジェクトを参照します。詳細については、「リソースディクショナリを参照してください。
TemplateBinding - コントロールテンプレートからデータバインディングを実行します。詳細については、「コントロールテンプレートの」を参照してください。

x:Static マークアップ拡張

x:Static マークアップ拡張は、StaticExtension クラスでサポートされています。クラスには、パブリック定数、静的プロパティ、静的フィールド、または列挙メンバーの名前に設定する string 型の Member という名前の 1 つのプロパティがあります。

x:Static を使用する方法の 1 つは、まず、次の AppConstants クラスのような定数または静的変数を持つクラスを定義することです。

static class AppConstants
{
    public static double NormalFontSize = 18;
}

次の XAML は、Label.FontSize プロパティ要素タグの間に StaticExtension クラスをインスタンス化する最も冗長な方法を示しています。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sys="clr-namespace:System;assembly=netstandard"
             xmlns:local="clr-namespace:MarkupExtensions"
             x:Class="MarkupExtensions.StaticDemoPage"
             Title="x:Static Demo">
    <StackLayout Margin="10, 0">
        <Label Text="Label No. 1">
            <Label.FontSize>
                <x:StaticExtension Member="local:AppConstants.NormalFontSize" />
            </Label.FontSize>
        </Label>
        ···
    </StackLayout>
</ContentPage>

XAML パーサーでは、StaticExtension クラスを x:Static省略することもできます。

<Label Text="Label No. 2">
    <Label.FontSize>
        <x:Static Member="local:AppConstants.NormalFontSize" />
    </Label.FontSize>
</Label>

この構文は、StaticExtension クラスとメンバー設定を中かっこで囲むことで、さらに簡略化できます。結果の式は、FontSize 属性に直接設定されます。

<Label Text="Label No. 3"
       FontSize="{x:StaticExtension Member=local:AppConstants.NormalFontSize}" />

この例では、中かっこ内に 引用符 ありません。 StaticExtension の Member プロパティは XML 属性ではなくなりました。マークアップ拡張の式の一部です。

x:StaticExtension をオブジェクト要素として使用する際に x:Static と略せるように、中かっこの中の式でも略せます。

<Label Text="Label No. 4"
       FontSize="{x:Static Member=local:AppConstants.NormalFontSize}" />

StaticExtension クラスには、プロパティ Memberを参照する ContentProperty 属性があり、このプロパティをクラスの既定のコンテンツプロパティとしてマークします。中かっこで表された XAML マークアップ拡張の場合、式の Member= 部分を省略することができます。

<Label Text="Label No. 5"
       FontSize="{x:Static local:AppConstants.NormalFontSize}" />

これは、x:Static マークアップ拡張の最も一般的な形式です。

XAML の例のルートタグには、.NET System 名前空間の XML 名前空間宣言も含まれています。これにより、Label フォントサイズを静的フィールド Math.PIに設定できます。その結果、テキストはかなり小さいので、Scale プロパティは Math.Eに設定されます。

<Label Text="&#x03C0; &#x00D7; E sized text"
       FontSize="{x:Static sys:Math.PI}"
       Scale="{x:Static sys:Math.E}"
       HorizontalOptions="Center" />

次のスクリーンショットは、XAML 出力を示しています。

x:Static デモをします。

x:Reference マークアップ拡張

x:Reference マークアップ拡張は、ReferenceExtension クラスでサポートされています。このクラスには、string 型の Name という名前の単一のプロパティがあり、x:Nameで名前が付けられたページ上の要素の名前に設定します。この Name プロパティは ReferenceExtensionのコンテンツプロパティであるため、x:Reference が中かっこで囲まれる場合、Name= は必要ありません。 x:Reference マークアップ拡張機能は、データバインディングでのみ使用されます。データバインディングの詳細については、「データバインディングの」を参照してください。

次の XAML の例は、データバインディングを使用した x:Reference の 2 つの使用方法を示しています。1 つ目は Binding オブジェクトの Source プロパティを設定するために使用され、2 つ目は 2 つのデータバインディングの BindingContext プロパティを設定するために使用されます。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MarkupExtensions.ReferenceDemoPage"
             x:Name="page"
             Title="x:Reference Demo">    
    <StackLayout Margin="10, 0">        
        <Label x:DataType="ContentPage"
               Text="{Binding Source={x:Reference page},
                              StringFormat='The type of this page is {0}'}"
               FontSize="18"
               VerticalOptions="Center"
               HorizontalTextAlignment="Center" />
        <Slider x:Name="slider"
                Maximum="360"
                VerticalOptions="Center" />
        <Label x:DataType="Slider"
               BindingContext="{x:Reference slider}"
               Text="{Binding Value, StringFormat='{0:F0}&#x00B0; rotation'}"
               Rotation="{Binding Value}"
               FontSize="24"
               HorizontalOptions="Center"
               VerticalOptions="Center" />        
    </StackLayout>
</ContentPage>

この例では、どちらの x:Reference 式も、ReferenceExtension クラス名の省略形を使用し、式の Name= 部分を排除します。最初の例では、x:Reference マークアップ拡張が Binding マークアップ拡張に埋め込まれており、Source プロパティと StringFormat プロパティはコンマで区切られています。

次のスクリーンショットは、XAML 出力を示しています。

x:Reference デモ。

x:Type マークアップ拡張

x:Type マークアップ拡張は、C# typeof キーワードに相当する XAML です。これは、クラスまたは構造体名に設定する必要がある型 string の TypeName という名前のプロパティを定義する TypeExtension クラスでサポートされています。 x:Type マークアップ拡張は、そのクラスまたは構造体の Type オブジェクトを返します。 TypeName は TypeExtensionの content プロパティであるので、中かっこで x:Type が表示される場合、TypeName= は必要ありません。

x:Type マークアップ拡張機能は、一般的に x:Array マークアップ拡張機能と共に使用されます。詳細については、「x:Array マークアップ拡張を参照してください。

次の XAML の例では、x:Type マークアップ拡張機能を使用して .NET MAUI オブジェクトをインスタンス化し、StackLayoutに追加する方法を示します。 XAML は、Command プロパティが Binding に設定され、CommandParameter プロパティが 3 つの .NET MAUI ビューの型に設定された 3 つの Button 要素で構成されます。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MarkupExtensions"
             x:Class="MarkupExtensions.TypeDemoPage"
             Title="x:Type Demo"
             x:DataType="local:TypeDemoPage">
    <StackLayout x:Name="stackLayout"
                 Padding="10, 0">
        <Button Text="Create a Slider"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Slider}" />
        <Button Text="Create a Stepper"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Stepper}" />
        <Button Text="Create a Switch"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Switch}" />
    </StackLayout>
</ContentPage>

コードビハインドファイルは、CreateCommand プロパティを定義して初期化します。

public partial class TypeDemoPage : ContentPage
{
    public ICommand CreateCommand { get; private set; }

    public TypeDemoPage()
    {
        InitializeComponent();

        CreateCommand = new Command<Type>((Type viewType) =>
        {
            View view = (View)Activator.CreateInstance(viewType);
            view.VerticalOptions = LayoutOptions.Center;
            stackLayout.Add(view);
        });

        BindingContext = this;
    }
}

Button が押されると、CommandParameter 引数の新しいインスタンスが作成され、StackLayoutに追加されます。次に、3 つの Button オブジェクトは、動的に作成されたビューとページを共有します。

x:Type デモ。

ジェネリック型は、かっこ内のプレフィックス付き文字列引数としてジェネリック制約を指定することで、x:Type マークアップ拡張で指定できます。

<x:Array Type="{x:Type local:MyType(local:MyObject)}">
    ...
</x:Array>

複数の型引数は、プレフィックス付きの文字列引数としてコンマで区切って指定できます。

<x:Array Type="{x:Type local:MyType(local:MyObject,x:Boolean)}">
    ...
</x:Array>

XAML のジェネリックの詳細については、「ジェネリック」を参照してください。

x:Array マークアップ拡張

x:Array マークアップ拡張機能を使用すると、マークアップで配列を定義できます。これは、2 つのプロパティを定義する ArrayExtension クラスでサポートされています。

Type型の Type。配列内の要素の型を示します。このプロパティは、x:Type マークアップ拡張機能に設定する必要があります。
Items は IList型であり、項目自体のコレクションです。これは、ArrayExtensionのコンテンツプロパティです。

x:Array マークアップ拡張機能自体が中かっこ内に現れることはありません。代わりに、開始タグと終了タグ x:Array 項目の一覧を区切ります。

次の XAML の例では、ItemsSource プロパティを配列に設定して、x:Array を使用して項目を ListView に追加する方法を示します。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MarkupExtensions.ArrayDemoPage"
             Title="x:Array Demo Page">
    <ListView Margin="10">
        <ListView.ItemsSource>
            <x:Array Type="{x:Type Color}">
                <Color>Aqua</Color>
                <Color>Black</Color>
                <Color>Blue</Color>
                <Color>Fuchsia</Color>
                <Color>Gray</Color>
                <Color>Green</Color>
                <Color>Lime</Color>
                <Color>Maroon</Color>
                <Color>Navy</Color>
                <Color>Olive</Color>
                <Color>Pink</Color>
                <Color>Purple</Color>
                <Color>Red</Color>
                <Color>Silver</Color>
                <Color>Teal</Color>
                <Color>White</Color>
                <Color>Yellow</Color>
            </x:Array>
        </ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="Color">
                <ViewCell>
                    <BoxView Color="{Binding}"
                             Margin="3" />
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

この例では、ViewCell は、色のエントリごとに単純な BoxView を作成します。

x:Array のデモです。

手記

文字列や数値などの一般的な型の配列を定義する場合は、「Pass 引数に記載されている XAML 言語プリミティブタグを使用します。

x:Null マークアップ拡張

x:Null マークアップ拡張は、NullExtension クラスでサポートされています。プロパティがなく、単に C# null キーワードと同等の XAML です。

次の XAML の例は、x:Null マークアップ拡張機能を使用する方法を示しています。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MarkupExtensions.NullDemoPage"
             Title="x:Null Demo">
    <ContentPage.Resources>
        <Style TargetType="Label">
            <Setter Property="FontSize" Value="48" />
            <Setter Property="FontFamily" Value="OpenSansRegular" />
        </Style>
    </ContentPage.Resources>

    <StackLayout Padding="10, 0">
        <Label Text="Text 1" />
        <Label Text="Text 2" />
        <Label Text="Text 3"
               FontFamily="{x:Null}" />
        <Label Text="Text 4" />
        <Label Text="Text 5" />
    </StackLayout>
</ContentPage>

この例では、FontFamily プロパティを特定のフォントに設定する Setter を含む Label に対して暗黙的な Style を定義します。ただし、3 番目の Label では、その FontFamily を x:Nullに設定することで、暗黙的なスタイルで定義されたフォントの使用を回避します。

x:Null デモをします。

DataTemplate マークアップ拡張機能

DataTemplate マークアップ拡張機能を使用すると、型を DataTemplateに変換できます。 DataTemplateExtension クラスでサポートされています。string型の TypeName プロパティを定義します。これは、DataTemplateに変換する型の名前に設定されます。 TypeName プロパティは、DataTemplateExtensionの content プロパティです。そのため、中かっこで表現された XAML マークアップ式の場合は、式の TypeName= 部分を排除できます。

手記

XAML パーサーを使用すると、DataTemplateExtension クラスを DataTemplateと省略できます。

このマークアップ拡張機能の一般的な使用方法は、次の例に示すように、シェルアプリケーションにあります。

<ShellContent Title="Monkeys"
              Icon="monkey.png"
              ContentTemplate="{DataTemplate views:MonkeysPage}" />

この例では、MonkeysPage は ContentPage から DataTemplateに変換され、ShellContent.ContentTemplate プロパティの値として設定されます。これにより、MonkeysPage は、アプリケーションの起動時ではなく、ページへのナビゲーションが発生したときにのみ作成されます。

シェルアプリの詳細については、「Shell」を参照してください。

次の方法で共有