本記事の概要
この記事では Binding の基本について説明します。
公式サイト情報はコチラを参照してください。
そもそもバインディング（Binding）とは?
バインディングとは、２つのオブジェクト間のプロパティをリンクすることを意味します。
例えば、スライダーコントロールの Value プロパティをラベルの Text プロパティにバインディングすると、スライダーの操作結果がリアルタイムにラベルに反映されるようになります。
バインディングのイメージ
バインディングを使用しない場合は、Slider の ValueChanged イベントを使用して、Label の Text プロパティ値を変更をするようなコードを書く必要があります。
イベントの利用イメージ
バインディングを理解する上で、ソースとターゲットの理解は欠かせません。
ソースとはプロパティ（またはオブジェクト）の参照元を指し、ターゲットとはソースのオブジェクト（またはプロパティ）が連携される先を指します。
先ほどの例ですと、Slider.Value がソース、Label.Text がターゲットになります。
ソースとターゲット
BindingContext と Binding Path について
バインディングを理解する上でもう１つ理解しておく必要があるのが、BindingContext と Binding Path です。
BindingContext と Binding Path はターゲット側に指定します。
XAML で BindingContext とBinding Path を利用するイメージを以下に示します。
Binding Context と Binding Path の使用方法
BindingContext は、どのオブジェクトを参照するのかを指定するためのものです。
先ほどの例ではターゲットオブジェクトは Label です。BindingContext に指定するソースオブジェクトは Slider を指定することになります。
Binding Path は、BindingContext で指定したオブジェクトの、どのプロパティ（オブジェクト）を参照するのかを指定します。参照したいのは Slider.Value ですので、Value プロパティを指定することになります。
BindingContext と Binding Path の例
もっとシンプルに書く
先ほどの例では、BindingContext とBinding Path を使用しましたが、コントロール間のバインディングは Binding Source を使用して、もっとシンプルに書くことができます。
ターゲットのプロパティ（下図では Label の Text プロパティ）にBinding Source を使用して、ソースのプロパティ（Slider の Value）をバインディングします。
Binding Source を使用したバインディングのイメージ
バインディングの実例
XAML による例
以下の例では、Slider の Value プロパティを、Label の Text プロパティにバインディングする XAML の例です。
XAML の例
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppSample.MainPage">
<ScrollView>
<VerticalStackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Center">
<Label x:Name="myLabel"
Text="{Binding Source={x:Reference mySlider},
Path=Value}" />
<Slider x:Name="mySlider" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
C# の例
バインディングは、XAML だけではなく、コードビハインドで行うこともできます。
先ほど示した XAML の例を、コードビハインドで行うようにした例を以下に示します。
使用するのはターゲットオブジェクトの BindingContext プロパティ と SetBinding メソッドを使用します。
ターゲットは Label になりますので、Label の BindingContext にSlider を指定しています。
また Binding Path の指定ですが、コードビハインドでは SetBinding メソッドを使用します。第１引数には BindableProperty を指定する必要があります。例えば myLabel.Text をターゲットプロパティにしたい場合は、myLabel の親クラスである Label の TextProperty を指定します。第２引数には、ソースのプロパティ名を文字列で指定する必要がありますので、Slider の “Value” を指定します。
C# の例
public MainPage()
{
InitializeComponent();
myLabel.BindingContext = mySlider;
myLabel.SetBinding(Label.TextProperty, "Value");
}
このときの XAML は以下の通りです。
XAML の例
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppSample.MainPage">
<ScrollView>
<VerticalStackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Center">
<Label x:Name="myLabel" />
<Slider x:Name="mySlider" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
バインディングの例
.NET MAUI Tips
本サイトでまとめている .NET MAUI Tips の一覧はこちらから確認できます。
コメント