My ListView or ListBox control size doesn't shrink when there is a complex data template which hides display elements based on triggers?

Question

I have a ListView element with a DataTemplate for each ListViewItem defined as follows. When run, the ListView's height is not collapsed onto the items in the view, which is undesirable behavior:

<DataTemplate x:Key="LicenseItemTemplate">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"  />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Text="{Binding company}"></TextBlock>
        <Grid Grid.Row="1" Style="{StaticResource HiddenWhenNotSelectedStyle}">
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Button Grid.Row="0">ClickIt</Button>
        </Grid>
    </Grid>
</DataTemplate>

The second row of the outer grid has a style applied which looks like this. The purpose of the style is to :

<Style TargetType="{x:Type Grid}" x:Key="HiddenWhenNotSelectedStyle" >
    <Style.Triggers>
        <DataTrigger
            Binding="{Binding Path=IsSelected, 
                        RelativeSource={
                        RelativeSource 
                        Mode=FindAncestor, 
                        AncestorType={x:Type ListViewItem}
                        }
                        }" 
            Value="False">
            <Setter Property="Grid.Visibility" Value="Collapsed" />
        </DataTrigger>
        <DataTrigger
            Binding="{Binding Path=IsSelected, 
                        RelativeSource={
                        RelativeSource 
                        Mode=FindAncestor, 
                        AncestorType={x:Type ListViewItem}
                        }
                        }" 
            Value="True">
            <Setter
                Property="Grid.Visibility"
                Value="Visible"
            />
        </DataTrigger>
    </Style.Triggers>
</Style>

The ListView renders like this:

The desired appearance is this, when none of the elements are selected:

...with, of course, the ListView's height adjusting to accommodate the additional content when the second grid is made visible by selection. What can I do to get the desired behavior?

Answer 1

Try to add the third row defined as

<RowDefinition Height="*" />

to the <Grid.RowDefinitions> of the first Grid.

Answer 2

While discussing the problem with WPF people at TechEd, I showed a Microsoft employee this question. He was nonplussed.

We downloaded a tool which interrogates WPF layouts and identified the container as the "Virtualizing Stack Panel" element in the ListView.

In a followup email, he wrote: "This is the fault of VirtualizingStackPanel. I’ve opened a bug about it. Hopefully it can be fixed in a future release. The workaround (using StackPanel) should be fine for now, as long as you don’t need the ListView to virtualize its content.

The bug involves a step in VSP’s Measure algorithm that remembers the largest size ever discovered and forces all future Measure calls to report a size at least as large. In your case, the VSP is initially measured before any triggers have fired, so it computes the size as if everything were visible. When the triggers fire and collapse the buttons, the measure algorithm computes the correct (small) size, but then forces the result to be large again. The comment says something about avoiding unnecessary re-layouts while scrolling, but the code is running even when there’s no scrolling going on."

The work-around involves re-templating the ListView with this code:

<ListView.ItemsPanel>
  <ItemsPanelTemplate>
    <StackPanel/>
  </ItemsPanelTemplate>
</ListView.ItemsPanel>

This caused the list behavior to work as desired, but it carries the disadvantage of not having the memory management capabilities of the VirtualizingStackPanel. For my use, this was appropriate; the list items are never going to exceed 2000 or so at one time.