David David - 1 year ago 77
C# Question

Using an ItemsControl inside of a ListView ItemTemplate with XAML

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:

Crude Drawing of desired look
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 Source

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, }
};
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download