基本的なバインディング

[アーティクル]
09/26/2024

.NET Multi-platform App UI (.NET MAUI) のデータバインディングでは、通常は少なくとも一方がユーザーインターフェイスオブジェクトである 2 つのオブジェクト間において、プロパティのペアをリンクします。これら 2 つのオブジェクトは、"ターゲット" および "ソース" と呼ばれます。

"ターゲット" は、データバインディングが設定されている方のオブジェクト (およびプロパティ) です。
"ソース" は、データバインディングによって参照されている方のオブジェクト (およびプロパティ) です。

最も単純な場合は、データがソースからターゲットに流れます。これは、ソースプロパティの値からターゲットプロパティの値が設定されることを意味します。ただし、場合によっては、データがターゲットからソースに、または双方向に流れることがあります。

重要

データを受け取るのではなくデータを提供する場合でも、ターゲットは常に、データバインディングが設定されたオブジェクトになります。

バインディングコンテキストを使用したバインド

次の XAML の例を考えてみましょう。その目的は、Slider を操作して Label を回転させることです。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.BasicCodeBindingPage"
             Title="Basic Code Binding">
    <StackLayout Padding="10, 0">
        <Label x:Name="label"
               Text="TEXT"
               FontSize="48"
               HorizontalOptions="Center"
               VerticalOptions="Center" />

        <Slider x:Name="slider"
                Maximum="360"
                VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

データバインディングを使用しない場合は、Slider の ValueChanged イベントを、Slider の Value プロパティにアクセスしてその値を Label の Rotation プロパティに設定するイベントハンドラーに設定します。データバインディングによってこのタスクが自動化されるため、イベントハンドラーとイベントハンドラー内のコードは不要になります。

BindableObject から派生した任意のクラスのインスタンスにバインディングを設定できます。これには、Element、VisualElement、View、View の派生クラスが含まれます。バインディングは、常にターゲットオブジェクトに設定されます。そのバインディングによって、ソースオブジェクトが参照されます。データバインディングを設定するには、次に示すターゲットクラスの 2 つのメンバーを使用します。

BindingContext プロパティでは、ソースオブジェクトを指定します。
SetBinding メソッドでは、ターゲットプロパティとソースプロパティを指定します。

この例では、Label がバインディングターゲットで、Slider がバインディングソースです。 Slider ソースにおける変更が、Label テンプレートの回転に影響を与えます。データはソースからターゲットに流れます。

BindableObject によって定義された SetBinding メソッドには、Binding クラスの派生元となる BindingBase 型の引数が使用されていますが、BindableObjectExtensions クラスによって定義された他の SetBinding メソッドがあります。 XAML の分離コードでは、BindableObjectExtensions クラスのより単純な SetBinding 拡張メソッドが使用されます。

public partial class BasicCodeBindingPage : ContentPage
{
    public BasicCodeBindingPage()
    {
        InitializeComponent();

        label.BindingContext = slider;
        label.SetBinding(Label.RotationProperty, "Value");
    }
}

Label オブジェクトはバインディングターゲットです。したがって、このプロパティが設定されるオブジェクトであり、メソッドが呼び出される対象のオブジェクトです。 BindingContext プロパティでは、バインディングソースである Slider が示されています。 SetBinding メソッドはバインディングターゲットに対して呼び出されますが、ターゲットプロパティとソースプロパティの両方を指定しています。ターゲットプロパティである Label.RotationProperty は、BindableProperty オブジェクトとして指定されています。ソースプロパティは文字列として指定され、Slider の Value プロパティを示しています。

重要

ターゲットプロパティは、バインド可能なプロパティによってサポートされている必要があります。したがって、ターゲットオブジェクトは BindableObject から派生したクラスのインスタンスである必要があります。詳細については、「バインド可能プロパティ」をご覧ください。

ソースプロパティは文字列として指定されます。内部的には、実際のプロパティにアクセスするためにリフレクションが使用されます。ただし、この特定のケースでは、Value プロパティはバインド可能なプロパティによってもサポートされています。

