Question

I have a ListBox, inside a Grid, inside an Expander. The ListBox is bound to an IList.

When I expand the Expander control for the first time, the ListBox processes all of the items in the IList (which can be thousands) instead of only processing the items that would be visible on the screen.

If however I fix the height of the ListBox control, it behaves as expected and only accesses those items in the IList that will be visible.

Effectively, the Virtualization is not working, though I believe that this is more related to the ListBox not being able to determine a height when the content items are being prepared.

The XAML is basically as follows (some stuff removed for simplification)…

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Expander ExpandDirection="Right"
              Grid.Column="0"
              Grid.Row="0"
              Grid.RowSpan="2"
              Header="Documents"
              IsExpanded="False">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid Grid.Row="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="50" />
                </Grid.RowDefinitions>
            </Grid>
            <ListBox Name="listBox"
                     Grid.Row="1"
                     ItemsSource="{Binding Path=Items}"
                     SelectedIndex="{Binding Path=SelectedIndex}"
                     SelectedItem="{Binding Path=SelectedItem}"
                     SelectionMode="Single"
                     Width="250">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" />
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Column="0"
                                       Style="{StaticResource prompt}">
                                <TextBlock.Text>
                                    <MultiBinding StringFormat="{}{0}{1:00000}">
                                        <Binding Path="..."
                                                 FallbackValue="0" />
                                        <Binding Path="..." />
                                    </MultiBinding>
                                </TextBlock.Text></TextBlock>
                            <TextBlock Grid.Column="1"
                                       Style="{StaticResource prompt}">
                                <TextBlock.Text>
                                    <Binding Path="ItemCount"
                                             StringFormat="{}{0} Items"
                                             FallbackValue="" />
                                </TextBlock.Text></TextBlock>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Expander>
    <v:DocumentView x:Name="documentView"
                    Grid.Column="1"
                    Grid.Row="0"
                    DocumentID="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type v:BatchView}}, Path=ViewModel.SelectedItem.ID}"
                    IsActive="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type v:BatchView}}, Path=IsActive}" />
    <StackPanel Grid.Column="1"
                Grid.Row="1"
                Style="{StaticResource buttonStackStyle}">
        <Button Command="{Binding Path=PreviousCommand}"
                Style="{StaticResource previousButtonStyle}" />
        <Button Command="{Binding Path=NextCommand}"
                Style="{StaticResource nextButtonStyle}" />
    </StackPanel>
</Grid>

Can anybody suggest how I might set the Height of the ListBox to the ActualHeight of the Grid.Row parent? Alternatively, can anybody provide a better solution?

Thanks.

Answer 1

Short version: remove Grid.RowSpan from the expander.

Long version:

Background: (in really broad strokes)

When you define the height of RowDefinition three things can happen, depending what type of units you end up using:

1. Pixel – any UIElement that is placed in that row will have the defined row height passed to the Measure and Arrange methods of the element.
2. Auto – the grid will pass infinity as the height for Measure and then element.DesiredSize.Height for Arrange.
3. Star – the grid will consider the heights of all rows with units of pixels and auto; calculate the height that is left from its available height and divide it by the “total of stars” that were defined for all the rows – this is the height of one star; then, each row height is assigned depending on the multiplier for its star definition; this height is passed to the Measure and Arrange methods.

Same logic is applied to column definitions only regarding width instead of height.

So, star definition is “stopping” the element, pixel definition is also “stopping” but it can be outside of the rendered view and auto definition is “letting” the element to be what ever size it wants to be.

All this logic is recursive so you need to think in two directions (explanation below).

In your case

In one direction. The ListBox is in a star row so it’ll be stopped. The parent grid is also stopped (since the template for expander uses DockPanel that is also a “stopping panel”). The expander is defined to begin in a star row but it spans to an auto row – this means that it will be allowed to grow in height ’till infinity. Oops…time to reverse.

Now the reverse direction. The expander is not stopped, the child grid is not stopped (since the grid assumes it has infinite height available), thus the list box is not stopped, the ScrollViewer in the template of list box is not stopped so it’s ViewportHeight is infinite, for the VirtualizingStackPanel that arranges the items (and is a child of the scroll viewer) this means all items are in the view == render all elements.

For a WPF window with default template, you can always assume the window is stopping its child element. So if removing the row span definition has not resolved the issue, continue traversing up until you find another element that is not stopping its child height and change its definitions or change the panel to stop the height from growing to infinity (scroll viewers are notorious for creating these behaviours, especially the ones that are hidden in templates).