WPF MainWindowとSubWindowで別のViewModel?を使いたい

Question

お世話になります。
調べたのですが、分からないため教えてください。

実現したいこと

以前質問させていただいた2つを組み合わせたものにしようとしています。

Rectangleの質問【1】のデータを主軸とし、
画像選択サブウィンドウのデータ【2】を追加しようとしています。

組み合わせても問題なく動作するようにしたいです。

【1】
WPF　動的生成したRectangleがドラッグで移動できない、Bindingが難しい…
https://teratail.com/questions/j700zzpncph60k
→ソースが変わる前のものを利用しています。

【2】
WPF C#　ImageSourceを利用しているからか、画像がロックされてしまう
https://teratail.com/questions/t6uox4f1iujybm

試したこと

ViewModelを1つにまとめました。
Itemsという同じ名称のものは、「RectItems」「PicItems」としました。

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="600"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <ToolBar Grid.Row="0" VerticalAlignment="Top" Height="30">
                <Button Content="画像選択" Width="128" Height="32" Click="Button_Click"/>
                <RadioButton x:Name="DefaultButton" Width="32" Height="32"
                Content="?" IsChecked="True" />
                <RadioButton x:Name="RectButton" Width="32" Height="32">
                    <Rectangle Width="24" Height="16" Stroke="Black"/>
                </RadioButton>
        </ToolBar>

 <!--       <Image Grid.Row="1" MinWidth="600" MinHeight="600" Height="600" MaxWidth="800" MaxHeight="600"  Width="800"  Source="{Binding SelectedPic.FilePath, Converter={StaticResource ImageConverter}}" StretchDirection="DownOnly" HorizontalAlignment="Left" VerticalAlignment="Top"  />-->
        <local:MyCanvas MinHeight="600" MaxHeight="600" Height="600" MinWidth="800" Width="800" MaxWidth="800" Grid.Row="1" RectItems="{Binding RectInfoCollection}" SelectRect="{Binding SelectRect, Mode=TwoWay}" >
        </local:MyCanvas>
        <local:MyDataGrid Grid.Row="2"  DataContext="{Binding }"/>
       
    </Grid>

    public partial class MainWindow : Window
    {
        public ViewModel vm ;
        public MainWindow()
        {
            InitializeComponent();
            var imageFolder = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "image");
            vm = new ViewModel(imageFolder);
            this.DataContext = vm;
        }
        private void Button_Click(object sender, RoutedEventArgs e)
            => new SubWindow((ViewModel)DataContext).ShowDialog();

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            vm.RectInfoCollection.Add(new RectInfo("1", 10, 10, 100, 100, "Red", ""));
            vm.RectInfoCollection.Add(new RectInfo("2", 100, 100, 200, 200, "Blue", ""));

        }
}

public partial class ViewModel : BindableBase
{
    private RectInfo? _SelectedRect;
    public RectInfo? SelectedRect { get => _SelectedRect; set => SetProperty(ref _SelectedRect, value); }

    public ObservableCollection<Item> PicItems { get; } = new();

    private Item? _SelectPic;
    public Item? SelectPic { get => _SelectPic; set => SetProperty(ref _SelectPic, value); }

    private readonly string folder;
    public ViewModel(string folder)
    {
        this.folder = folder;
        Directory.CreateDirectory(folder);
        ImportFiles(Directory.EnumerateFiles(folder, "*.jpg", SearchOption.TopDirectoryOnly));
    }

    [RelayCommand]
    private void Apply(Item? item) => SelectPic = item;

    public void ImportFiles(IEnumerable<string> paths)
    {
        foreach (var path in paths) PicItems.Add(new(path));
    }

    public void AddItem(string path, Func<bool> isOverwrite)
    {
        var fileName = System.IO.Path.GetFileNameWithoutExtension(path);
        var outPath = System.IO.Path.Combine(folder, $"{fileName}.jpg");

        if (File.Exists(outPath))
        {
            if (!isOverwrite()) return;
            PicItems.Remove(PicItems.FirstOrDefault(x => x.FilePath == outPath)!);
        }

        using (var fsin = new FileStream(path, FileMode.Open, FileAccess.ReadWrite))
        using (var fsout = new FileStream(outPath, FileMode.Create, FileAccess.Write))
        {
            var f = BitmapFrame.Create(fsin, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.OnDemand);
            var meta = f.Metadata.Clone() as BitmapMetadata ?? new BitmapMetadata("jpg");
            var enc = new JpegBitmapEncoder();
            enc.Frames.Add(BitmapFrame.Create(f, f.Thumbnail, meta, f.ColorContexts));
            enc.Save(fsout);
        }

        PicItems.Add(new(outPath));
    }
}

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

