Question

I’m trying to create a custom ListBox. That receives a list with three properties:

SubjectName
Problems
AverageScore

The property Problems is another list which contains several Problem class. This is the data template I’m creating.

    <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>

But I’ve got a problem trying to show Problems data. I’m trying to show each element from Problems list in a stack panel with ortientation horizontal, but I get each stack panel separated.

I need to put the red rectangles inside the stack control. For example, the ten rectangles from Times Tables should be in one only stack panel.

UPDATE 1:

Something like this:

According to the graph, the first stack panel (background aqua) must contain 10 red rectangles.

UPDATE 2:

I’m verifying showing the data from problem in a textBlock and it works:

                <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

You need to use nested ItemsControls – One for the Vertical list and one for the Horizontal List.

<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>