Canvasコントロールの子要素を動的に増減させたい

Question

やりたいこと

MVVM下で、WPF & C# を使って、Canvas コントロールの子要素を動的に増減させたいです。
こちらにある質問と同様の質問になりますが、子要素は (そちらの質問がやっているような) Rectangle だけでなく、Canvas の子要素にすることができる全てのコントロールを対象として増減させたいです。

質問

このようなことが可能であれば、やり方を教えてください。
ViewModel にバインドする方法で出来なければ、Canvas.Children.Add でやりますので、可能でない場合は、可能でない、と教えていただけるだけで大丈夫です。

自分のレベル

C, C++, JavaScript は10年ほど
C# は3ヵ月ほど
.NET Core 3.1 & WPFは、1日経った程度です。
よって、C#は大体分かりますが、WPFはまだあまりよく分かっていません。
最低限、MSDocsのWPF入門は一通り見ており、基礎的なウィンドウ程度は作れます。
Binding, DataContext を使った View-ViewModel 間のデータバインドの方法も、単純なものなら理解しています。

Comments

[TN8001]

> Canvas の子要素にすることができる全てのコントロールを対象として増減させたいです。

理屈上はChildrenにはUIElementなら何でも入りそうですが、入れても意味のないものもありそうですし実際は「自分で選んだいくつかのコントロール」ではないのですか？

[C# - C#、WPF、MVVM形式、で画面に図形を表示したい｜teratail](https://teratail.com/questions/349407#reply-478878

例えば↑のようにDataTemplate・classを必要なだけ増やすのは、できたことになるんですか？

あるいは型名やTypeからインスタンスを作ること自体は容易ですが、できたところで型に固有のプロパティ（RectangleならFill・ButtonならContent・TextBlockならText等々）をどう設定するのですか？

[tails]

ご回答ありがとうございます。
確かに、実際は「自分で選んだいくつかのコントロール」ですね。
Path, Ellipse, Image, Rectangle, RichTextBox が今のところ想定しているコントロールです（が後々、増減える可能性があります）。
PDFリーダを作りたくて、それの実装に必要なコントロールたちですね。
PDFの各ページを Canvas にして、そこに描画する形での実装を考えています。

参考先のリンクも拝見しました。
> 例えば↑のようにDataTemplate・classを必要なだけ増やす
DataTemplate をクラスごとに出来るんですね。
確かに、その方法で、プロパティも設定できるなら、必要な分だけ追加するのでも十分そうです。

> 型に固有のプロパティ ... をどう設定する
Canvas.Children.Add でやる場合の話でしょうか？
その場合は、
var rectangle = new System.Windows.Shapes.Rectangle();
rectangle.Fill = System.Windows.Media.Brushes.White;
のように設定して、Canvas.Children.Add(rectangle); のイメージでした。

そうじゃなくて、バインドする形でやる場合は、、
参考先リンクのご回答の Shapes にバインドさせて、そこにプロパティ付きの Diamond, Circle などを追加し、View からは、バインドされている Shapes から Shape 型のオブジェクトが取れるわけですが、「その元の型」(つまり、Diamond or Circle) を取り出して、元の型ごとに分岐させて、そこからプロパティを取れるような感じにできないかな
と思っています。
参考先リンクのご回答の DataTemplate で、{x:Type local:Diamond} で指定しているのって、そういうことですよね？
この Diamond クラスにプロパティを持たせれば、できそうな感じがしています。

Answer 1

C# - C#、WPF、MVVM形式、で画面に図形を表示したい｜teratail
例えば↑のようにDataTemplate・classを必要なだけ増やす

DataTemplate をクラスごとに出来るんですね。
確かに、その方法で、プロパティも設定できるなら、必要な分だけ追加するのでも十分そうです。

提示リンクとほぼ何も変わりませんが、雑に想定コントロール版に書き換えました（不足プロパティがあるでしょうが好きに足してください）
面倒なので増減はしませんが、Itemsを増減すれば表示も追従します。

PDFリーダーにこの（ItemsControlにバインドするような）方法が向いているかは、ちょっとわからないです。

<Window
  x:Class="Questions359699.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:Questions359699"
  Width="800"
  Height="450">
  <Window.Resources>
    <DataTemplate DataType="{x:Type local:PathItem}">
      <Path
        Width="{Binding Width}"
        Height="{Binding Height}"
        Data="{Binding Data}"
        Stroke="{Binding Stroke}" />
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:EllipseItem}">
      <Ellipse
        Width="{Binding Width}"
        Height="{Binding Height}"
        Fill="{Binding Fill}" />
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:ImageItem}">
      <Image
        Width="{Binding Width}"
        Height="{Binding Height}"
        Source="{Binding Source}" />
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:RectangleItem}">
      <Rectangle
        Width="{Binding Width}"
        Height="{Binding Height}"
        Fill="{Binding Fill}" />
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:RichTextBoxItem}">
      <RichTextBox Width="{Binding Width}" Height="{Binding Height}">
        <FlowDocument>
          <Paragraph>
            <Run Text="{Binding Text}" />
          </Paragraph>
        </FlowDocument>
      </RichTextBox>
    </DataTemplate>
  </Window.Resources>

  <Grid>
    <ItemsControl ItemsSource="{Binding Items}">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <Canvas />
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      <ItemsControl.ItemContainerStyle>
        <Style>
          <Setter Property="Canvas.Left" Value="{Binding X}" />
          <Setter Property="Canvas.Top" Value="{Binding Y}" />
        </Style>
      </ItemsControl.ItemContainerStyle>
    </ItemsControl>
  </Grid>
</Window>

using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace Questions359699
{
    public class Item
    {
        public double X { get; set; }
        public double Y { get; set; }
        public double Width { get; set; }
        public double Height { get; set; }
    }

    public class PathItem : Item
    {
        public Brush Stroke { get; set; }
        public string Data { get; set; }
    }

    public class EllipseItem : Item
    {
        public Brush Fill { get; set; }
    }

    public class ImageItem : Item
    {
        public ImageSource Source { get; set; }
    }

    public class RectangleItem : Item
    {
        public Brush Fill { get; set; }
    }

    public class RichTextBoxItem : Item
    {
        public string Text { get; set; }
    }

    public partial class MainWindow : Window
    {
        public ObservableCollection<Item> Items { get; }

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;

            Items = new ObservableCollection<Item>
            {
                new PathItem { X = 50, Y = 50, Width = 50, Height = 50, Stroke = Brushes.Red, Data = "M0,25L25,50L50,25L25,0Z", },
                new EllipseItem { X = 200, Y = 50, Width = 50, Height = 100, Fill = Brushes.Green, },
                new ImageItem { X = 50, Y = 200, Width = 32, Height = 32, Source = new BitmapImage(new Uri("https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail_32x32.jpg")), },
                new RectangleItem { X = 200, Y = 200, Width = 100, Height = 50, Fill = Brushes.Blue, },
                new RichTextBoxItem { X = 400, Y = 50, Width = 300, Height = 300, Text = "RichTextBoxItem" },
            };
        }
    }
}

Comments

[tails]

無事、想定する感じでできました！
ありがとうございました。