ListView with nested Expander not collapsing

Question

This question is the same as this other unanswered question.

When the Expander is expanded the outer ListView grows to make space for the expanders contents, but when the Expander is then collapsed the view does not force the ListView to resize.

Reduced code, with notes after:

<!--<StackPanel>-->
<ItemsControl>

  <!-- ParameterGroupView -->
  <Border BorderBrush="Brown" BorderThickness="1" CornerRadius="4" Padding="4">
    <ListView HorizontalContentAlignment="Stretch">
      <Expander Header="Expander A" IsExpanded="False">
        <ListView HorizontalContentAlignment="Stretch">

          <!-- TextView -->
          <TextBlock >Content A</TextBlock>
          <TextBlock >Content B</TextBlock>

        </ListView>
      </Expander>

    </ListView>
  </Border>

</ItemsControl>
<!--</StackPanel>-->

I have the ParameterGroupView in a ItemsControl or StackPanel because there is actually many ParameterGroupView entries. Swapping to a StackPanel does not change the behaviour.

Removing the Boarder does not affect the behaviour, but having it helps show the behaviour with only a single ParameterGroupView.

There can be many Expander sections in the outer ListView, and the Expander can have many entities inside the inner ListView.

The outer ListView and Expander is to replace a TreeView, that was used to have a list of collapsible nodes, but the TreeView's internal use of grids, means the TextView items were squashed horizonatlly, the same as if you remove ether HorizontalContentAlignment="Stretch" attributes.

So if there is another way to wrap/wire all this up, I'll be also happy.

This is a problem because our TextView blocks are large and there are many Expanders.

Edit: TextView is used as the code is data-bound, and thus dynamically put together. So any replacement for ListView would need some form of ItemsSource

Answer 1

The most obvious thing to do here is to put the expanders in a container other than a listview:

<Border BorderBrush="Brown" BorderThickness="1" CornerRadius="4" Padding="4">
    <StackPanel>

        <Expander Header="Expander A" IsExpanded="False">
            <ListView HorizontalContentAlignment="Stretch" MinWidth="100">
                <ListBox Name="listb"></ListBox>

                <!-- TextView -->
                <TextBlock >Content A</TextBlock>
                <TextBlock>Content B</TextBlock>

            </ListView>
        </Expander>
    </StackPanel>
</Border>

The container resizes around content just fine.

If you absolutely must have it in a ListView (which is possible) then I don't know of a way to get a ListView to resize easily once it's grown (beyond setting explicit sizes of the whole thing, which is clumsy and not useful). If thats the case then it's possible that you'll have to use a controllable listbox to display all the open expanders, or display the content in a different way (like in a popup, maybe?) if you want to be able to see it all at a glance.

Answer 2

Found the solution, and it details where in the question already.

ItemControl accepts an ItemsSource and auto resizes. So replacing the two ListViews with ItemControls gets the nested collapsing.

But there is no scrolling, so wrapping the outer ItemControl with a ScrollViewer, reproduces the complete desired effect.

<ScrollViewer VerticalScrollBarVisibility="Auto">
 <ItemsControl>
  <!-- ParameterGroupView -->
  <Border BorderBrush="Brown" BorderThickness="1" CornerRadius="4" Padding="4" Height="Auto">
   <ItemsControl HorizontalContentAlignment="Stretch">

    <Expander Header="Expander A" IsExpanded="False">
     <ItemsControl HorizontalContentAlignment="Stretch">

      <!-- TextView -->
      <TextBlock >Content A</TextBlock>
      <TextBlock >Content B</TextBlock>

     </ItemsControl>
    </Expander>

   </ItemsControl>
  </Border>

 </ItemsControl>
</ScrollViewer>

I was testing with double Expanders in the Border and double Border sections.