[UWPアプリ] データバインディング

2016.02.162019.12.13

WindowsアプリケーションでTextBoxコントロールにデータを表示する場合は、以下のように記述するのが一般的です。

textBox1.Text = "HIRO";

UWPアプリでも以下のように記述してデータを表示することが可能です。

textBlock.Text = "HIRO";

UWPアプリでは上記以外に、見た目の部分とデータの部分を分離して管理するデータバインディングという機能があります。

今回は、このデータバインディングについて見ていきます（以下バインディング）。

バインディングを理解するには以下の2つについて知っておく必用があります。

バインディングターゲット
バインディングソース

バインディングターゲットとは、コントロールやユーザーインターフェースの要素を表し、バインディングソースはクラスのインスタンスプロパティ（表示するデータや、見た目の装飾を表す値など）のことです。

データバインディングを理解するためにシンプルなアプリを作成します。

はじめに新規プロジェクトとして「空のアプリ（WIndows）」を作成します。

続いてバインディングターゲットを作成します。ここでは、MainPage.xaml を開き、2つのTextBlockを配置こととします。

これらのTextBlockをバインディングターゲットとし、氏名と電話番号のデータが表示されるようにしていきます。

バインディングソースは、普通のクラスとして作成し、バインディングターゲットに表示するためのデータである氏名と電話番号をプロパティとして持たせます。

新規でPersonクラス（Person.cs）を作成し、コードを以下のように記述します。

public class Person
{
    /// <summary>
    /// 氏名
    /// </summary>
    public string Name { get; set; }

    /// <summary>
    /// 電話番号
    /// </summary>
    public string Tel { get; set; }

    /// <summary>
    /// コンストラクタ
    /// </summary>
    public Person()
    {
        this.Name = "HIRO";
        this.Tel = "090-XXXX-XXXX";
    }
}

続いて、ViewModelを作成します。ViewModelというのは、バインディングターゲットとバインディングソースの橋渡しをする役目を担います。

ViewModelには、先ほど作成したPersonクラスのインスタンスをプロパティとして持たせます

実際にはこのViewModelを介してデータの変更をしたり、バインディングターゲットからのデータを受け取ったります。

新規クラスとしてPersonViewModelというクラス（PersonViewModel.cs）を作成して、以下のようにコードを編集します。

public class PersonViewModel
{
    private Person _personData = new Person();
    public Person PersonData
    {
        get
        {
            return this._personData;
        }
    }
}

続いてMainPage.xaml.csでPersonViewModelのインスタンスをプロパティとして公開するコードを記述します。

public sealed partial class MainPage : Page
{
    // PersonViewModelのインスタンスをViewModelプロパティとして公開する
    public PersonViewModel ViewModel { get; set; }

    public MainPage()
    {
        this.InitializeComponent();

        // PersonViewModelのインスタンスをViewModelプロパティに代入
        this.ViewModel = new PersonViewModel();
    }
}

これで、氏名と電話番号データをバインディングソースとして公開する準備ができました。

最後に、MainPage.xamlのTextBlockのコードを以下のように編集します。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock Text="{x:Bind ViewModel.PersonData.Name}" Margin="10,10,0,0" />
    <TextBlock Text="{x:Bind ViewModel.PersonData.Tel}" Margin="10,35,0,0"/>
</Grid>

上記コードのTextBlockに注目してください。

Text属性は、TextBlockに表示する文字をセットする場所です。

ここに”{X:Bind～”という記述があります。この部分が先ほど作成したPersonクラスのデータをバインド（連結）している部分です。バインドしている値は、MainPage.xaml.csで作成したViewModelプロパティの値です。ViewModel.PersonData.Nameが氏名のデータで、ViewModel.PersonData.Telが電話番号のデータです。

これでデータバインディングを使用したアプリの完成です。

実際に実行して確認をしてみましょう。

「textBlock.Text = “HIRO”」のようなコードを記述することなくデータが表示されるのを確認できることでしょう。