Commandでユーザーの入力を検知する

Command

MVVMにおいて、Viewで受け付けるユーザーからの入力(Buttonを押すなど)はCommandとしてViewModelで処理を行います。

CommandはICommandインターフェースを実装したクラスが必要となります。
MVVMLightToolkitではRelayCommandというクラスがあるのでこれをつかって、Commandを実装してきます。

Commadを実装するところは、ViewModelになります。
MainViewModel.csのメンバとして、RelayCommand型のCalcCommandを追加します。

//計算開始コマンド
public RelayCommand CalcCommand { get; set; }

続いて、CalcCommandを初期化するために、コンストラクタで
CalcCommandをnewします。そのとき、コンストラクタ引数としてActionをいれます。
そうすることで、そのCommandを実行した時、Action内が呼び出されます。
つまり、ViewからCommandが送られたら、Command内のActionを実行し、Action内部でModelを使って計算を行います。

CalcCommand = new RelayCommand(() =>
{
    //CalcCommandが呼び出された時、この中が実行されるので
    //Modelを使って処理を行う

    //足し算
    SumModel.LaunchSum();
});

MainViewModel.csの全体はこのようになります。

public class MainViewModel : ViewModelBase
{
    //Model
    private Sum sumModel;

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

    //計算開始コマンド
    public RelayCommand CalcCommand { get; set; }
    
    //コンストラクター
    public MainViewModel()
    {
        SumModel = new Sum();

        CalcCommand = new RelayCommand(() =>
        {
            //CalcCommandが呼び出された時、この中が実行されるので
            //Modelを使って処理を行う

            //足し算
            SumModel.LaunchSum();
        });
    }
}

ViewからCommandを呼び出す

では、ViewからCommandを呼び出してみましょう。

今回はButtonが押されたときにCommandを実行できればよいので、
ButtonのCommandプロパティにCalcCommandをBindingします。
ButtonはClickイベントに反応してCommandプロパティにバインドされているCommandを実行しますが、もし他のイベントなどに反応させたかったらビヘイビアを使います。

<!--計算開始ボタン-->
<Button Content="Calc" Command="{Binding CalcCommand}" HorizontalAlignment="Left" Margin="1008,417,0,0" VerticalAlignment="Top" Height="68" Width="126" FontSize="36"/>

これでCommandは実装できました。
実行して、Calcボタンを押すと2つの値が足されていたら成功です。

9

コメントを残す

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

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