ラベルの値をバインディング

前回はコードビハインド側にボタンクリックイベントを書いて，その中でラベルの値を変更した場合に，テストコードからうまくテストすることができないという事例を解説しました。今回はViewとViewModelに分けたことで，うまくテストコードが書けるかどうかを検証していきます。

ラベルのデータバインディング

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BlankApp1.Views.MainPage"
             Title="{Binding Title}">

    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" />
        <Label Text="AAA" x:Name="LabelA"/>
        <Button Text="button a" Clicked="Button_Clicked"/>

        <Label Text="{Binding LabelC}"/>
    
    </StackLayout>

</ContentPage>

前回使用した「LabelA」とボタンはそのまま残しておきます。その下に，ラベルを設置します。今回記述するLabelはデータバインディングをします。データバインディングのやり方は画面上部の「Title=”{Binding Title}”」が参考になります。これを真似て，「」とします。「LabelC」というのは，MainPageViewModelに作成する予定のプロパティです。この後作成します。

using BlankApp1.Conditions;
using BlankApp1.Objects;
using BlankApp1.Views;
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using Prism.Services;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace BlankApp1.ViewModels
{
public class MainPageViewModel : ViewModelBase
{
    public MainPageViewModel(INavigationService navigationService)
        : base(navigationService)
    {
        Title = "Main Page";
        LabelC = "DDD";
    }

    private string _labelC = string.Empty;
    public string LabelC
    {
        get { return _labelC; }
        set
        {
            SetProperty(ref _labelC, value);
        }
    }

 }

MainPageViewModelに「LabelC」のプロパティを記述します。型はstringで作成します。なぜstringなのか？というと，それはバインドする先が，LabelのTextだからですね。LabelコントロールのTextプロパティはstringです。よって，それに合わせてバインドする側のプロパティも同じ型「string」にしておきます。 書き方は先述した通り，Titleプロパティの書き方をまねしましょう。TitleプロパティはViewModelBaseに記述されています。Stringのprivate変数と，publicのstringのプロパティを作成します。このままだと，正しくバインドされているかわからないので，起動時に「DDD」と表示されるようにしましょう。コンストラクタに「LabelC = “DDD”;」と記述しておきます。これでViewModelが生成されると，LabelCの値は「DDD」なります。View側のLabelのTextプロパティにうまくバインドされていれば，画面を起動したら，値は「DDD」と表示されているはずです。この状態で一度実行してみます。   実行すると，起動直後からラベルに「DDD」と表示されているのが確認できます。これでPrismを使ってラベルの値がうまくデータバインディングされたという事になります。

次回は，ボタンのクリックイベントをViewModel側に移動するやり方について解説していきます。