【C#】ViewModelからViewへアクセスする方法【MVVM】

本記事ではViewModelからViewへアクセスする方法を紹介します。基本的に表示の更新はbindingで事足りますが、Viewに動的にコントロールを配置したい状況が発生した場合に役立ちます。

ViewModelからViewを操作できるプロジェクト作成手順
ViewModelからViewを操作してみる
さいごに

ViewModelからViewを操作できるプロジェクト作成手順

今回作成するプロジェクト名は「MVVM_AccessibleView」です。

MVVMプロジェクトを作成する

まずはベースとなるMVVMプロジェクトを用意します。

MVVMプロジェクトの作り方はこちらの記事にありますので必要があれが参照ください。

App.xamlを編集する

VisualStudio上ソリューションエクスプローラからApp.xamlファイルを開き、<Application/>内の
「StartupUri=”Views¥MainView.xaml”」を削除します。

これを消さないと最終的に2つウィンドが立ち上がってしまいます

App.xaml.csを編集する

本ファイルにてアプリ起動時の動作を記述しています。

一例ですが今回は以下のように編集しました。

using System;
using System.Windows;
using MVVM_AccessibleView.Views;
using MVVM_AccessibleView.ViewModels;

namespace MVVM_AccessibleView
{
    public partial class App : Application
    {
        protected override void OnStartup(StartupEventArgs e)
        {
            try
            {
                base.OnStartup(e);

                var v = new MainView();
                var vm = new MainViewModel();

                vm.myMainView = v;
                v.DataContext = vm;
                //ウィンドの表示
                v.Show();
            }
            catch
            {
                //起動時にエラーがあるとここに来る
                Console.WriteLine("エラー in App.xaml.cs");
            }
        }
    }
}

重要なところを色を付けて目立たせています。

Viewのxaml.csを編集する

View(xaml.cs)の元の役割は上記App.xaml.csが行ってくれるので、以下2行を削除します。

public partial class MainView : Window
    {
        public MainView()
        {
            InitializeComponent();

            //MainViewModel vm = new MainViewModel();　　←不要なので削除
            //this.DataContext = vm;                     ←不要なので削除
        }
    }

ViewModelにてViewを生成

MainViewModel.csにてViewの変数を宣言する。

namespace MVVM_AccessibleView.ViewModels
{
    public class MainViewModel : INotifyPropertyChanged
    {
        //Viewの作成
        public MainView myMainView;
        
        (---    以下略    ---)

以上でViewModelからViewを操作するための設定が完了しました。

ViewModelからViewを操作してみる

試しにコントロール(Rectangle)をViewModelから配置します。

Viewのxamlには、<Canvas Name=”ViewCnvs”>を配置します。

ViewModelには、ボタンを押すとCanvasにRectangleを配置するコマンドを記載します。

private void Button1_cmd()
        {
            //Viewに追加する四角を作成
            Rectangle rect = new Rectangle();
            rect.Width = rect.Height = 30;
            rect.Fill = Brushes.Blue;
            
　　　　　　//View(Canvas)に追加する
            myMainView.ViewCnvs.Children.Add(rect);
        }

ソフトの動作は以下の通り。