かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Blendを使う場合のViewModelクラス

Expression Blend 4を入れて遊んでたら素敵なものを見つけました。その名もCallMethodActionビヘイビアです。こいつは、イベントに応答して任意のメソッドを呼び出してくれる機能を持っています。
つまり、こいつを使えばViewModelにCommandを用意しなくても、Viewで発生した任意のイベントに応じてViewModelの任意のメソッドを呼び出せるということになります。これまで、Command対応してないのどうしよう・・・とかいう悩みも解決です。

ということで、さっそく使ってみます!!

Expresson Blendを起動して、BlendMVVMという名前でWPFアプリケーションを作成します。同時にVisual Sutdioでも同じプロジェクトを開いておきます。これは、Blendのプロジェクトの右クリックメニューからできるので、とてもシームレスです。


さて、VisualSutioでとりあえず作業します。まず、いつものViewModelBaseクラスを作成します。

namespace BlendMVVM
{
    using System.ComponentModel;

    public class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            var h = this.PropertyChanged;
            if (h != null)
            {
                h(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

こいつを継承する形で、MainWindowに対応するViewModelクラスであるMainWindowViewModelクラスを作成します。こいつは、Messageプロパティと、Messageプロパティに値をセットするだけの単純なメソッドを持つクラスです。

namespace BlendMVVM
{
    public class MainWindowViewModel : ViewModelBase
    {
        private string message;

        public string Message
        {
            get
            {
                return this.message;
            }

            set
            {
                this.message = value;
                OnPropertyChanged("Message");
            }
        }

        public void Greet()
        {
            this.Message = "こんにちは世界!!";
        }
    }
}

おそらく説明の必要もないくらいシンプルです。


ここで、一度プロジェクトをビルドして、blendのほうに作業環境をうつします。
作るのは、とりあえずHello world的なもので、画面にあるボタンを押すと、こんにちは世界!!とテキストが表示されるだけのシンプルな画面です。とりあえず、アセットからボタンとテキストブロックを置いて以下のような画面をデザインしました。

そして、ViewModelをデータソースに追加します。データから「オブジェクトデータソースの作成」を選びます。

MainWindowViewModelを選んでOKを選択します。これでデータソースが作成できました。

次にTextBlockのTextプロパティとViewModelのMessageプロパティをバインドします。

そして、いよいよCallMethodActionを使います。アセットのビヘイビアから、CallMethodActionを選んでボタンの上に落とします。落とすとオブジェクトとタイムラインの表示は以下のようになります。

として、CallMethodActionのプロパティでTargetObjectをMainWindowViewModelにします。

そしてMethodNameプロパティにメソッド名のGreetを指定します。

以上で完成です。実行してみると、ボタンがあるだけのシンプルな画面が表示されます。

ボタンを押すと、こんにちは世界!!と表示されます。

ということで、CallMethodActionという素敵なものの紹介でした。これがあると、ViewModelにCommandの定義みたいな冗長な記述がいらないや。素敵!ぜひVisualStudio単品でも使いたい機能でした。というかビヘイビア自体をVisual StudioのデザイナからBlendと同じ要領で使いたい感じです。