WPF Prism episode: 4.5 ～ ReactiveProperty からはじまる MVVM 狂想曲～

公開済み 2018年11月17日 · 更新済み 2020年9月16日

前回記事「DI だけど Unity さえあれば関係ないよねっ【episode: 4 WPF Prism】」

前回記事では Prism Shell で生成したデータオブジェクトを DI コンテナの【Unity】を経由して TreeView を配置した Prism Module へ渡す所まで紹介しました。

2020/9/4 追記
このエントリと同じ範囲の内容を再構成して新規連載中の .NET Core WPF Prism MVVM 入門 2020 step: 6 で公開しました。Prism のデータバインディングサポートクラスで Model ⇔ VM 間を双方向でバインドする方法を紹介しています。

:: halation ghost ::

2020.08.29

Prism に Model ⇔ VM の双方向バインドは難しい【step: 6 .NET Core WPF Prism MVV...

https://elf-mission.net/programming/wpf/getting-started-2020/step06

前回記事「Prism の Region に部分 View がいます。【step: 5 .NET Core WPF Prism MVVM 入門 2020】」前回は Prism で部分 View を Region へ表示する方法と破棄する方法を紹介しました。今回は Prism の MVVM サポートクラスを利用して WPF アプリを MVVM パターンで作成する場合の中心的な存在と言えるデータバインディングについて紹介します。尚、この記事は Visual Studio 2019 Community Edition で .NET Core 3.1 以上と C# + Prism + MahApps.Metro + Material Design In XAML Toolkit を使用して、WPF アプリケーショ...

2020/9/13 追記

このエントリを書いている頃より MVVM パターンへが多少理解できたため、現在似た内容の連載を公開中です。【連載】.NET Core WPF Prism MVVM 入門 2020 の step: 7『ReactiveProperty を編む』でこのエントリに近い範囲の内容を書いているので、良ければそちらもご覧ください。

:: halation ghost ::

2020.09.13

ReactiveProperty を編む【step: 7 .NET Core WPF MVVM ReactiveProperty 入門 2020】

https://elf-mission.net/programming/wpf/getting-started-2020/step07

前回記事「Prism に Model ⇔ VM の双方向バインドは難しい【step: 6 .NET Core WPF Prism MVVM 入門 2020】」前回は Prism だけで Model ⇔ VM 間を疑似的に双方向バインドする方法等を紹介しましたが、結果的に Prism だけで実現するのは難しい事も分かりました。そのため、今回は Prism の MVVM サポートクラス等は使用せず ReactiveProperty を使用してデータを Model ⇔ VM ⇔ View 間をそれぞれ双方向でバインドする方法を紹介します。尚、ReactiveCommand については step: 8【Model のインタフェースの上に ReactiveCommand ...

このエントリの内容は元々 episode: 5 として公開していた記事の一部でしたが、加筆・修正箇所が予想以上に増大したため、episode: 4.5 と、episode: ５の 2 つに分割しました。
この回は Prism から少し離れて、MVVM 入門と ReactiveProperty 入門がメインになります。

尚、この記事は Visual Studio 2017 Community Edition で .NET Framework 4.7.2 以上と C# + Prism 7.1 + ReactiveProperty を使用して、WPF アプリケーションを MVVM パターンで作成するのが目的で、C# での基本的なコーディング知識を持っている人が対象です。

1 MVVM 入門
2 ReactiveProperty で始める MVVM 入門

MVVM 入門

ここまで WPF の目玉機能の 1 つと言える『データバインディング』についてはほぼ触れていませんでしたが、今回から少しずつ増えていく予定です。
MVVM パターンについては episode: 1 で下 fig. 1 の図と @IT の記事へのリンクを紹介しただけなので、簡単ですが、もう少しだけ書いてみます。

fig. 1 MVVM パターン

MVVM パターンは上 fig. 1 の通りプログラムを Model – View – ViewModel の 3 つに分割して作成するパターンで、View はユーザの目に触れる画面を指し、ViewModel は View と Model の仲介役として、View の入力を Model に渡したり、Model の情報を View に設定する役目を持ちます。

:: halation ghost ::

2017.12.17

WPF Prism episode: 1 ～ WPF は MVVM フレームワークとともに。～

https://elf-mission.net/programming/wpf/episode01

前回記事「今更 WPF【episode: 0】」この記事は Visual Studio 2017 Community Edition で .NET Framework 4.6 と C# を使用して、WPF アプリケーションを MVVM パターンで作成するのが目的で、C# での基本的なコーディング知識を持っている人が対象です。2020/7/4 追記2020 年度版の WPF 用 MVVM フレームワークを紹介するエントリを公開しました！MVVM パターンを利用した WPF 開発あえて説明するまでも無いと思いますが、MVVM とは Model、View、View Model の頭文字で、特に UI への入出力を実装するためのデザインパター...

www.atmarkit.co.jp

MVVMパターンの常識 ― 「M」「V」「VM」の役割とは？（1/5） - ＠IT

