WPFとLivetでhelloworldを作ってみた

WPFとLivetを使って、ボタンを押すとテキストボックスに"Hello, World."と表示する プログラムを作ってみました。 忘れないためにプログラミングの手順をメモしておきます。

LivetはWPFのためのMVVMインフラストラクチャです。 つまり、WPFを使ったプログラムを楽にメンテナンスしやすく作るためのライブラリです。

私自身、WPFやMVVM自体を十分に消化しきれていない状態なので、 以下のメモは間違っている可能性もあります。 何か気づいたことがあれば、コメントでお知らせください。

今回利用したLivetのバージョンは1.2.0、Visual Studioは2013 Professional 日本語版です。

プロジェクトの作成

Livetをインストールした状態でVisual Studioを起動し、新しいプロジェクトを 作成すると、以下のようにLivetのプロジェクトテンプレートが追加されています。

ここでは「Livet WPF4.5 MVVM アプリケーション」を選択し、 プロジェクト名は「LivetHelloWorld」としました。

レイアウトの作成

私は見た目から入るのが好きなので、最初にコントロールのレイアウトを作成します。 MainWindow.xamlを開いて、コードの<Grid></Grid>を削除して 以下のように書き換えます。

    <StackPanel Margin="10">
        <TextBox Margin="10"/>
        <Button Margin="10" Content="表示"/>
    </StackPanel>

プレビュー画面は以下のようになります。

表示ボタンを押したときのコマンドを作成

次に、表示ボタンを押した時の処理を記述するコマンドをViewModelに作成しました。 MainWindowViewModel.csを開いて、適当な場所に

        lvcomn

と入力し、おもむろにTabキーを2回押すと、以下のようなスニペットがコードに 挿入されます。

        #region DoCommand
        private ViewModelCommand _DoCommand;

        public ViewModelCommand DoCommand
        {
            get
            {
                if (_DoCommand == null)
                {
                    _DoCommand = new ViewModelCommand(Do);
                }
                return _DoCommand;
            }
        }

        public void Do()
        {
            
        }
        #endregion

オレンジ色にハイライトされたDoの部分をShowに変更してカーソルを移動させると、 コードが以下のように描き変わります。

        #region ShowCommand
        private ViewModelCommand _ShowCommand;

        public ViewModelCommand ShowCommand
        {
            get
            {
                if (_ShowCommand == null)
                {
                    _ShowCommand = new ViewModelCommand(Show);
                }
                return _ShowCommand;
            }
        }

        public void Show()
        {
            
        }
        #endregion

後で上のShowメソッド内に処理を記述しますが、 ここでは、先にTextBoxの内容を保持するプロパティを作成します。

テキストボックスの内容保持するプロパティを作成

MainWindowViewModel.cs内の適当な場所で、

        lpropn

と入力してTabキーを2回押すと先ほどと同様にスニペットが挿入されます。

        #region MyProperty変更通知プロパティ
        private string _MyProperty;

        public string MyProperty
        {
            get
            { return _MyProperty; }
            set
            { 
                if (_MyProperty == value)
                    return;
                _MyProperty = value;
                RaisePropertyChanged();
            }
        }
        #endregion

MyPropertyの部分をTextBoxTextに書き換えてTabをおし、 stringの上でEnterを押すとコードは 以下のように書き変わります。

        #region TextBoxText変更通知プロパティ
        private string _TextBoxText;

        public string TextBoxText
        {
            get
            { return _TextBoxText; }
            set
            { 
                if (_TextBoxText == value)
                    return;
                _TextBoxText = value;
                RaisePropertyChanged();
            }
        }
        #endregion

Showメソッドの内容の記述

コマンドが実行されたら、テキストボックスの値を"Hello, World."に変更したいので、 Show`メソッドの中身を以下のように書き換えます。

        public void Show()
        {
            TextBoxText = "Hello, World.";
        }

Viewにバインディングを追加

MainWindow.xamlに戻ります。 まず、TextBoxコントロールにTextプロパティを追加して、 値を{Binding Path=TextBoxText}にします。 次に、ButtonコントロールにCommandプロパティを追加して、 値を{Binding Path=ShowCommand}にします。 以上の変更を適用するとコードは以下のようになります。

    <StackPanel Margin="10">
        <TextBox Margin="10" Text="{Binding Path=TextBoxText}"/>
        <Button Margin="10" Content="表示" Command="{Binding Path=ShowCommand}"/>
    </StackPanel>

実行結果

ビルドしてデバッグ開始するとウインドウが表示され、 表示ボタンをクリックすると、テキストボックスに "Hello, World."と表示されます。