• Rectangleが表示されない（SelectRectもRe
• Canvasの裏に画像を表示させようとImageを追加したが、それも表示されない（SelectPicのデータはあり）

       public MyCanvas()
        {
            InitializeComponent();
        }

        private System.Windows.Point _dragOffset;
        private System.Windows.Shapes.Rectangle? _dragRectangle;
        public RectInfo SelectRect
        {
            get { return (RectInfo)GetValue(SelectRectProperty); }
            set { SetValue(SelectRectProperty, value); }
        }

        public static readonly DependencyProperty SelectRectProperty =
            DependencyProperty.Register("SelectRect", typeof(RectInfo), typeof(MyCanvas), new PropertyMetadata(null, SelectRect_Changed));

        private static void SelectRect_Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            (d as MyCanvas)?.SelectRectChanged(e.OldValue, e.NewValue);
        }

        private void SelectRectChanged(object oldValue, object newValue)
        {
            if (oldValue is RectInfo o)
            {
                var target = FindRectangle(o);
                if (target != null)
                {
                    target.StrokeDashArray = null;
                }
            }
            if (newValue is RectInfo n)
            {
                var target = FindRectangle(n);
                if (target != null)
                {
                    target.StrokeDashArray = new DoubleCollection() { 2 };
                }
            }
        }

        public ObservableCollection<RectInfo> RectItems
        {
            get { return (ObservableCollection<RectInfo>)GetValue(RectItemsProperty); }
            set { SetValue(RectItemsProperty, value); }
        }

        public static readonly DependencyProperty RectItemsProperty =
            DependencyProperty.Register("RectItems", typeof(ObservableCollection<RectInfo>), typeof(MyCanvas), new PropertyMetadata(null, RectItemsChangedCallback));

        private static void RectItemsChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            (d as MyCanvas)?.RegisterCollectionChanged();
        }

        private void RegisterCollectionChanged()
        {
            RectItems.CollectionChanged += RectItems_CollectionChanged;
        }

        private void RectItems_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
        {
            switch (e.Action)
            {
                case NotifyCollectionChangedAction.Add:
                    if (e.NewItems != null)
                    {
                        foreach (RectInfo mp in e.NewItems)
                        {
                            AddRectangle(mp);
                            mp.PropertyChanged += RectInfo_PropertyChanged;
                        }
                    }
                    break;

                case NotifyCollectionChangedAction.Remove:
                    if (e.OldItems != null)
                    {
                        foreach (RectInfo info in e.OldItems)
                        {
                            var target = FindRectangle(info);
                            if (target != null)
                            {
                                canvas2.Children.Remove(target);
                                info.PropertyChanged -= RectInfo_PropertyChanged;
                            }
                        }
                    }
                    break;

                default:
                    break;
            }
        }

        private System.Windows.Shapes.Rectangle? FindRectangle(RectInfo info)
        {
            if (info == null) return null;
            return canvas2.Children.OfType<System.Windows.Shapes.Rectangle>().FirstOrDefault(i => info == (RectInfo)i.Tag);
        }

        internal void AddRectangle(RectInfo info)
        {
            var r = new System.Windows.Shapes.Rectangle
            {
                Width = 20,
                Height = 20,
                Stroke=Brushes.Black,
                StrokeThickness=5,
                ToolTip = info.Name,
                Tag = info
            };

            r.Width = info.Width;
            r.Height = info.Height;

            try
            {
                var brush = (SolidColorBrush)new BrushConverter().ConvertFromString(info.BorderColor);
                r.Stroke = brush;
            }
            catch
            {
                r.Stroke = Brushes.Transparent;
            }
                
            try { 
                var brush = (SolidColorBrush)new BrushConverter().ConvertFromString(info.FillColor);
                r.Fill = brush;
            }
            catch
            {
                r.Fill = Brushes.Transparent;
            }

            //イベント追加
            r.MouseDown += DragStart;
            r.MouseUp += (o, e) => { _dragRectangle = null; r.ReleaseMouseCapture(); };
            r.MouseMove += MoveRectangle;

            //パネルに追加
            canvas2.Children.Add(r);
            Canvas.SetLeft(r, info.X);
            Canvas.SetTop(r, info.Y);
        }

