Matching vertical layout in different ItemsControls

Question

I have ListView that uses a GridView to display several columns of data.

Two of the columns have cell templates containing ItemControl's to show a small collection in each cell.

The problem I have is that the vertical size of the ItemControls is not connected in any way since they are in different cells, and therefore they don't line up.

eg:(note this is ONE ROW in the parent listview)

XAML so far:

<ListView Margin="6,6,6,0" ItemsSource="{Binding Controllers}">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem" >
            <Setter Property="VerticalContentAlignment" Value="Top" />
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.View>
        <GridView>

         <!-- snip other columns -->

        <GridViewColumn Header="Mode">
             <GridViewColumn.CellTemplate>
                 <DataTemplate>
                    <ItemsControl ItemsSource="{Binding Modes}" DisplayMemberPath="Name"/>   
                 </DataTemplate>
             </GridViewColumn.CellTemplate>
        </GridViewColumn>

        <GridViewColumn Header="Parameters">
            <GridViewColumn.CellTemplate>
                <DataTemplate>
                    <ItemsControl ItemsSource="{Binding Modes}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock  Text="Blah:" Margin="5,0"/>
                                    <ComboBox>
                                        <ComboBoxItem>Hello</ComboBoxItem>
                                    </ComboBox>
                                 </StackPanel>
                             </DataTemplate>
                         </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </DataTemplate>
            </GridViewColumn.CellTemplate>
        </GridViewColumn>
    </GridView>
    </ListView.View>
</ListView>

My first thought was to use a grid as the ItemsPanel of the ItemsControls, so I could use SharedSizeScope on the rows to line them up. However, I can see no way of assigning items dynamically created by the ItemsControl to specific Grid rows.

Can anyone suggest a better solution?

Answer 1

Managed to fix this by setting ListView.ItemContainerStyle.VerticalContentAlignment to Stretch, and then using UniformGrid's for the ItemsControl panels:

Each cell now stretches vertically to match the largest cell, and using UniformGrid splits that vertical size evenly for each item.

eg

<GridViewColumn Header="Mode">
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding Modes}" DisplayMemberPath="Name">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Columns="1"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>