Slider を操作すると、それに応じて Label が回転します。

基本的なコードバインディング

または、XAML でデータバインディングを指定することもできます。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.BasicXamlBindingPage"
             Title="Basic XAML Binding">
    <StackLayout Padding="10, 0">
        <Label Text="TEXT"
               FontSize="80"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               BindingContext="{x:Reference Name=slider}"
               Rotation="{Binding Path=Value}" />

        <Slider x:Name="slider"
                Maximum="360"
                VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

コードの場合と同様、ターゲットオブジェクトである Label にデータバインディングを設定しています。データバインディングの定義には、次の 2 つの XAML マークアップ拡張機能が使用されます。

x:Reference マークアップ拡張は、slider という名前の Slider であるソースオブジェクトを参照するために必要です。
Binding マークアップ拡張によって、Label の Rotation プロパティが、Slider の Value プロパティにリンクされます。

XAML マークアップ拡張機能の詳細については、「XAML マークアップ拡張機能を使用する」をご覧ください。

Note

ソースプロパティは Binding マークアップ拡張機能の Path プロパティで指定され、これは Binding クラスの Path プロパティに対応します。

x:Reference や Binding などの XAML マークアップ拡張には、コンテンツプロパティ属性を定義することができます。これは、XAML マークアップ拡張に対してプロパティ名を使用する必要がないことを意味します。 Name プロパティは x:Reference のコンテンツプロパティであり、Path プロパティは Binding のコンテンツプロパティです。つまり、これらは式から省略できます。

<Label Text="TEXT"
       FontSize="80"
       HorizontalOptions="Center"
       VerticalOptions="Center"
       BindingContext="{x:Reference slider}"
       Rotation="{Binding Value}" />

重要

バインドのパフォーマンスは、コンパイル済みのバインドを使用して向上させることができます。詳しくは、「コンパイル済みのバインド」を参照してください。

バインディングコンテキストを使用しないバインド

BindingContext プロパティは、データバインディングの重要なコンポーネントですが、常に必要なわけではありません。代わりに SetBinding 呼び出しまたは Binding マークアップ拡張機能でソースオブジェクトを指定できます。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.AlternativeCodeBindingPage"
             Title="Alternative Code Binding">
    <StackLayout Padding="10, 0">
        <Label x:Name="label"
               Text="TEXT"
               FontSize="40"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Slider x:Name="slider"
                Minimum="-2"
                Maximum="2"
                VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

この例では、Slider は Label の Scale プロパティを制御するように定義されています。そのため、Slider は -2 から 2 までの範囲に設定されています。

分離コードファイルは、SetBinding メソッドとのバインドを設定します。2 番目の引数は Binding クラスのコンストラクターです。

public partial class AlternativeCodeBindingPage : ContentPage
{
    public AlternativeCodeBindingPage()
    {
        InitializeComponent();

        label.SetBinding(Label.ScaleProperty, new Binding("Value", source: slider));
    }
}

Binding コンストラクターには 6 つのパラメーターがあるため、名前付き引数を使用して source パラメーターが指定されています。その引数は slider オブジェクトです。

Note

VisualElement クラスでは、ScaleX プロパティと ScaleY プロパティも定義しています。これにより、VisualElement を縦方向と横方向に別々にスケールできます。

または、XAML でデータバインディングを指定することもできます。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.AlternativeXamlBindingPage"
             Title="Alternative XAML Binding">
    <StackLayout Padding="10, 0">
        <Label Text="TEXT"
               FontSize="40"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               Scale="{Binding Source={x:Reference slider},
                               Path=Value}" />

        <Slider x:Name="slider"
                Minimum="-2"
                Maximum="2"
                VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

この例では、Binding マークアップ拡張機能にコンマで区切った Source と Path という 2 つのプロパティが設定されました。 Source プロパティは、埋め込み x:Reference マークアップ拡張に設定されています。それ以外の場合、BindingContext を設定するのと同じ構文になります。