###分かったこと
画面上にボタンを置き
「vm.RectInfoCollection.Add(new RectInfo("3", 10, 10, 100, 100, "Red", ""));」としてみたところ、四角形が描画されました。
起動時に作成したデータでは四角形が出来ず、DataGridのみに表示されますが、ボタンで実行すると四角形描画とDataGridへの追加もどちらもできるようです。

画面上に置いたボタンで追加できるのであれば、
Binding自体は問題ない気がします。

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

Visualstudio2022　V17.6.3
.NET 6.0　C#

Comments

[hqf00342]

SubWindow.xaml.csの1行目PicModel変数はViewModelクラスで合ってますか？
PicModelというクラスも作られているようなので入り混じっているように見えます。

基本はTN8001さんの回答の通りと思います。

私のサンプルを利用しているようなので補足すると、
元サンプルはDataBindingとUIドラッグのサンプルなので、簡便にするためViewModel内で直接データ追加しています。（これが良くなかったか・・・）
本来はVMでデータ管理するのではなく、データ管理するモデルクラスを作り、VMはそれを参照しましょう。
２つのViewが同じデータを参照したいのならばそれぞれのViewModelからそのモデルを参照します。
サンプルも更新しました。

ただ、最初はMVVMにこだわりすぎず、やりたいことを実現したほうが良いと思います。

[nodoita]

hqf00342様
回答ありがとうございます。PicModelは削除しました！
全てをViewModelに統合しました。
サンプル更新ありがとうございます。
改変を重ねていて今の途中段階をどう移植したら良いのか結構大変そうです。
やり方が悪かったのだとは思いますが、1つだけ分かりました。

Answer 1

質問内容を変えないほうが良いです。
最初の質問に対してはTN8001さんの回答が適切です。

Rectangleが表示されない（SelectRectもRe

データの初期化タイミングmyCanvas::RectItemsChangedCallback()での初期化が足りていないことによると思われます。このメソッドはRectItemsが最初に代入されたときに呼ばれる依存関係プロパティの機能で、その際にデータが入っていたら、それを反映させるべきです。
（最初のサンプルはここに来るときデータが空である事が自明であったため省略してました。）
以下を参照してください。

    private static void ItemsChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is MyCanvas mycanvas)
        {
            // Itemsプロパティに変更通知を登録
            mycanvas.Items.CollectionChanged += mycanvas.Items_CollectionChanged;

            //ItemsのデータをCanvasに初期登録する
            if (e.NewValue is IEnumerable<RectInfo> infos)
            {
                foreach (var info in infos)
                {
                    mycanvas.AddRectangle(info);
                    info.PropertyChanged += mycanvas.RectInfo_PropertyChanged;
                }
            }
        }
    }

この部分はListBoxやDataGridのItemsSource機能をCanvasを使って再発明しているような状態です。
どちらが簡単かはよく考えて使ってみてください。

Canvasの裏に画像を表示させようとImageを追加したが、それも表示されない（SelectPicのデータはあり）

「裏」がよくわかってないですがMyCanvas 内のCanvasコントロールの上にImage コントロールを貼る、もしくはCanvasのBackgroundを画像から生成したブラシで塗れば実現できると思います。
文字通り裏なのであればCanvasが非透明だと見えないだけのようにも思えます。

Comments

[nodoita]

回答ありがとうございます！
新しいソースを利用し1から作成し直したらMyDataあたりがとても分かりやすくなってました！
自分で作り変えていた部分を確認しつつ修正していこうと思います。
ListBoxの動作（選択したら薄く枠が色づく等）が私の想定と違ったため
Canvasの方を利用させて頂いてます！

