WPF MVVMでViewを呼び出す方法

Question

前提・実現したいこと

C#を勉強しており、WPFを使用してアプリケーションを作成しようと思っています。
質問なのですが、別のviewを表示しようとするときに呼び出し元で

Test tes = new Test();
tes.Show();

上記のようにやれば表示できたのですが、
MVVMだったらコードビハインドに書かないほうがいいなどの記事が多く、いまいちほかの方法について調べてもわからなかったので他にどのような方法があるのか教えてもらいたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

ViewというのはWindowのことですね？
ダイアログもそうなのですが、MVVMでは割と鬼門です。

「コードビハインドを書いたら負け」ぐらいの勢いの記事もたまに見ますが、（特に入門者は）そこまでこだわる必要はないと思います。

あまりに冗長になりそうな部分やよくわからない部分は、コードビハインドも使っちゃいましょう（アプリが完成しなかったら本末転倒ですし）

もちろんMVVMに慣れてきたら、挑戦してもいいでしょう。

---

それよりも今どきのアプリデザインは、ウィンドウやダイアログをポンポン出すような作りではなくなっています。

例えば電卓ならグラフ計算のオプションやバージョン情報等で、フライアウト（ポップアップ？）が出ます（アプリウィンドウ内に収まっているのがダイアログとの違いです）

例えばこういったものを使用すれば、似たようなものになりますしMVVMにするのも（サポートがあるので）比較的簡単です。
MahApps.Metro - Flyouts
MahApps.Metro - Input Dialog

Comments

[退会済みユーザー]

WPF総合1位のTN8001さんのご回答も拝見できて嬉しいです。
Windows Formsの時代は別ウィンドウを表示していたりましたが、そもそもそういった設計自体が変わってきたのでしょうかね。

[TN8001]

もちろんアプリによるとは思います。
paint.netなんかは複数ウィンドウが出ますよね（好きな位置に動かせるのがいいんでしょうね）

個人的に嫌いなのは設定ダイアログですね（適用ボタンがあればまだいいですが、OK・キャンセルだけのはほんとイヤ^^;
今どきはライブに変更がかかり、特にOKも押さずに終わるようなものがいいですね^^

[trolling]

windows formの時は別画面でウィンドウを出したりしていたのでスが、今は１つの画面の中で切り替えたりするのですね。。
フライアウトなど初めて聞いたものばかりなので、勉強して使いこなせるようにします。。。！

Answer 2

https://atmarkit.itmedia.co.jp/fdotnet/chushin/greatblogentry_02/greatblogentry_02_03.html
https://tnakamura.hatenablog.com/entry/20110218/mvvm_messenger
https://tnakamura.hatenablog.com/entry/20110221/mvvm_messenger_behavior
https://takamints.hatenablog.jp/entry/mvvm-messagebox

ごめんなさい。
誤って送信してしまいました・・
2021年も終わろうとしている現在ですが、WPFのMVVMに関しては2011年に業界をリードしていた？尾上さんのご意見が一番信頼できるような気がします。
ですが、Web業界などは技術的にブームや廃れがあった(かなり発展してきた？)にもかかわらず、WPFは2021年でもこれで良いのかと感じていたりします。

実際に業務で使おうとして、ビューモデルとモデルの連携などが簡単にできずに苦労していたります。
ネットの記事を見ても中途半端で、何がベストプラクティスなのかわからず困ったりしています。

意見交換などできたらと思っていたります。

Answer 3

私自身C#やWPFについて勉強し始めたばかりでこれがベストな方法かはわかりませんが
サブViewをユーザーコントロールで作成し、(下記例ではSubView1とSubView2としている)
ContentControlをメインのビュー(MainWindow)の子要素として貼り付け
そのContentプロパティをDataContextで指定したViewModel内の
UserControl型のプロパティとバインドし
そのプロパティに作成したUserControl(SubView1やSubView2)を代入してやることで
一応画面遷移的な事ができます。

-下記コード例の注意-
尚下記の例ではコードを短くするため
Microsoft.Toolkit.Mvvmと呼ばれるMVVM開発補助ライブラリの
RelayCommandやObservableObjectを使用してるが
RelayCommandはDelegateCommandパターンの実装
ObservableObjectはINotyfiPropertyChangedの実装だと思ってもらって構いません。
もし何を言っているかわからない場合
本題からそれてしまいますがここにDelegateCommandやINotyfiPropertyChangedの
説明が分かりやすく書いてあります。

---

View側

<Window
    xmlns:vm="vmの名前空間"
    ~省略~
>
    <Window.DataContext>
        <vm:MainViewModel>
    </Window.DataContext>
    <StackPanel>
        <ContentControl Content="{Binding CurrentView}" />
        <Button Content="1" Command="{Binding To1Cmd}" />
        <Button Content="2" Command="{Binding To2Cmd}" />
    </StackPanel>
</Window>

---

ViewModel側

class MainViewModel : ObservableObject
{
    //
    //  下記画面遷移関連
    //
    private UserControl[] _userControls = {new SubView1(), new SubView2()} //SubView1,2は自作したユーザーコントロール
    
    // ViewのContentControl.Contentプロパティとバインドするプロパティ
    private UserControl _currentView;
    public UserControl CurrentView 
    { 
        get => this._currentView;
        private set => this.SetProperty(ref this._currentView, value);
    }
    
    //
    //  下記コマンド関連
    //
    public IRelayCommand To1Cmd { get; private set; }
    private void To1Exe()
    {
        // ボタン1が表示されたらSubView1をView側のContentControlにセット
        this.CurrentView = this._userControls[0];
    }

    public IRelayCommand To2Cmd { get; private set; }
    private void To2Exe()
    {
        // ボタン2が表示されたらSubView2をView側のContentControlにセット
        this.CurrentView = this._userControls[1];
    }

    //
    // コンストラクタ
    //
    public MainViewModel()
    {
        this.To1Cmd = new RelayCommand(this.To1Exe);
        this.To2Cmd = new RelayCommand(this.To2Exe);
        this._currentView = this._userControls[0];
    }
}

Comments

[trolling]

formのように画面を別ウィンドウで出すのとは違うやり方が色々あるんですね。。
回答ありがとうございます