https://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_02/greatblogentry_02_01.html

MVVM パターンは MVC パターン等と同様にデータ自体の入出力については定義されておらず、UI 部の入出力に特化したパターンです。厳密に定義されているのは View と ViewModel のみなので極端に言えば View と ViewModel 以外は全て Model に分類されます。

そして、WPF で MVVM パターンを適用する場合、View は XAML で作成し、View ⇔ ViewModel（以降、VM）間はデータバインディングでやり取りします。
まずは Prism の BindableBase を利用した簡単な VM のサンプルコードを紹介します。

Prism の BindableBase で作成する ViewModel

下 fig. 2 のようなユーザ情報の編集画面とバインドする VM のサンプルです。

fig. 2 MVVM サンプル

見出しは ViewModel となっていますが、ごく簡単なサンプルなので VM も Model も 1 つのファイルにまとめて書いています。

using System;
using Prism.Commands;
using Prism.Mvvm;

namespace MvvmSample.ViewModels
{
    /// <summary>Personクラス。</summary>
    public class Person
    {
        /// <summary>名前を取得・設定します。</summary>
        public string Name { get; set; } = string.Empty;
        /// <summary>誕生日を取得・設定します。</summary>
        public DateTime? Birthday { get; set; } = null;
    }

    /// <summary>ユーザの読込と保存を行う。</summary>
    public static class UserAgent
    {
        /// <summary>ユーザデータを読み込む。</summary>
        /// <returns>読み込んだユーザを表すPerson。</returns>
        public static Person Load() { return new Person(); }
        //{
        //  return new Person()
        //  {
        //      Birthday = DateTime.Parse("1980/1/1"),
        //      Name = "hoge"
        //  };
        //}

        /// <summary>ユーザデータを保存する。</summary>
        /// <param name="target">保存するユーザを表すPerson。</param>
        public static void Save(Person target) { return; }
    }

    /// <summary>Prism Shell の VM。</summary>
    public class MainWindowViewModel : BindableBase
    {
        private string userName = string.Empty;
        /// <summary>ユーザ名を取得・設定します。</summary>
        public string UserName
        {
            get { return userName; }
            set { SetProperty(ref userName, value); }
        }

        private DateTime? userbirth = null;
        /// <summary>ユーザの誕生日を取得・設定します。</summary>
        public DateTime? UserBirthDay
        {
            get { return userbirth; }
            set
            {
                SetProperty(ref userbirth, value);

                if (userbirth.HasValue)
                {
                    // 誕生日を計算
                    var today = DateTime.Now.Date;
                    var year = today.Year - this.userbirth.Value.Year;
                    if (today.AddDays(-year) < this.userbirth)
                        year--;

                    this.UserAge = year;
                }
            }
        }

        private int age;
        /// <summary>ユーザの年齢を取得します。</summary>
        public int UserAge
        {
            get { return age; }
            private set { SetProperty(ref age, value); }
        }

        private DelegateCommand saveCmd;
        /// <summary>ユーザの保存コマンド。</summary>
        public DelegateCommand SaveCommand => 
            saveCmd ?? (saveCmd = new DelegateCommand(ExecuteSaveCommand, CanExecuteSaveCommand));

        /// <summary>ユーザの保存を実行します。</summary>
        void ExecuteSaveCommand()
        {
            var user = new Person()
            {
                Birthday = this.UserBirthDay,
                Name = this.UserName
            };

            UserAgent.Save(user);
        }

        /// <summary>ユーザの保存ボタンの実行可否を取得・設定します。</summary>
        /// <returns>ユーザの保存ボタンの実行可否を表すbool。</returns>
        bool CanExecuteSaveCommand()
        {
            return true;
        }

        /// <summary>コンストラクタ。</summary>
        public MainWindowViewModel()
        {
            var user = UserAgent.Load();

            this.userName = user.Name;
            this.UserBirthDay = user.Birthday;
        }
    }
}

100

101

102

103

104

105

106

107

108

109

using System;

using Prism.Commands;

using Prism.Mvvm;

namespace MvvmSample.ViewModels