Binding マークアップ拡張のコンテンツプロパティは Path ですが、そのマークアップ拡張の Path= の部分は、式の中で最初のプロパティである場合にのみ省略できます。 Path= の部分を省略するには、2 つのプロパティを入れ替える必要があります。

Scale="{Binding Value, Source={x:Reference slider}}" />

XAML マークアップ拡張は、通常は中かっこで区切りますが、オブジェクト要素として表すこともできます。

<Label Text="TEXT"
       FontSize="40"
       HorizontalOptions="Center"
       VerticalOptions="Center">
    <Label.Scale>
        <Binding Source="{x:Reference slider}"
                 Path="Value" />
    </Label.Scale>
</Label>

この例では、Source プロパティと Path プロパティは標準の XAML 属性です。値は引用符で囲んで使用し、属性はコンマで区切りません。 x:Reference マークアップ拡張は、オブジェクト要素にすることもできます。

<Label Text="TEXT"
       FontSize="40"
       HorizontalOptions="Center"
       VerticalOptions="Center">
    <Label.Scale>
        <Binding Path="Value">
            <Binding.Source>
                <x:Reference Name="slider" />
            </Binding.Source>
        </Binding>
    </Label.Scale>
</Label>

この構文は一般的ではありませんが、複合オブジェクトを使用する場合に必要になることがあります。

これまでに示した例では、Binding の BindingContext プロパティと Source プロパティを x:Reference マークアップ拡張に設定して、ページ上の別のビューを参照しています。これら 2 つのプロパティは、Object 型であり、ソースのバインドに適したプロパティを含む任意のオブジェクトに設定することができます。また、BindingContext や Source プロパティを x:Static マークアップ拡張機能に設定して、静的プロパティまたはフィールドの値を参照したり、StaticResource マークアップ拡張機能に設定して、リソースディクショナリに格納されているオブジェクトを参照したり、ビューモデルのインスタンスであることが多いオブジェクトを直接参照したりすることもできます。

Note

Binding の Source プロパティと Path プロパティによってバインディングコンテキストが定義されるように BindingContext プロパティを Binding オブジェクトに設定することもできます。

バインディングコンテキストの継承

ソースオブジェクトは、Binding オブジェクトの BindingContext プロパティまたは Source プロパティを使用して指定できます。両方が設定されている場合、Binding の Source プロパティが BindingContext よりも優先されます。

重要

BindingContext プロパティの値はビジュアルツリーを介して継承されます。

次の XAML の例は、バインディングコンテキストの継承を示します。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.BindingContextInheritancePage"
             Title="BindingContext Inheritance">
    <StackLayout Padding="10">
        <StackLayout VerticalOptions="Fill"
                     BindingContext="{x:Reference slider}">

            <Label Text="TEXT"
                   FontSize="80"
                   HorizontalOptions="Center"
                   VerticalOptions="End"
                   Rotation="{Binding Value}" />

            <BoxView Color="#800000FF"
                     WidthRequest="180"
                     HeightRequest="40"
                     HorizontalOptions="Center"
                     VerticalOptions="Start"
                     Rotation="{Binding Value}" />
        </StackLayout>

        <Slider x:Name="slider"
                Maximum="360" />
    </StackLayout>
</ContentPage>

この例では、StackLayout の BindingContext プロパティが slider オブジェクトに設定されています。このバインディングコンテキストは、Label と BoxView の両方によって継承され、これらは両方とも、Rotation プロパティが Slider の Value に設定されています。

バインディングコンテキストの継承

次の方法で共有

基本的なバインディング

バインディングコンテキストを使用したバインド

バインディングコンテキストを使用しないバインド

バインディングコンテキストの継承

その他のリソース

次の方法で共有

基本的なバインディング

バインディング コンテキストを使用したバインド

バインディング コンテキストを使用しないバインド

バインディング コンテキストの継承

その他のリソース

バインディングコンテキストを使用したバインド

バインディングコンテキストを使用しないバインド

バインディングコンテキストの継承