MyCanvasを透過モードに設定し、後ろ？にImageをとりあえずあるもので貼り付けてみました。無事画像は表示されたのですが、Rectが後ろに隠れてしまうようになりました。
以前のソースの時は、 Panel.ZIndex="255"とRectのアイテムが最前面に来るようにしていたのですが、この場合どのようにしたら良いのでしょうか？
<local:MyCanvas
Items="{Binding RectInfoCollection}"
SelectedItem="{Binding ElementName=datagrid,Path=SelectedItem, Mode=TwoWay}" >
<Image Source="img\test.jpg" StretchDirection="DownOnly" HorizontalAlignment="Left" VerticalAlignment="Top"></Image>
</local:MyCanvas>

[hqf00342]

そのXAMLだと<MyCanvas>の上に<Image>がある状態です。重なり方はおよそ以下のイメージです(デバッグ中にVisualTreeで確認できます）。
↑上
<Image>
<MyCanvas内Rectangle>×n個
<MyCanvas内Canvas>
<MyCanvas内UserControl>
<MyCanvas>
<Grid?>
<Window>
↓下
透明化ができているなら<Image>を<MyCanvas>の前に書くのが早いはずです。
他にもMyCanvas.xaml内の<Canvas>内に画像を配置しRectangleの真下にする、や
Canvasの背景色として画像を指定（以下）等、いろいろ方法はあるので試してください
<Canvas x:Name="canvas2">
<Canvas.Background>
<ImageBrush ImageSource="....jpg"/>
</Canvas.Background>
</Canvas>

[nodoita]

Canvasの前に持ってきたら問題なく表示できるようになりました！ありがとうございます！

Answer 2

上記のようにしたら参照できるかと思ったらNGでした。

これ自体の表記はあっています。

"PicModel" は名前空間 "clr-namespace:wpfRectangleBindingTest.ViewModels" に存在しません。とエラーになります。

PicModel追加後にビルドをしていないため、デザイナが認識できていません（SubWindow.xaml.csにエラーがあるため、現状ビルドも通らないはずです）

そもそもですがd:DataContextはデザイナ上でインテリセンスを利かすためのもので、実行時には何の効果もありません。
デザイン サーフェイス上のサンプル データとプロトタイプを作るためのサンプル データ - UWP applications | Microsoft Learn

---

このPicModelは、MainWindowでもSubWindowでも利用します。
元々はItemsだったのですが、Rectangleのものと被るために
新しくPicModelとして作成して参照させようとしてます。

ゴールがさっぱり見えません。
RectInfoCollectionとPicItemsは同じものを指しているんですか？（画像はすべて対応する四角がある）
だったらRectInfoとItemをマージして、ひとつのコレクションにしてください。

RectInfoCollectionとPicItemsは違うものを指しているんですか？（画像は選択肢であって四角と１対１ではない）
だったらViewModelとPicModelをマージして、ひとつのViewModelにしてください。

Comments

[nodoita]

RectInfoCollectionは、Rectの情報のみが集まったものです。
PicItemsは、画像の情報データが集まったものです。

public partial class ViewModel : BindableBase
{
/// <summary>
/// Rectangleの位置情報コレクション
/// </summary>
public ObservableCollection<RectInfo> RectInfoCollection { get; set; } = new();

/// <summary>
/// 選択中のアイテム
/// Mainwindow.xamlでMyCanvasにBindingされている
/// </summary>
private RectInfo? _SelectedRect;
public RectInfo? SelectedRect { get => _SelectedRect; set => SetProperty(ref _SelectedRect, value); }

public ObservableCollection<Item> PicItems { get; } = new();

private Item? _SelectPic;
public Item? SelectPic { get => _SelectPic; set => SetProperty(ref _SelectPic, value); }

private readonly string folder;
public ViewModel(string folder)
{
this.folder = folder;
Directory.CreateDirectory(folder);
ImportFiles(Directory.EnumerateFiles(folder, "*.jpg", SearchOption.TopDirectoryOnly));
}

[RelayCommand]
private void Delete(Item item)
{
if (MessageBox.Show(item.FileTitle + "を削除しても良いですか？",
"ファイル削除", MessageBoxButton.YesNo, MessageBoxImage.Information) == MessageBoxResult.No)
{ return; }

PicItems.Remove(item);
File.Delete(item.FilePath);
}

[RelayCommand]
private void Apply(Item? item) => SelectPic = item;

public void ImportFiles(IEnumerable<string> paths)
{
foreach (var path in paths) PicItems.Add(new(path));
}

public void AddItem(string path, Func<bool> isOverwrite)
{
var fileName = System.IO.Path.GetFileNameWithoutExtension(path);
var outPath = System.IO.Path.Combine(folder, $"{fileName}.jpg");

if (File.Exists(outPath))
{
if (!isOverwrite()) return;
PicItems.Remove(PicItems.FirstOrDefault(x => x.FilePath == outPath)!);
}

using (var fsin = new FileStream(path, FileMode.Open, FileAccess.ReadWrite))
using (var fsout = new FileStream(outPath, FileMode.Create, FileAccess.Write))
{
var f = BitmapFrame.Create(fsin, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.OnDemand);
var meta = f.Metadata.Clone() as BitmapMetadata ?? new BitmapMetadata("jpg");
var enc = new JpegBitmapEncoder();
enc.Frames.Add(BitmapFrame.Create(f, f.Thumbnail, meta, f.ColorContexts));
enc.Save(fsout);
}

PicItems.Add(new(outPath));
}
}

ViewModelを統合して利用することにしました！
Itemsは同じ名称だと困るので、RectのものはRectItems、PicのものはPicItemsとしています。

[TN8001]

> RectInfoCollectionは、Rectの情報のみが集まったものです。
> PicItemsは、画像の情報データが集まったものです。

「画像は選択肢であって四角と１対１ではない」ということですね。

> Canvasの裏に画像を表示させようとImageを追加したが、それも表示されない

四角に画像を入れるのではなく、背景に画像を出すってことですか？
四角に入れるものだと思ってました^^;
だったら【1】と【2】ほとんど関係ないような...

> 以前質問させていただいた2つを組み合わせたものにしようとしています。

【1】のBA回答は移動のみですがいいのですか？
次の質問が「四角をリサイズするには」になったりしませんか？

わたしの２つ目の回答は移動・リサイズできています。
まああまりいい出来ではなかったので、よりシンプルなものに書き直して手元では大体できてはいます。

しかし機能が盛沢山すぎて１万字に収まる気がしません...
あぁ「SubWindowはあっちの回答そのままです」って手で省略できるか？？でもあっちは中途半端な状態なんだよなぁ...

SubWindowは「モードレス・[適用]ボタンを押したとき」でいいんでしょうか？
そうならあっちを編集します。

[nodoita]

>「画像は選択肢であって四角と１対１ではない」ということですね。
>四角に画像を入れるのではなく、背景に画像を出すってことですか？
そうです！言葉足らずで申し訳ありません。
【1】と【２】のデータというか、そういうのは特に関係ないです。

SubWindowが出ているときはMainWindowの操作予定はないので
モーダル？で問題ないです！

[TN8001]

> SubWindowが出ているときはMainWindowの操作予定はないので
> モーダル？で問題ないです！

モーダル：ほげダイアログ
モードレス：ほげウィンドウ
と用語を使い分けていただくと、ほかの人（特にPC歴長い方）に通じやすいです^^

モーダルなのかぁ（また予想が外れたｗ
まあ週末のネタができたので全然いいです^^;

部分部分に分けて過去回答書き替えていくかなぁ？
次の質問（リサイズが来るんですよね？）に間に合うかはわかりませんが^^;

[nodoita]

色々とお世話になり、またご迷惑をおかけし申し訳ありません。
サイズ変更はとりあえず置いておいて、機能を優先したいと思ったのですが、動作が上手くいかないのでまた質問させていただきます。
毎回ありがとうございます！

Answer 3

【1】
WPF　動的生成したRectangleがドラッグで移動できない、Bindingが難しい…
https://teratail.com/questions/j700zzpncph60k

上記が新しくなってました。
新しくしてどうか確認します。

Comments

[TN8001]

ここは回答欄です。回答欄に回答でないものを書き込まないでください。

このような内容は質問のコメント欄か、質問を編集して追記してください。
この回答は削除リクエスト（右下のゴミ箱アイコン）してください。

[nodoita]

ありがとうございます、削除リクエストしました