WPF速攻入門

C#のフォームアプリ開発を覚えた人はWPFに挑戦してみましょう。
正式名称はWindows Presentation Foundation。

WPFで調べてみると相変わらず否定的な記事が出ますね。
僕は良いと思うんですけどね。

ま、使い込んでみないとその良さはわかりません。
今回も元気よく行きましょう。

WPF入門

プロジェクトの作成方法はフォームと特にかわりません。違和感ないと思います。
問題はWPF特有の作法ですね。MVVMの流れは慣れが必要です。

ではプロジェクトの作成方法から。

プロジェクトの作成

新しいプロジェクトの作成

C# → Windowsmi → デスクトップ → WPFアプリケーション → 次へ

実はWPFアプリ(.MET Framework)というのもあります。
こっちは古いものですので、状況に応じて使い分けましょう。

適当なプロジェクト名をつけ次へ。

ターゲットフレームワークを選択し次へ

何か出来上がりました。これでOKです。

MVVM入門（WPF特有の作法）

やってはいけないこと

やってはいけないことが一つあります。

コードビハインドのコードを書くこと。

これだけは絶対死守してください。
このルールを破った時点であなたのWPFアプリはゴミになります。

コードビハインドとはこれのことです。
Window名.xaml.cs

やってはいけない理由はみんながそうしてるからです。
詳細は省きます。

真面目な解説ページがいくらでもありますが、
宗教の教えか何かと思って受け入れた方がよいでしょう。

コードビハインドに処理を書いたら信者にめちゃくちゃ怒られます。

フォルダ作成

フォルダを作成します。
Views,ViewModels,Modelsのフォルダです。
僕はCommonフォルダも用意します。

• Viewsフォルダ:Viewファイルを置きます
• ViewModelsフォルダ:ViewModelファイルを置きます
• Modelsフォルダ:Modelファイルを置きます
• Commonフォルダ:アクションやビヘイビア,共通の定義,Utilityクラスなど置きます

※MVVMの考え方についてはご自身で調べてください。
腐るほど転がってますのでここでは説明しません。

ViewModelファイルを作成します。

Viewとの関係がわかりやすい名前をつけます。
今回はMainWindowのViewModelなのでMainWindowVM。
追加。

自動で出来上がったものはそのまま使えません。
以下のコードを書き足します。

using using System.ComponentModel;

    public class MainWindowVM : INotifyPropertyChanged
    {

        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
        #endregion
    }

こんな感じ。面倒くさいですね。わかります。

Blendを開く

Blendを開きます
ツリーのxamlファイル上で右クリック → Blendでデザイン

カッコいいのが立ち上がりました。
昔は有料で別のパッケージを買わないといけませんでした。
今は無料でついてくるのでお得です。

ビヘイビアパッケージのインストール

ビヘイビアを選択して、’Behaviors’Nugetパッケージのインストールを選択します。

いっぱい出てきました。

一度ビルドしておきます。
プロジェクトの変更が保存されます。

ViewModelのバインド

Windowを選択します

DataContext新規

バインドするViewModelを選択(今回はMainWindowVM)を選択

関数の呼び出し

ビヘイビアー → CallMethodAction → コントロール上（今回はボタン）にドロップ
Ctrl+S等でファイルを保存。

Visual Studioに戻ります。
Blendの変更が反映されています。

対象のViewModel(今回はMainWindowVM)に移動し、処理を追加します。

xamlに戻ってボタンを選択します。

こんな感じで書きます。

重要なのは
MethodName="ButtonClick" TargetObject="{Binding}"

        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="315,143,0,0" VerticalAlignment="Top">
            <b:Interaction.Triggers>
                <b:EventTrigger EventName="Click">
                    <b:CallMethodAction MethodName="ButtonClick" TargetObject="{Binding}"/>
                </b:EventTrigger>
            </b:Interaction.Triggers>
        </Button>

実行してみます。

ボタンを押してみます。ほらできた。

変数のバインド

ViewModelにこんな感じで書きます。

        string _SampleText = string.Empty;

        public string SampleText
        {
            get
            {
                return _SampleText;
            }
            set
            {
                if (_SampleText == null || !_SampleText.Equals(value))
                {
                    _SampleText = value;
                    NotifyPropertyChanged("SampleText");
                }
            }
        }

TextBoxを置いておきます。

一度ビルドもしくはリビルドをしておきます。

TextBox選択 → ■ → データバインディングの作成

対象の変数を選択してOK

ボタンを押した時の処理を修正

        /// <summary>
        /// ボタンを押した場合の処理
        /// </summary>
        public void ButtonClick()
        {
            MessageBox.Show(this.SampleText);
        }

実行(F5)してTextBoxに適当な値を入力しボタンを押すとこんな感じ。

WPFお助けツール

WPFCodeCreator

余談ですが、WPFの敷居を下げるためちょっとしたお助けツールを作成中です。
ご興味があれば使ってみてください。
とりあえず変数書く際の面倒くささは軽減できます。

https://github.com/zeikomi552/WPFCodeCreator

WPFCodeCreator画面イメージ。

WPFで作成してますし特に難しいことはしていません。
勉強がてらソースコードを見て頂くのも良いかもしれません。

まとめ

こんな感じでお作法がクソ面倒くさいです。
フォームアプリならボタンカチカチってやった瞬間出来上がるのにWPFはこの手数の多さ。

入門の敷居は高いのに、WPFの良さに気付けるまでかなりの時間を要します。
しかしできる事がフォームに比べて多く未来の自分に拡張性や可能性を残してあげられる。
しかもアンチが多くて自分の希少性が高まります。
習得価値は十分にあります。頑張ってみてください。

WPF速攻入門

おわり