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?

@Phil: Sorry, brain fart. I meant ItemsControl. Have edited. (Was thinking of stackpanel since ItemsControl stacks children by default) — GazTheDestroyer, Apr 05 '12 at 12:25
So is there one mode for each blah? If so why doesn't your view model expose it like that? — Phil, Apr 05 '12 at 12:27
Yes each mode has a Blah. My ViewModel does expose it like that (ModeVM has Name and Blah properties, Modes is a collection of ModeVMs). My problem is displaying is nicely. — GazTheDestroyer, Apr 05 '12 at 12:32
Ok, now I'm confused. Why doesn't your Mode column just show one Mode then? Then vertically centre the cells. — Phil, Apr 05 '12 at 12:33
Sorry it's confusing. I should included more columns to better show it. Each list item has multiple modes. I have found a solution now anyway but thanks for your time. Will post solution in a mo. — GazTheDestroyer, Apr 05 '12 at 12:42

GazTheDestroyer · Accepted Answer · 2012-04-05T22:31:03.543

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>

Matching vertical layout in different ItemsControls

1 Answers1