WPFでユーザーコントロールを動的に配置したい！

やりたいこと

・View側にユーザーコントロールを動的に配置したい

該当のソースコードは以下の通りです。

#MainWindow.xaml

c#
1<Window x:Class="terateil.MainWindow"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6        xmlns:local="clr-namespace:terateil"
7        mc:Ignorable="d"
8        Title="MainWindow" Height="350" Width="525">
9    <Grid>
10        <local:RowCtrl x:Name="rowCtrl" DataContext="{Binding testData}" />
11    </Grid>
12</Window>

#RowCtrl.xaml

c#
1<UserControl x:Class="terateil.RowCtrl"
2             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
5             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
6             xmlns:local="clr-namespace:terateil"
7             mc:Ignorable="d" 
8             d:DesignHeight="80" d:DesignWidth="200">
9    <Grid>
10        <Grid.ColumnDefinitions>
11            <ColumnDefinition Width="50" />
12            <ColumnDefinition Width="150" />
13        </Grid.ColumnDefinitions>
14        <Label x:Name="lblTest" Grid.Column="0" />
15        <TextBlock x:Name="txbTest" Grid.Column="1" />
16    </Grid>
17</UserControl>

これをViewModel側から渡される要素数に応じて、
RowCtrlの表示数を変えたいというのが動きです。

似た質問として以下のものがありましたが、
よく理解できていないため、質問させていただきました。

リンク内容

回答のほど、よろしくお願いします。

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

回答1件

ベストアンサー

こんにちは。

ItemTemplateを使うことが多いと思います。

xml
1<Grid>
2    <ItemsControl ItemsSource="{Binding testData}">
3        <ItemsControl.ItemTemplate>
4            <DataTemplate>
5                <local:RowCtrl />
6            </DataTemplate>
7        </ItemsControl.ItemTemplate>
8    </ItemsControl>
9</Grid>

csharp
1public class Hoge
2{
3    public ObservableCollection<int> testData { get; set; } = new ObservableCollection<int>();
4
5    public Hoge()
6    {
7        foreach (var current in Enumerable.Range(1, 3))
8        {
9            testData.Add(current);
10        }
11    }
12}