Question

I am having a ListView in wpf which is used to display list of fields; based on a property value some of the fields can be collapsed at run time. Its working fine except that ListVIew does not collapse the space reserved for ListViewItem’s which got collapsed at run time.

I am able to see the extra ListViewItems in Snoop(having Visibility as Collapsed), ListView too shifts the items upwards but it doesn’t adjusts its height to remove the empty space!

I can surely say that this is happening due to VirtualizedStackPanel as changing the ItemsPanel to StackPanel solves the issue. Here is the relevant ListView XAML:

<ListView
    x:Class="Wizards.FieldBinderModelListView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Margin="0"
    VerticalAlignment="Top"
    HorizontalContentAlignment="Stretch"
    VerticalContentAlignment="Top"
    Background="White"
    BorderThickness="0"
    Grid.IsSharedSizeScope="True"
    KeyboardNavigation.DirectionalNavigation="Continue"
    Padding="1"
    ScrollViewer.HorizontalScrollBarVisibility="Hidden"
    ScrollViewer.VerticalScrollBarVisibility="Hidden"
    SelectionChanged="ListViewSelectionChanged"
    SelectionMode="Single">
    <ListView.ItemsPanel>
       <ItemsPanelTemplate>
        <!--Works fine with StackPanel but not with VirtualizingStackPanel
          Explicitly added this PanelTemplate to show that it works with            
          StackPanel;ListView uses VirtualizingStackPanel as default panel 
          and causes same problem-->              
        <!--<StackPanel Orientation="Vertical" VerticalAlignment="Top"/>-->
          <VirtualizingStackPanel Orientation="Vertical" 
               VerticalAlignment="Top"/>
       </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemContainerStyle>
      <Style TargetType="{x:Type ListViewItem}">
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Foreground" Value="Black" />
            </Trigger>
            <DataTrigger Binding="{Binding Status}"
                         Value="{x:Static local:Status.NotExisting}">
                <!--Hide the fields which are in NotExisting state; 
                  Need a trigger here as Status can be different -->
                <Setter Property="Visibility" Value="Collapsed" />
            </DataTrigger>
        </Style.Triggers>
      </Style>
  </ListView.ItemContainerStyle>
  <ListView.ItemTemplate>
    <DataTemplate DataType="{x:Type View:FieldViewModel}">
       <local:FieldEditor
          Margin="0,2,0,0"
          HorizontalAlignment="Stretch"
          VerticalAlignment="Top"
          HorizontalContentAlignment="Stretch"
          VerticalContentAlignment="Top"
          Padding="0">
          <!--<local:FieldEditor.Style>
              <Style TargetType="{x:Type local:FieldEditor}">
                <Style.Triggers>
                  <DataTrigger
                    Binding="{Binding Status}"
                    Value="{x:Static local:Status.NotExisting}">
                      <Setter Property="Visibility" Value="Collapsed" />
                  </DataTrigger>
                </Style.Triggers>
              </Style>
            </local:FieldEditor.Style>-->
        </local:FieldEditor>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

Is this a bug in VirtualizingStackPanel? Anyone else faced a similar issue? Any workarounds?

---

Update:

Reported this bug to MS on connect – https://connect.microsoft.com/VisualStudio/feedback/details/734113/virtualizingstackpanel-not-handling-collapsed-items-correctly

Answer 1

I managed to reproduce your problem. It certainly looks like a bug in VirtualizingStackPanel.
A work around is to set the height of the hidden items to zero instead of collapsing them:

<DataTrigger Binding="{Binding Status}" Value="False">
    <Setter Property="Height" Value="0" />
    <Setter Property="IsEnabled" Value="False"/>
    <!--<Setter Property="Visibility" Value="Collapsed" />-->
</DataTrigger>