Как привязать данные в элементе управления к панели стека?

Question

Я пытаюсь создать собственный ListBox. Получает список с тремя свойствами:

SubjectName Проблемы AverageScore

Свойство Задачи - это еще один список, содержащий несколько классов Задач. Это шаблон данных, который я создаю.

    <DataTemplate x:Key="SubjectDataTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="100"/>
            </Grid.ColumnDefinitions>
            <StackPanel Margin="5">
                <StackPanel Orientation="Horizontal" TextBlock.FontWeight="Bold" >
                    <TextBlock Text="{Binding Path=ProblemNumber, FallbackValue=ProblemNumber}" />
                    <TextBlock Text="{Binding Path=SubjectName, FallbackValue=SubjectName}" Padding="3,0,0,0"/>
                </StackPanel>
                <TextBlock Text="{Binding Path=AverageScore, FallbackValue=AverageScore}" />
                <ItemsControl ItemsSource="{Binding Problems}">
                    <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <StackPanel Background="Aqua" Orientation="Vertical" Margin="5">
                                <Rectangle Fill="Red" Height="20" Width="20" />
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
                <!--<TextBlock Text="{Binding Path=Role, FallbackValue=Role}" />-->
            </StackPanel>
        </Grid>
    </DataTemplate>

Но у меня возникла проблема при попытке показать данные о проблемах. Я пытаюсь показать каждый элемент из списка «Проблемы» на панели стека с горизонтальной ориентацией, но каждая панель стека отделяется.

Мне нужно поместить красные прямоугольники внутри элемента управления стека. Например, десять прямоугольников из Таблиц времени должны находиться в одной панели стека.

ОБНОВЛЕНИЕ 1:

Примерно так:

Согласно графику, первая панель стека (фоновый аква) должна содержать 10 красных прямоугольников.

ОБНОВЛЕНИЕ 2:

Я проверяю показ данных из проблемы в textBlock, и это работает:

                <ItemsControl ItemsSource="{Binding Problems}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding IsCorrect}" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>


                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" Background="Gainsboro" Margin="5" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>

Answer 1

Вам необходимо использовать вложенные ItemsControls - один для вертикального списка и один для горизонтального списка.

<ItemsControl ItemsSource="{Binding Problems}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding Problems}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Rectangle Height="20" Width="20" Margin="1,0">
                            <Rectangle.Style>
                                <Style TargetType="{x:Type Rectangle}">
                                    <Setter Property="Fill" Value="Red" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsCorrect}" Value="True">
                                            <Setter Property="Fill" Value="Blue" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Rectangle.Style>
                        </Rectangle>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
     </ItemsControl.ItemTemplate>
     <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Background="Aqua" Margin="5" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

Answer 2

Это то, что вы ищете?

ОБНОВЛЕНО:

<DataTemplate x:Key="SubjectDataTemplate">
        <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>
    <StackPanel Margin="5">
        <StackPanel Orientation="Horizontal" TextBlock.FontWeight="Bold" >
            <TextBlock Text="{Binding Path=ProblemNumber, FallbackValue=ProblemNumber}" />
            <TextBlock Text="{Binding Path=SubjectName, FallbackValue=SubjectName}" Padding="3,0,0,0"/>
        </StackPanel>
        <TextBlock Text="{Binding Path=AverageScore, FallbackValue=AverageScore}" />
            <ItemsControl ItemsSource="{Binding Problems}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <Rectangle Fill="Red" Height="20" Width="20" />
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel  Background="Aqua" Orientation="Horizontal" Margin="5"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
    </StackPanel>
</Grid>
</DataTemplate>

Answer 3

В вашем ItemsControl.ItemsPanel создайте ориентацию StackPanel по горизонтали