WPF(C#)で、ItemsControl内に複数のコントローラを設定したい

開発環境
VisualStudio2019
C#
WPF

前置き
現在、MindMapを自作しようと思い、アイデアとして、ItemsControl内のItemsPanelでCanvasを指定して、TextBox（ブランチ）を動的生成し、かつ、親子間のTextBox(ブランチ）同士を線で結んで、MIndmapのようなことをしたいと考えています。
線は、Lineコントローラを使用しています。

つまづいたこと
現在、ItemsControlを記述し、コレクションをBindingすることでTextBox(ブランチ)を動的に生成するところまでは成功しています。
しかし、Lineコントローラを記述するところでつまづいています。

実現したいこと
LineとTextBox両方をそれぞれ独立に同じCanvas上に描画したいです。いわゆるMindMapでスクロールしてもちゃんと対応できる感じです。

試したこと
①ItemTemplateのDataTemplate内に、

コード
        <Line
            Grid.Row="1"
            Grid.Column="1"
            Stroke="Black"
            StrokeThickness="4"
            X1="1000"
            X2="0"
            Y1="109"
            Y2="50" />

を記述すると、
エラー「VisualTreeが複数回設定されています。とVisualTreeeは１回しか設定できません」がでてしまいます。

②DataTemplate内に、StackPanelを入れてその中にTextBoxとLineをいれてみる。
実際にいれてみたところ、どうやらDataTemplateとして１つのコンテナーとしてTextBoxとLineがセットとして扱われてしまい、
Canvas上での座標してはこんてなーにたいして行うItemsControlの仕様からそれぞれを独立して扱えずに、つまり複数TextBox同士を線でつなぐといった小回りができませんでした。

③いっそのことItemsControlの外に記述する

外に記述してみたところ、いけそうなかんじはしたのですが、なぜかItemsControlのCanvasにつけたスクロールを動かしても、ずっとそのLine
が画面上に残ったままになり、つまりはLineだけがスクロールされていない状態になってしまいます。
おそらく、CanvasをItemsControl内に記述しているためそのCanvas上にLineを描画した判定になっていないのかなと推察しています。

XAML
1       <ItemsControl
2            Grid.Row="1"
3            Grid.Column="1"
4            ItemsSource="{Binding Collections}">
5
6            <ItemsControl.Template>
7                <ControlTemplate TargetType="ItemsControl">
8
9                    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
10                        <ItemsPresenter HorizontalAlignment="Left" VerticalAlignment="Top" />
11                    </ScrollViewer>
12
13
14
15
16                </ControlTemplate>
17            </ItemsControl.Template>
18
19            <ItemsControl.ItemsPanel>
20                <ItemsPanelTemplate>
21                    <Canvas
22                        Width="20000"
23                        Height="20000"
24                        Background="Honeydew" />
25                </ItemsPanelTemplate>
26            </ItemsControl.ItemsPanel>
27
28
29            <ItemsControl.ItemTemplate>
30                <DataTemplate>
31
32             
33
34
35                        <TextBox
36                            Width="{Binding BranchWidth}"
37                            Height="{Binding BranchHeight}"
38                            VerticalAlignment="Top"
39                            AcceptsReturn="True"
40                            Background="LightCyan"
41                            Text="{Binding BranchText}"
42                            TextWrapping="NoWrap" />
43
44
45
46
47                </DataTemplate>
48            </ItemsControl.ItemTemplate>
49
50
51            <ItemsControl.ItemContainerStyle>
52                <Style>
53                    <Setter Property="Canvas.Left" Value="{Binding BranchLeftPosition}" />
54                    <Setter Property="Canvas.Top" Value="{Binding BranchTopPosition}" />
55                </Style>
56
57            </ItemsControl.ItemContainerStyle>
58
59
60
61
62
63
64        </ItemsControl>
65

行動規範の内容に同意します

回答1件

ベストアンサー

LineとTextBox両方をそれぞれ独立に同じCanvas上に描画したいです。いわゆるMindMapでスクロールしてもちゃんと対応できる感じです。

DataTemplateの真価が発揮されます。

今まで子要素はTextBox固定だったから、ItemTemplateを使用していたわけです。
それがTextBoxだけでなく、Lineも含むように変わったわけですね。
そうなるとCollectionsに含まれる型（クラス）も複数になります。

ItemTemplateを設定せず、DataTemplateを型ごとにリソースに置いておくように変更します。
そうするとそれを使って表示してくれますので、型ごとに別々の見た目を与えられます。

ContentPresenterはできるだけ頑張ってちゃんと表示しようとします。親をさかのぼってもテンプレートが見つからなければ最終的にはToStringします。

xml
1<Window
2  x:Class="Qumd1xowfvc40f5.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  xmlns:local="clr-namespace:Qumd1xowfvc40f5"
6  Width="600"
7  Height="450">
8  <Window.DataContext>
9    <local:ViewModel />
10  </Window.DataContext>
11  <Grid>
12    <Grid.RowDefinitions>
13      <RowDefinition Height="Auto" />
14      <RowDefinition />
15    </Grid.RowDefinitions>
16    <Button Command="{Binding AddCommand}" Content="add" />
17    
18    <ItemsControl Grid.Row="1" ItemsSource="{Binding Collections}">
19      <ItemsControl.Resources>
20        <DataTemplate DataType="{x:Type local:Branch}">
21          <TextBox
22            Width="{Binding Width}"
23            Height="{Binding Height}"
24            AcceptsReturn="True"
25            Background="LightCyan"
26            Text="{Binding Text}"
27            TextWrapping="NoWrap" />
28        </DataTemplate>
29        
30        <DataTemplate DataType="{x:Type local:Connection}">
31          <Line
32            Stroke="Black"
33            StrokeThickness="4"
34            X1="{Binding X1}"
35            X2="{Binding X2}"
36            Y1="{Binding Y1}"
37            Y2="{Binding Y2}" />
38        </DataTemplate>
39      </ItemsControl.Resources>
40      
41      <ItemsControl.Template>
42        <ControlTemplate TargetType="ItemsControl">
43          <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
44            <ItemsPresenter HorizontalAlignment="Left" VerticalAlignment="Top" />
45          </ScrollViewer>
46        </ControlTemplate>
47      </ItemsControl.Template>
48      <ItemsControl.ItemsPanel>
49        <ItemsPanelTemplate>
50          <Canvas
51            Width="20000"
52            Height="20000"
53            Background="Honeydew" />
54        </ItemsPanelTemplate>
55      </ItemsControl.ItemsPanel>
56      <ItemsControl.ItemContainerStyle>
57        <Style>
58          <Setter Property="Canvas.Left" Value="{Binding Left}" />
59          <Setter Property="Canvas.Top" Value="{Binding Top}" />
60        </Style>
61      </ItemsControl.ItemContainerStyle>
62    </ItemsControl>
63  </Grid>
64</Window>

cs
1using System.Collections.ObjectModel;
2using System.Windows;
3using System.Windows.Input;
4using CommunityToolkit.Mvvm.ComponentModel;
5using CommunityToolkit.Mvvm.Input;
6
7namespace Qumd1xowfvc40f5
8{
9    public class Branch
10    {
11        public double Left { get; set; }
12        public double Top { get; set; }
13        public double Width { get; set; }
14        public double Height { get; set; }
15        public string Text { get; set; }
16
17        private static int count; // 雑いｗ
18
19        public Branch()
20        {
21            Left = Top = count * 50;
22            Width = 100;
23            Height = 30;
24            Text = $"Text{count + 1}";
25            count++;
26        }
27    }
28
29    public class Connection
30    {
31        public double X1 { get; set; }
32        public double X2 { get; set; }
33        public double Y1 { get; set; }
34        public double Y2 { get; set; }
35    }
36
37    public class ViewModel : ObservableObject
38    {
39        public ObservableCollection<object> Collections { get; } = new ObservableCollection<object>();
40        public ICommand AddCommand { get; }
41
42        public ViewModel()
43        {
44            Collections.Add(new Branch { Left = 400, });
45
46            AddCommand = new RelayCommand(() =>
47            {
48                var branch = new Branch();
49                Collections.Add(branch);
50                Collections.Add(new Connection
51                {
52                    X1 = 450,
53                    Y1 = 30,
54                    X2 = branch.Left + 50,
55                    Y2 = branch.Top,
56                });
57            });
58            AddCommand.Execute(null);
59        }
60    }
61
62    public partial class MainWindow : Window
63    {
64        public MainWindow() => InitializeComponent();
65    }
66}

NuGet Gallery | CommunityToolkit.Mvvm 7.1.2

現在、MindMapを自作しようと思い、アイデアとして、ItemsControl内のItemsPanelでCanvasを指定して、TextBox（ブランチ）を動的生成し、かつ、親子間のTextBox(ブランチ）同士を線で結んで、MIndmapのようなことをしたいと考えています。

私も過去に似た系統の質問で何度か挑戦しているのですが、UXを高めよう（マウスで選択や移動等）とすると途端に難しくなりますね...
WPF　画像に文字を挿入
 C#、WPF、MVVM形式、で画面に図形を表示したい
 WPF　C#　親ウィンドウと子ウィンドウのデータ共有

（学習目的ではなく完成を優先するなら）何か便利そうなライブラリを探してみるのもいいかもしれません。
p4j4dyxcry/TsNode: WPFでGraphEditor風の画面を実現するためのコントロールです。
面白そうだなと思っただけで、実際に試したことはありません^^;

投稿2022/06/15 11:01

編集2023/07/30 09:32

TN8001

総合スコア9321

african

2022/06/16 09:02

お忙しい中、何度もご質問にお答えいただき本当にありがとうございます。ご提示いただいたコードを記述してみたところ、うまく動作しました！半日ほど、なぜかDataType{x;Type ViewModelName}のところが記述があっているのに「そんなクラスはないよ」というxamlエラーがでて格闘していましたが、いろいろ調べていき一度visualStudio終了するとなぜか直りました。自作マインドマップについてですが、ご教授いただいた通りGUI操作を実装するのにはまだ自分には早いと思い、子ブランチを生成したり、兄弟ブランチを生成し、ブランチが重なるなら重ならないようにきれいに配置（Canvas上でのPositionを変更する）というアルゴリズムならできそうなきがしているのでこちらで頑張っていこうと思います。

行動規範の内容に同意します