{

/// <summary>Personクラス。</summary>

public class Person

{

/// <summary>名前を取得・設定します。</summary>

public string Name { get; set; } = string.Empty;

/// <summary>誕生日を取得・設定します。</summary>

public DateTime? Birthday { get; set; } = null;

}

/// <summary>ユーザの読込と保存を行う。</summary>

public static class UserAgent

{

/// <summary>ユーザデータを読み込む。</summary>

/// <returns>読み込んだユーザを表すPerson。</returns>

public static Person Load() { return new Person(); }

//{

// return new Person()

// {

// Birthday = DateTime.Parse("1980/1/1"),

// Name = "hoge"

// };

//}

/// <summary>ユーザデータを保存する。</summary>

/// <param name="target">保存するユーザを表すPerson。</param>

public static void Save(Person target) { return; }

}

/// <summary>Prism Shell の VM。</summary>

public class MainWindowViewModel : BindableBase

{

private string userName = string.Empty;

/// <summary>ユーザ名を取得・設定します。</summary>

public string UserName

{

get { return userName; }

set { SetProperty(ref userName, value); }

}

private DateTime? userbirth = null;

/// <summary>ユーザの誕生日を取得・設定します。</summary>

public DateTime? UserBirthDay

{

get { return userbirth; }

set

{

SetProperty(ref userbirth, value);

if (userbirth.HasValue)

{

// 誕生日を計算

var today = DateTime.Now.Date;

var year = today.Year - this.userbirth.Value.Year;

if (today.AddDays(-year) < this.userbirth)

year--;

this.UserAge = year;

}

private int age;

/// <summary>ユーザの年齢を取得します。</summary>

public int UserAge

{

get { return age; }

private set { SetProperty(ref age, value); }

}

private DelegateCommand saveCmd;

/// <summary>ユーザの保存コマンド。</summary>

public DelegateCommand SaveCommand =>

saveCmd ?? (saveCmd = new DelegateCommand(ExecuteSaveCommand, CanExecuteSaveCommand));

/// <summary>ユーザの保存を実行します。</summary>

void ExecuteSaveCommand()

{

var user = new Person()

{

Birthday = this.UserBirthDay,

Name = this.UserName

};

UserAgent.Save(user);

}

/// <summary>ユーザの保存ボタンの実行可否を取得・設定します。</summary>

/// <returns>ユーザの保存ボタンの実行可否を表すbool。</returns>

bool CanExecuteSaveCommand()

{

return true;

}

/// <summary>コンストラクタ。</summary>

public MainWindowViewModel()

{

var user = UserAgent.Load();

this.userName = user.Name;

this.UserBirthDay = user.Birthday;

}

Person クラスの内容を表示する View にバインドした ViewModel があり、Model層のクラスとして Person クラスと UserAgent クラスを定義しています。
UserAgent クラスは Person クラスを new して返すだけですが、本来はデータソース（DB やファイル）から Person クラスを取得・保存するためのクラスと思ってください。
info UserAgent.Load メソッド直下のコメントを外せばデータを設定した Person クラスが読み込まれます。

そして VM は『{Binding ～}』が指定された XAML 上のコントロールとバインドすることでデータや Command をやり取りすることができます。
VM に対する View のソースは GitHub リポジトリにアップしている XAML を直接参照してください。

GitHub

YouseiSakusen/WpfPractises

https://github.com/YouseiSakusen/WpfPractises/blob/master/03_episode05/MvvmSample/Views/MainWindow.xaml

WPF Prism Sample Application. Contribute to YouseiSakusen/WpfPractises development by creating an account on GitHub.

前項でも書いた通り、MVVM パターンで厳密に定義されているのは View と ViewModel のみなので、Model には「Business クラス」でも「DataAccess」でも「Service」、「Agent」、「Controller」等何を置いても構いませんし Model を何層かに分けた設計にしても構いません。と言うより、本来 Model は何層かに分けて設計するものです。

「Model 層は『MVVM』の先頭 1 文字目の M だから Model 以外は作成しちゃダメで、個人データを読み込む Load メソッドは Person クラスに実装しなくてはならない！」的な設計にする必要はないので、ここではあえて Agent クラスから Person を取得するサンプルにしています。
黒歴史「Load メソッドは Person クラスに！」とか考えてたのは実は管理人だったりします…

WPF アプリを MVVM パターンで作成する場合、VM は INotifyPropertyChanged インタフェースを継承する必要があり、View とバインドするプロパティは変更通知プロパティとして定義する必要があります。

上記サンプルコードの UserName、UserBirthDay、UserAge の 3 つが変更通知プロパティで、Prism の BindableBase を利用した書き方ですが、WPF 標準の変更通知プロパティ（INotifyPropertyChanged）は C# の自動実装プロパティと比べると非常に冗長で面倒な記述を強いられます。
そのため一般的な MVVM フレームワークでは VM 用に INotifyPropertyChanged インタフェースを継承した基底クラスを用意している場合が多く、Prism でも INotifyPropertyChanged インタフェースを継承した Prism.Mvvm.BindableBase クラスが用意されていて、BindableBase を継承して VM を作成すると WPF 標準と比べてほんの少しだけ記述が楽になります。

Prism の BindableBase を使っても変更通知プロパティを書くのは結構面倒ですが、Prism の『propp』スニペットを利用するともう少し楽ができます。
Prism のコードスニペットは Prism Template Pack と同時にインストールされるので、Prism Template Pack をインストールしている場合は試してみてください。
Prism に含まれるコードスニペットは【Prism Template Packについてくるコードスニペット – Qiita】で紹介されています。

Qiita

Prism Template Packについてくるコードスニペット - Qiita

https://qiita.com/takasan/items/74ff0230656c4ac0e727

# 初めにVisual Studioの拡張機能「Prism Template Pack」をインストールすると、Prism用のコードスニペットが付いてくるよという話。コードスニペットというのは、例えばソースコードに「propp」を入...

WPF で MVVM パターンを実装した場合、データバインディング以外にもボタン Click 等のイベントも受け取る必要があり、その際の View → VM の通知には ICommand インタフェースを通じて行われます。
Prism を使用しない場合は ICommand インタフェースを継承した Command 受け取りクラスも作成する必要がありますが、Prism では ICommand インタフェースを継承した Prism.Commands.DelegateCommand も用意されています。

上記サンプルコードでは SaveCommand で Prism の DelegateCommand を使用していますが、コマンドについては又、別の機会に紹介する予定なので、ここでは View のボタンが Click された場合は SaveCommand に設定したメソッドが実行されるとだけ覚えておいてください。

尚、上で紹介したサンプルコードも GitHub リポジトリにアップしたソリューションに含めているので、実行する際は、MvvmSample をスタートアッププロジェクトに設定して実行してください。

GitHub

YouseiSakusen/WpfPractises

https://github.com/YouseiSakusen/WpfPractises

WPF Prism Sample Application. Contribute to YouseiSakusen/WpfPractises development by creating an account on GitHub.

ViewModel の役割

MVVM パターンで最も特徴的かつ最重要と言える ViewModel。Windows Form での開発では存在しなかった（Reactive UI 等は除きます）クラスなのでイメージが掴みにくいと思います。

GitHub

reactiveui/ReactiveUI

https://github.com/reactiveui/ReactiveUI

An advanced, composable, functional reactive model-view-viewmodel framework for all .NET platforms that is inspired by functional reactive programming. ReactiveUI allows you to abstract mutable st...

VM の役割を文章にすると『VM は基本的に View を意識せず、Model の影として位置する薄いレイヤー』のような抽象的で分かりにくい表現で説明されていることも多いですが、「View を意識しないってメッセージボックスとか表示しないの？」とか「薄いレイヤーってどのくらいが適切な厚みなの？」のような疑問が湧くのは当然だと思います。管理人的には「適材適所だし案件や納期によって変わる」と言うような玉虫色の回答しかできませんが、言えるのは「数をこなして自分なりの落としどころを見つける」しかないと思っています。

完全に自分しか使わないアプリならともかく、『人に使ってもらう』、『誰かに依頼されて作る』ことが多いアプリケーションの開発には、当然いろんな制約が付くのでその中でやりくりするしかないと思います。
とは言え、入門編と銘打って公開するので、管理人的に考える VM の位置付けを簡単に紹介します。

MVVM パターンで作成するクラス間の関係は、何度も紹介している @IT の記事で以下のように書かれています。

ViewはViewModelに依存し、ViewModelはModelに依存します。逆方向の依存はありません。

MVVMパターンの常識 ― 「M」「V」「VM」の役割とは？

www.atmarkit.co.jp

MVVMパターンの常識 ― 「M」「V」「VM」の役割とは？（1/5） - ＠IT

https://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_02/greatblogentry_02_01.html

上で引用した通り、VM は Model に依存するため Model に定義されているプロパティと同じプロパティを View に表示する数だけ VM に定義する必要があります。

Windows Form や、コードビハインドで作成した WPF の場合、読み込んだデータを TextBox 等のコントロールに設定することで画面に表示されますが、MVVM パターンで作成する場合は VM 自身に追加した変更通知プロパティへ設定した値のみ画面に表示されるという違いがあります。
又、VM へ追加するプロパティは値の表示・入力が必要なものだけではなく、例えば IsEnabled や BackGroundColor のようなプロパティであっても、ユーザが目にする要素であれば VM へバインドプロパティを追加する必要があると考えれば分かりやすいかもしれません。
補足 Enabled や背景色等はデータバインドではなく TriggerAction で変更する方法もあります。

このようにユーザの目に触れる要素を VM の public プロパティとして定義することで、データ処理と画面上の動作が VM の中で完結するようになるため、VM 単体でテストが実行できるようになったり、表示形式が違う View へ簡単に差し替えることもできるようになるのが MVVM パターンのメリットです。

MVVM パターンには確かに上記のようなメリットはありますが、作成する画面によっては 30 ～ 50 個又はそれ以上の変更通知プロパティを作成することになるのは考えただけで面倒になりませんか？
管理人は本当に面倒だと思いますｗ

前項のサンプルコードは Prism の BindableBase を利用して書いていますが、WPF 標準と比べて記述量が大幅に減る訳でもなく冗長なのは大して変わらないので、ズボラな管理人はデータバインディングのインタフェースに【ReactiveProperty】を使用することにします。

GitHub

runceel/ReactiveProperty

https://github.com/runceel/ReactiveProperty

ReactiveProperty provides MVVM and asynchronous support features under Reactive Extensions. Target framework is .NET Standard 2.0. - runceel/ReactiveProperty

ReactiveProperty を使用しても、この連載で紹介する内容は ReactiveProperty に依存する部分は多くなさそうですし、ReactiveProperty で記述した部分を WPF 標準又は Prism の BindableBase に置き換えるだけで意味が通じるよう書くつもりなので、できれば見捨てず読んでもらえるとありがたいです。

ReactiveProperty で始める MVVM 入門

どこかで見たことがある人も多いと思いますが、ReactiveProperty で変更通知プロパティを書くと、どの程度簡単に書けるか下のサンプルコードを見てください。
src. 2 は同じプロパティを WPF 標準、Prism の BindableBase、ReactiveProperty の 3 パターンで記述した例です。

// WPF標準の変更通知プロパティ
private string itemText = string.Empty;
public string ItemText {
    get { return itemText; }
    set {
        itemText = value;
        NotifyPropertyChanged(nameof(this.ItemText));
    }
}

// PrismのBindableBaseを使った変更通知プロパティ
private string itemText;
public string ItemText
{
    get { return itemText; }
    set { SetProperty(ref itemText, value); }
}

// ReactiveProperty での定義
public ReactiveProperty<string> ItemText { get; set; }

// WPF標準の変更通知プロパティ

private string itemText = string.Empty;

public string ItemText {

get { return itemText; }

set {

itemText = value;

NotifyPropertyChanged(nameof(this.ItemText));

}

// PrismのBindableBaseを使った変更通知プロパティ

private string itemText;

public string ItemText

{

get { return itemText; }

set { SetProperty(ref itemText, value); }

}

// ReactiveProperty での定義

public ReactiveProperty<string> ItemText { get; set; }

3 つを比べると、C# の自動実装プロパティで記述できる ReactiveProperty が最も少ないのは一目で分かると思います。

ReactiveProperty のインストール

ReactiveProperty は変更通知プロパティをシンプルに書けるだけでなく ReactiveExtension（Rx）でのコーディングスタイルを初めとして他にも多く機能を含んでいるので、何ができるかを一通り把握したい場合は ReactiveProperty のメンテナーである【かずきさん】が書かれた【MVVMをリアクティブプログラミングで快適にReactivePropertyオーバービュー – かずきのBlog@hatena】に目を通しておくと良いと思います。

かずきのBlog@hatena

MVVMをリアクティブプログラミングで快適にReactivePropertyオーバービュー - かず...

https://blog.okazuki.jp/entry/2015/12/05/221154

MVVM + リアクティブプログラミングの組み合わせを快適にするためのライブラリのReactiveProperty解説記事です。 github.com 以下のNuGetから入手できます。 www.nuget.org ReactivePropertyの特徴 ReactivePropertyは、MVVM + Rxを支援するための機能を有したライブラリです。以下のような機能を持っています。 ReactivePropertyクラス ReactiveCommandクラス ReactiveCollectionクラス ReadOnlyReactiveCollectionクラス INotifyProperty…

ReactiveProperty をインストールするには NuGet で『reactiveproperty』を検索すると見つかるので episode: 4 で作成した TreeView を含む Prism Module（NavigationTreeプロジェクト）へ ReactiveProperty をインストールしてください。

:: halation ghost ::

2018.11.04

WPF Prism episode: 4 ～ DI だけど Unity さえあれば関係ないよねっ～

https://elf-mission.net/programming/wpf/episode04

前回記事「Re: ゼロから始める Prism 生活【episode: 3 WPF Prism】」前回は Prism Module 内の View（UserControl）を Prism Shell へ動的に読み込むまでを紹介したので、今回は Prism のコンポーネント間でデータをやり取りするする際の仲介役となる DI コンテナ【Unity】の使い方を紹介します。2020/8/2 追記このエントリを書いた頃は DI コンテナについても、何故 DI コンテナを使用するのかも分かっていませんでしたが、新たに連載を開始した 2020 年度版の WPF 入門で Prism に含まれる DI コンテナを有効利用するための方...

fig.3 Nuget で検索する ReactiveProperty

info ReactiveProperty をインストールすると Reactive Extensions の各ライブラリも併せてインストールされます。（fig. 3 の【依存関係】に見えている System.Reactive 等も一緒にインストールされます）

TreeView の HierarchicalDataTemplate

前回エントリ（episode: 4）公開時点では Prism Module 内の UserControl 上に TreeView コントロールを配置しただけだった NavigationTree XAML を src. 3 のように編集します。

<UserControl x:Class="WpfTestApp.Views.NavigationTree"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:prism="http://prismlibrary.com/"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:nt="clr-namespace:WpfTestApp.ViewModels"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300"
             prism:ViewModelLocator.AutoWireViewModel="True">
    <Grid>
        <TreeView ItemsSource="{Binding TreeNodes}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate DataType="{x:Type nt:TreeViewItemViewModel}"
                                          ItemsSource="{Binding Children}">
                    <TextBlock Text="{Binding ItemText.Value}" />
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</UserControl>

<UserControl x:Class="WpfTestApp.Views.NavigationTree"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:prism="http://prismlibrary.com/"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:nt="clr-namespace:WpfTestApp.ViewModels"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="300"

prism:ViewModelLocator.AutoWireViewModel="True">

<Grid>

<TreeView.ItemTemplate>

<HierarchicalDataTemplate DataType="{x:Type nt:TreeViewItemViewModel}"

ItemsSource="{Binding Children}">

</HierarchicalDataTemplate>

</TreeView.ItemTemplate>

</TreeView>

</Grid>

</UserControl>

TreeView は ItemsSource プロパティに設定したコレクションを TreeViewItem として描画するので、ItemsSourceプロパティに {Binding TreeNodes} を設定します。

ItemTemplate に TreeViewItem 自体のレイアウトを設定するのは他の List 系コントロールと同じですが、DataTemplate に【HierarchicalDataTemplate】を指定するのが他の List 系コントロールとの違いです。
HierarchicalDataTemplate を設定した項目は Windows Explorer のフォルダツリーやメニューのような階層構造で表示されるようになります。

そして HierarchicalDataTemplate 内に TreeViewItem として描画したいコントロールを配置すると、配置したコントロールの通り TreeViewItem が描画されます。
ここでは TextBlock のみを配置しているので実行すると fig.4 のような画面になります。

fig.4 DataTemplate に TextBlock のみを配置した TreeView

TextBlock の代わりに、StackPanel や Grid を置いてその中へ CheckBox や Button 等のコントロールを配置すると、全ての TreeViewItem が配置したレイアウト通りに描画されるので Windows Form と比べると TreeViewItem の見た目を簡単に変更できます。
7 行目の名前空間のエイリアス宣言と、14 行目～ 16 行目は次回紹介します。

はじめての ReactiveProperty（ReactiveCollection）

そして、src. 3 の XAML とバインドする VM です。

using Prism.Mvvm;
using Reactive.Bindings;
using Reactive.Bindings.Extensions;

namespace WpfTestApp.ViewModels
{
    public class NavigationTreeViewModel : BindableBase, System.IDisposable
    {
        /// <summary>TreeViewItem を取得します。</summary>
        public ReadOnlyReactiveCollection<TreeViewItemViewModel> TreeNodes { get; }

        private WpfTestAppData appData = null;
        private TreeViewItemViewModel rootNode = null;
        /// <summary>ReactivePropertyのDispose用リスト</summary>
        private System.Reactive.Disposables.CompositeDisposable disposables
            = new System.Reactive.Disposables.CompositeDisposable();

        /// <summary>コンストラクタ。</summary>
        /// <param name="data">アプリのデータオブジェクト（Unity からインジェクション）</param>
        public NavigationTreeViewModel(WpfTestAppData data)
        {
            this.appData = data;
            this.rootNode = TreeViewItemCreator.Create(this.appData);

            var col = new System.Collections.ObjectModel.ObservableCollection<TreeViewItemViewModel>();
            col.Add(this.rootNode);
            this.TreeNodes = col.ToReadOnlyReactiveCollection()
                .AddTo(this.disposables);
        }

        void System.IDisposable.Dispose() { this.disposables.Dispose(); }
    }
}

using Prism.Mvvm;

using Reactive.Bindings;

using Reactive.Bindings.Extensions;

namespace WpfTestApp.ViewModels

{

public class NavigationTreeViewModel : BindableBase, System.IDisposable

{

/// <summary>TreeViewItem を取得します。</summary>

public ReadOnlyReactiveCollection<TreeViewItemViewModel> TreeNodes { get; }

private WpfTestAppData appData = null;

private TreeViewItemViewModel rootNode = null;

/// <summary>ReactivePropertyのDispose用リスト</summary>

private System.Reactive.Disposables.CompositeDisposable disposables

= new System.Reactive.Disposables.CompositeDisposable();

/// <summary>コンストラクタ。</summary>

/// <param name="data">アプリのデータオブジェクト（Unity からインジェクション）</param>

public NavigationTreeViewModel(WpfTestAppData data)

{

this.appData = data;

this.rootNode = TreeViewItemCreator.Create(this.appData);

var col = new System.Collections.ObjectModel.ObservableCollection<TreeViewItemViewModel>();

col.Add(this.rootNode);

this.TreeNodes = col.ToReadOnlyReactiveCollection()

.AddTo(this.disposables);

}

void System.IDisposable.Dispose() { this.disposables.Dispose(); }

}

TreeNodes プロパティに使用している ReadOnlyReactiveCollection<T> 型は ReactiveProperty に含まれる List 型の値をバインドするために使用する型で、ReadOnly のため View 側から書込むことはできません。
※ TreeView はユーザの操作で項目の追加・削除はできないので双方向の同期は必要ない

ReactiveCollection は WPF 標準の ObservableCollection<T> と同じで、メンバが追加、削除された時、又はリスト全体が更新されたときに変更通知を発行するコレクションクラスで、ReactiveProperty をインストールしない場合は ObservableCollection<T> で書き換えが可能です。

ReactiveProperty に含まれるクラス名に ReadOnly が付いたクラスと『To ～ Reactive ～』拡張メソッドについては次回詳しく紹介します。

そして前回記事で書いた通り、コンストラクタに追加したパラメータ（20 行目）には DI コンテナの Unity からデータオブジェクトが自動でインジェクションされるので、アプリの StartUp メソッドで Unity に RegisterInstance したデータオブジェクトがこの VM 内で操作できるようになります。

:: halation ghost ::

2018.11.04

WPF Prism episode: 4 ～ DI だけど Unity さえあれば関係ないよねっ～

https://elf-mission.net/programming/wpf/episode04

ReactiveProperty は INotifyPropertyChanged インタフェースを継承しているため、本来は VM 自体が INotifyPropertyChanged を継承する必要はありませんが、ReactiveProperty を WPF で使用する場合（View とバインドする VM のプロパティに使用する場合）のみ親となるクラス（ここでは VM）が INotifyPropertyChanged インタフェースを継承していないとメモリーリークする可能性があるそうなので、INotifyPropertyChanged を実装した Prism の BindableBase を継承しています。
（参考：MVVMでメモリリークしちゃってました原因と対策編 – かずきのBlog@hatena）

かずきのBlog@hatena

MVVMでメモリリークしちゃってました原因と対策編 - かずきのBlog@hatena

https://blog.okazuki.jp/entry/20110227/1298817065

2011/03/02 コメントの指摘を受けて修正。間違ってた部分。 WeakPropertyChangedViewModelBaseクラスの以下の処理。 PropertyChangedEventManager.AddListener( this.Model, new PropertyChangedWeakEventListener( base.RaisePropertyChanged), string.Empty); 正しいものに差し替えました。taguoさん指摘ありがとうございました。今、UxeenというWPF製でMVVM適用して頑張って作ってるTwetterクライアントのプロジェクトのリ…

又、ReactiveProperty の各クラスは IDisposable インタフェースを継承しているため、本来は VM の Dispose 時に個々 ReactiveProperty も Dispose する必要がありますが、AddTo 拡張メソッドで System.Reactive.Disposables.CompositeDisposable へインスタンスを追加しておくと CompositeDisposable を Dispose するだけで一括破棄してくれます。
（参考：ReactivePropertyの後始末）
memo Window 終了時に VM の Dispose を呼び出す方法は、別の機会に紹介したいと思っています。

かずきのBlog@hatena

ReactivePropertyの後始末 - かずきのBlog@hatena

https://blog.okazuki.jp/entry/2016/04/30/073755

久しぶりのReactivePropertyネタです。 ReactiveProperty, ReadOnlyReactiveProperty, ReactiveCommand等は、地味にIDisposableを実装しています。 IDisposableを実装しているということは、Disposeをしないといけないということになります。 Disposeしなくてもいいケースただ、必ずしもDisposeしないとまずいかというとそうでもありません。例えば以下のようなケース。 public ReactiveProperty<string> Input { get; } = new ReactivePrope…

2019/10/26 追記
この記事を書いてから永らく放置状態でしたが、Livet が分割導入できるパッケージがリリースされたことで Window の VM Dispose をスマートに呼び出すことが可能になりました。

GitHub

runceel/Livet

https://github.com/runceel/Livet/releases/tag/v3.1.0

WPF MVVM Infrastructure. Contribute to runceel/Livet development by creating an account on GitHub.

又、Prism 7.2 で追加された IDestractible と同時に使用することで View（UserControl）の VM Dispose も簡単にできるようになりました。
Window と View（UserControl）の Dispose をサンプルアプリに組み込む方法を episode :18 で紹介しているので参考にしてみてください。

:: halation ghost ::

2019.10.26

WPF Prism episode: 18 ～ Livet が Prism に「IDisposable 呼び出し用」としてゲ...

https://elf-mission.net/programming/wpf/episode18

前回記事「IDialogService にコモンダイアログを求めるのは間違っているだろうか【episode: 17 WPF Prism】」前回までは Prism 7.2 に新たに追加された IDialogService について紹介しました。今回は .NET Core 3.0 がリリースされたので、今まで WPF Prism episode シリーズで紹介してきたサンプルアプリを .NET Core 3.0 のアプリケーションとして新規に書き換えることにしました。2020/8/20 追記このエントリの内容を新規連載の .NET Core WPF Prism MVVM 入門 2020 step: 5 で書き直したので、出来れば新規記事の方を見てく...

ObservableCollection を ReactiveCollection のソースに設定する

現時点のサンプルアプリは TreeView があるだけですが、完成すると下 fig.5 のような画面になる予定です。

fig.5 サンプルアプリの完成後イメージ

TreeView は機能メニューのような位置付けで、TreeViewItem を選択すると対応した画面が右側に表示される予定で、TreeView に表示する内容は前回エントリでも紹介した src. 5 のデータクラスから取得します。

using System;
using System.Collections.Generic;

namespace WpfTestApp
{
    /// <summary>サンプルアプリのデータコンテナを表します。</summary>
    [System.Runtime.Serialization.DataContract]
    public class WpfTestAppData
    {
        /// <summary>生徒の情報を取得・設定します。</summary>
        [System.Runtime.Serialization.DataMember]
        public PersonalInformation Student { get; set; } = new PersonalInformation();

        /// <summary>身体測定データを取得します。</summary>
        [System.Runtime.Serialization.DataMember]
        public System.Collections.ObjectModel.ObservableCollection<PhysicalInformation> Physicals { get; private set; }
            = new System.Collections.ObjectModel.ObservableCollection<PhysicalInformation>();

        /// <summary>試験結果データを取得します。</summary>
        [System.Runtime.Serialization.DataMember]
        public System.Collections.ObjectModel.ObservableCollection<TestPointInformation> TestPoints { get; private set; }
            = new System.Collections.ObjectModel.ObservableCollection<TestPointInformation>();
    }
}

using System;

using System.Collections.Generic;

namespace WpfTestApp

{

/// <summary>サンプルアプリのデータコンテナを表します。</summary>

[System.Runtime.Serialization.DataContract]

public class WpfTestAppData

{

/// <summary>生徒の情報を取得・設定します。</summary>

[System.Runtime.Serialization.DataMember]

public PersonalInformation Student { get; set; } = new PersonalInformation();

/// <summary>身体測定データを取得します。</summary>

[System.Runtime.Serialization.DataMember]

public System.Collections.ObjectModel.ObservableCollection<PhysicalInformation> Physicals { get; private set; }

= new System.Collections.ObjectModel.ObservableCollection<PhysicalInformation>();

/// <summary>試験結果データを取得します。</summary>

[System.Runtime.Serialization.DataMember]

public System.Collections.ObjectModel.ObservableCollection<TestPointInformation> TestPoints { get; private set; }

= new System.Collections.ObjectModel.ObservableCollection<TestPointInformation>();

}

但し、上の WpfTestAppData クラスは TreeView に表示したい構造と合っていないので、src. 6 の TreeViewItemCreator を間に挟んで TreeView へ表示する構造に合わせています。

namespace WpfTestApp.ViewModels
{
    internal static class TreeViewItemCreator
    {
        internal static TreeViewItemViewModel Create(WpfTestAppData appData)
        {
            var rootNode = new TreeViewItemViewModel(appData.Student);
            var physicalClass = new TreeViewItemViewModel("身体測定");
            rootNode.Children.Add(physicalClass);

            foreach (var item in appData.Physicals)
            {
                var child = new TreeViewItemViewModel(item);
                physicalClass.Children.Add(child);
            }

            var testPointClass = new TreeViewItemViewModel("試験結果");
            rootNode.Children.Add(testPointClass);

            foreach (var item in appData.TestPoints)
            {
                var child = new TreeViewItemViewModel(item);
                testPointClass.Children.Add(child);
            }

            return rootNode;
        }
    }
}

namespace WpfTestApp.ViewModels

{

internal static class TreeViewItemCreator

{

internal static TreeViewItemViewModel Create(WpfTestAppData appData)

{

var rootNode = new TreeViewItemViewModel(appData.Student);

var physicalClass = new TreeViewItemViewModel("身体測定");

rootNode.Children.Add(physicalClass);

foreach (var item in appData.Physicals)

{

var child = new TreeViewItemViewModel(item);

physicalClass.Children.Add(child);

}

var testPointClass = new TreeViewItemViewModel("試験結果");

rootNode.Children.Add(testPointClass);

foreach (var item in appData.TestPoints)

{

var child = new TreeViewItemViewModel(item);

testPointClass.Children.Add(child);

}

return rootNode;

}

見ての通りベタで木構造を作成して木構造のルートを返しているだけです。
サンプルでは TreeViewItemCreator を別クラスで作成していますが、別クラスにする必要は特に無いので VM へ直接記述しても構いません。

そして src. 7 のように VM のコンストラクタでバインドプロパティを設定しています。
（VM のコンストラクタ部分のみを抜粋）

/// <summary>コンストラクタ。</summary>
/// <param name="data">アプリのデータオブジェクト（Unity からインジェクション）</param>
public NavigationTreeViewModel(WpfTestAppData data)
{
    this.appData = data;
    this.rootNode = TreeViewItemCreator.Create(this.appData);

    var col = new System.Collections.ObjectModel.ObservableCollection<TreeViewItemViewModel>();
    col.Add(this.rootNode);
    this.TreeNodes = col.ToReadOnlyReactiveCollection()
        .AddTo(this.disposables);
}

/// <summary>コンストラクタ。</summary>

/// <param name="data">アプリのデータオブジェクト（Unity からインジェクション）</param>

public NavigationTreeViewModel(WpfTestAppData data)

{

this.appData = data;

this.rootNode = TreeViewItemCreator.Create(this.appData);