WPFで、Canvasコントローラにスクロールを追加したい

Question

開発環境
VisualStudio2019
C#
WPF

やりたいこと

Canvas内にTextBoxコントローラを配置しており、今TextBoxコントローラを動的に生成しています。
ですが、Canvasタグが原因なのかスクロールが縦横どちらも表示されず、はみ出してしまっている状態です。
これを解消しようと、下記コードのように<ScrollViewer>を追加してみたところ、今度はTextoBoxコントローラ自体が表示されなくなりました。
Canvasにはスクロ―ル追加ができないのでしょうか
XAML

コード
            <StackPanel Grid.Row="1" Grid.Column="2">


                    <ItemsControl ItemsSource="{Binding Collections}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>

                                <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

                                <Canvas>


                                    <TextBox Text="{Binding Name}" 
                                     Background="LightCyan" 
                                     Width="{Binding Width2}"
  
                                     Canvas.Left="{Binding LeftPosition}"
                                     Canvas.Top="{Binding TopPosition}"
                                     />



                                </Canvas>
                                </ScrollViewer>

                            </DataTemplate>

                        </ItemsControl.ItemTemplate>

                    </ItemsControl>

            </StackPanel>

Answer 1

ItemsControlの使い方を、根本的に間違えています。
ItemsControlはカスタマイズ性が高いのはいいのですが、すごいややこしいです^^;

まずここで大枠を確認してください。
ItemsControl 攻略 ～ 外観のカスタマイズ | grabacr.nét

実際にはこちらが、ほぼそのまま使えるかと思います。
wpf - Using a ScrollViewer with an ItemsControl with a Canvas as the ItemsPanel - Stack Overflow

<Window
  x:Class="Q6fqs4vhmi2lp5m.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:Q6fqs4vhmi2lp5m"
  Width="600"
  Height="450">
  <Window.DataContext>
    <local:ViewModel />
  </Window.DataContext>
  <DockPanel>
    <Button
      Command="{Binding AddCommand}"
      Content="add"
      DockPanel.Dock="Top" />

    <ItemsControl ItemsSource="{Binding Collections}">
      <!--  子要素のレイアウトにCanvasを使用する  -->
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <!--  Canvasのサイズを入れないとスクロールバーを出せない  -->
          <Canvas Width="{Binding CanvasWidth}" Height="{Binding CanvasHeight}" />
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>

      <!--  子要素のコンテナのスタイル  -->
      <ItemsControl.ItemContainerStyle>
        <Style>
          <!--
            子要素（TextBox）は直接追加されるのではなく
            ItemContainer（ContentPresenter）に包まれた上で追加されるため
            ItemContainerに対してCanvas.Left・Topを設定する
          -->
          <Setter Property="Canvas.Left" Value="{Binding Left}" />
          <Setter Property="Canvas.Top" Value="{Binding Top}" />
        </Style>
      </ItemsControl.ItemContainerStyle>

      <!--  子要素のテンプレート  -->
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <TextBox
            Width="{Binding Width}"
            Background="LightCyan"
            Text="{Binding Name}" />
        </DataTemplate>
      </ItemsControl.ItemTemplate>

      <!--  ItemsControl自体のテンプレート  -->
      <ItemsControl.Template>
        <ControlTemplate>
          <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <ItemsPresenter HorizontalAlignment="Left" VerticalAlignment="Top" />
          </ScrollViewer>
        </ControlTemplate>
      </ItemsControl.Template>
    </ItemsControl>
  </DockPanel>
</Window>

using System.Collections.ObjectModel;
using System.Linq;
using System.Windows;
using System.Windows.Input;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace Q6fqs4vhmi2lp5m
{
    public class Item
    {
        public double Left { get; set; }
        public double Top { get; set; }
        public double Width { get; set; }
        public string Name { get; set; }


        private static int count; // 雑いｗ

        public Item()
        {
            Left = Top = count * 50;
            Width = 100;
            Name = $"Name{count + 1}";
            count++;
        }
    }

    public class ViewModel : ObservableObject
    {
        public ObservableCollection<Item> Collections { get; }=new ObservableCollection<Item>();
        public double CanvasWidth { get => _CanvasWidth; set => SetProperty(ref _CanvasWidth, value); }
        private double _CanvasWidth;
        public double CanvasHeight { get => _CanvasHeight; set => SetProperty(ref _CanvasHeight, value); }
        private double _CanvasHeight;
        public ICommand AddCommand { get; }

        public ViewModel()
        {
            AddCommand = new RelayCommand(() =>
            {
                Collections.Add(new Item());
                CanvasWidth = Collections.Max(x => x.Left + x.Width);
                CanvasHeight = Collections.Max(x => x.Top + 30);
            });

            AddCommand.Execute(null);
        }
    }

    public partial class MainWindow : Window
    {
        public MainWindow() => InitializeComponent();
    }
}

NuGet Gallery | CommunityToolkit.Mvvm 7.1.2

Comments

[african]

ご回答ありがとうございました。
お教えいただいたURLを参考にして、ItemsControlに対する理解が間違っていたことに気づくことができました。
Canvasは、ItemsPanelプロパティ内に記述して、子要素ItemはItemTemplateのほうに記述するということや
、Canvas上の位置指定は、Itemに対してではなくItemコンテナーに対して指定するという考え方も理解が深まりました。
無事にスクロールバーが追加され期待通りの動作ができました。
この度は本当にありがとうございました！