Bindingでデータの疎結合を行う

Binding

前回、ViewとModelとViewModelのファイルの疎結合を行いました。
続いて足し算に用いるデータである1つめの値、2つめの値、1と2を足した結果の3つのint型のデータをBindingでViewと疎結合を行います。
Bindingについて知らない人はWindowsストアアプリプログラミングTipsのBindingの章を見てください。

まず、データBindingを行うには、Bindingしたいコントロール(3つのTextBox)のDataContextプロパティにBindingしたいデータ(Value1,Value2,Resut)を入れる必要があります。

今回の場合、TextBoxのDataContextは親コントロールであるPageクラスのDataContextと同じものになるので
PageクラスのDataContextにMainViewModelを入れます。

MainPage.xamlのPageタグに名前空間を追加して、

xmlns:viewModel="using:MvvmSample.ViewModel"

DataContextプロパティにMainViewModelを入れます。

<!--DataContext-->
<Page.DataContext>
    <viewModel:MainViewModel />
</Page.DataContext>

次に3つのTextBoxにBindingの構文を書きます。
今回DataContextはMainViewModelなのでBindingのPathはSumModel.Value1となります。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock HorizontalAlignment="Left" Margin="108,126,0,0" TextWrapping="Wrap" Text="Sum" VerticalAlignment="Top" FontSize="72" FontFamily="Segoe UI Light"/>
    <TextBlock HorizontalAlignment="Left" Margin="456,285,0,0" TextWrapping="Wrap" Text="+" VerticalAlignment="Top" FontSize="72" FontFamily="Segoe UI Light"/>
    <TextBlock HorizontalAlignment="Left" Margin="825,285,0,0" TextWrapping="Wrap" Text="=" VerticalAlignment="Top" FontSize="72" FontFamily="Segoe UI Light"/>
    <!--1番目の値-->
    <TextBox Text="{Binding SumModel.Value1,Mode=TwoWay}" HorizontalAlignment="Left" Margin="180,318,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="222"/>
    <!--2番目の値-->
    <TextBox Text="{Binding SumModel.Value2,Mode=TwoWay}" HorizontalAlignment="Left" Margin="564,318,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="222"/>
    <!--足した結果-->
    <TextBox Text="{Binding SumModel.Result,Mode=OneWay}" HorizontalAlignment="Left" Margin="909,318,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="222" IsReadOnly="True"/>
    <!--計算開始ボタン-->
    <Button Content="Calc" HorizontalAlignment="Left" Margin="1008,417,0,0" VerticalAlignment="Top" Height="68" Width="126" FontSize="36"/>

</Grid>

ModeはTextBoxの入力もModelに反映したいのでTwoWayとなります。

6

ViewModelから変更通知を送る

続いて、ViewModelやModelからViewに変更通知を送るためにINotifyPropertyChangedインターフェースを実装して変更通知をViewに送信します。

MVVMLightToolkitの場合、ViewModelBaseがINotifyPropertyChangedを実装していて、
「RaisePropertyChanged」メソッドを実行するだけで変更通知を送ることができます。
フィールドの値が書き換えられた時に通知を行うので
プロパテイのセッターにRaisePropertyChangedを書きます。
MainViewModel.csのSumModelのところをこのようにします。
RaisePropertyChangedメソッドの引数にはプロパティ名をstring型でいれます。

//Model
private Sum sumModel;

public Sum SumModel
{
    get { return sumModel; }
    set { sumModel = value; RaisePropertyChanged("SumModel"); }
}

Modelから変更通知を送る

ModelもRaisePropertyChangedメソッドによって変更通知を行います。
RaisePropertyChangedはObservableObjectクラスのメソッドなので継承しているので使うことができます。

//1つめのたす値
private int value1;

public int Value1
{
    get { return value1; }
    set { value1 = value; RaisePropertyChanged("Value1"); }
}
//2つめのたす値
private int value2;

public int Value2
{
    get { return value2; }
    set { value2 = value; RaisePropertyChanged("Value2"); }
}
//足した結果
private int result;

public int Result
{
    get { return result; }
    set { result = value; RaisePropertyChanged("Result"); }
}

これでModelからの変更通知を送ることができました。
ModelであるSumクラスはこのようになります。
今回は、値の確認のためにコンストラクタでValue1とValue2に適当な値を入れます。

public class Sum:INotifyPropertyChanged
{

    //1つめのたす値
    private int value1;

    public int Value1
    {
        get { return value1; }
        set { value1 = value; RasiePropertyChanged("Value1"); }
    }
    //2つめのたす値
    private int value2;

    public int Value2
    {
        get { return value2; }
        set { value2 = value; RaisePropertyChanged("Value2"); }
    }
    //足した結果
    private int result;

    public int Result
    {
        get { return result; }
        set { result = value; RaisePropertyChanged("Result"); }
    }

    //足し算を実行するメソッド
    public void LaunchSum()
    {
        Result = Value1 + Value2;
    }

    //コンストラクタ
    public Sum()
    {
          Value1 = 10;
          Value2 = 30;

    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void NotifyPropertyChanged(string propertyName)
    {
        if(PropertyChanged!=null)
            PropertyChanged(this,new PropertyChangedEventArgs(propertyName));
    }
}

ViewとModelの値の同期がとれていれば成功です。

8

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください