【C#-WPF】ViewModelで写真付きポップアップを表示するには

目標
・ボタンをクリックしたら適当な写真付きポップアップを表示したい
//以下省略 ・ポップアップにはコマンドボタンを実装したい
・ポップアップに実装するボタンによりtrue/false判断をしたい。trueであれば次に進みfalseであればキャンセルしたい

課題
・写真をどう利用すればよいのか？
・MVVMパターンの中にポップアップの実装は可能か？
・ポップアップは一般的に親クラスのViewと関係(=Owner)を持つ必要がある

写真利用について
まず適当な写真を用意しフォルダに追加する

BitmapImageクラスを利用する
https://learn.microsoft.com/ja-jp/dotnet/api/system.windows.media.imaging.bitmapimage?view=windowsdesktop-7.0

        public void Popup()
        {
            //写真のパスを指定
            var path = @"\Image\direction.png";
            //create source
            var bitmap = new BitmapImage();
            //BitmapImage.UriSource must be in a BeginInit/EndInit block.
            bitmap.BeginInit();
            //bitmapプロパティの設定はここでする
            bitmap.UriSource = new Uri(path,UriKind.Relative);
            bitmap.EndInit();

        }

プロパティの変更は、オブジェクトの初期化中にのみ実行できます。 BeginInit を呼び出して初期化が開始されたことを通知し、EndInit を呼び出して初期化が完了したことを通知します。 初期化後、プロパティの変更は無視されます。

UriKind.Relativeについて
今回は相対パスを利用している。

MVVMパターンで写真付きのポップアップ実装について
ViewModel：
・ボタンコマンドRunを実装
・ポップアップ設定するクラスを呼び出しShowDialog()で表示

    public class MainWindowViewModel
    {
        private ICommand _run;
        public ICommand Run
        {
            get
            {
                if (_run == null)
                {
                    _run = new Command(() => { Popup(); });
                }
                return _run;
            }
        }
        public void Popup()
        {
            //写真のパスを指定
            var path = @"\Image\direction.png";
            //create source
            var bitmap = new BitmapImage();
            //BitmapImage.UriSource must be in a BeginInit/EndInit block.
            bitmap.BeginInit();
            //bitmapプロパティの設定はここでする
            bitmap.UriSource = new Uri(path, UriKind.Relative);
            bitmap.EndInit();

            //ポップアップを作成
            var popup = new Popupwindow()
            {
                //ポップアップの設定をする
                Source = bitmap,
            };
            //ポップアップを表示する
            popup.ShowDialog();
        }
    }
    public class Command : ICommand
    {
        Action _action;
        public Command(Action action)
        {
            _action = action;
        }
        public event EventHandler CanExecuteChanged
        {
            add { CommandManager.RequerySuggested += value; }
            remove { CommandManager.RequerySuggested -= value; }
        }

        public bool CanExecute(object parameter)
        {
            return true;
        }

        public void Execute(object parameter)
        {
            _action();
        }
    }

ポップアップのxaml

    <DockPanel>
        <DockPanel>
            <Image Source="{Binding Source}" x:Name="Image"/>
        </DockPanel>
    </DockPanel>

ポップアップのコードビハインド

    public partial class Popupwindow : Window
    {
        public Popupwindow()
        {
            InitializeComponent();
        }

        public ImageSource Source
        {
            set { Image.Source = value; }
        }
    }

実行結果

ポップアップに親クラスのViewと関係(=Owner)を持たせるには

MainWindowViewModelのコンストラクタでViewと関連付ける

public class MainWindowViewModel
    {
        public MainWindowViewModel(MainWindow parent)
        {
            _parent = parent;
        }
        private readonly MainWindow _parent;
        public MainWindow Parent { get { return _parent; } }

        private ICommand _run;
        public ICommand Run
        {
            get
            {
                if (_run == null)
                {
                    _run = new Command(() => { Popup(); });
                }
                return _run;
            }
        }
        public void Popup()
        {
            //写真のパスを指定
            var path = @"\Image\direction.png";
            //create source
            var bitmap = new BitmapImage();
            //BitmapImage.UriSource must be in a BeginInit/EndInit block.
            bitmap.BeginInit();
            //bitmapプロパティの設定はここでする
            bitmap.UriSource = new Uri(path, UriKind.Relative);
            bitmap.EndInit();

            //ポップアップを作成
            var popup = new Popupwindow()
            {
                //ポップアップの設定をする
                Owner = Parent,
                Source = bitmap,
            };
            //ポップアップを表示する
            popup.ShowDialog();
        }
    }