Using an ItemsControl inside of a ListView ItemTemplate with XAML

Question

So, a bit of a crazy request. I need a list of items, which I plan to use a ListView for, but inside each element, I need another "List" so-to-speak that will expand horizontally.

Here is a crude drawing of the basic idea I'm going for:

For my code, this is what I've tried, but it's not working. (And yes, I'm purposely not using binding yet so I can just use the design view to get everything looking right)

<ListView>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Grid.IsSharedSizeScope="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" SharedSizeGroup="KpiColumn0" />
                                <ColumnDefinition Width="Auto" SharedSizeGroup="KpiColumn1" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0">
                                <TextBlock Text="Test" />
                                <TextBlock Text="Test" FontSize="8" Margin="0,-4,0,0" />
                            </StackPanel>

                            <TextBlock Grid.Row="0" Grid.Column="2" Text="Test" />
                            <TextBlock Grid.Row="1" Grid.Column="0" Text="Test" />
                            <TextBlock Grid.Row="1" Grid.Column="2" Text="Test" />
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.Items>
        <MenuItem />
    </ListView.Items>
</ListView>

How can I use a ListView to hold a list of items in each of its item, that expand horizontally, based on how many elements are in the List that each ListItem is bound to?

Answer 1

Add this to your inner ItemsControl and the items will be shown in horizontal alignment.

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

---

Note that you won't be able to use the designer view for this. You'll need to remove the ListView.Items that you have, and instead use binding or code-behind to have it show when running.

Something like this should work, if you give the ListView a Name of LV:

LV.ItemsSource = new List<List<int>>
{
    new List<int> {1,2,3,4, },
    new List<int> {1,2,3,4, }
};