Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ListView with nested Expander not collapsing

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

like image 317
Simeon Pilgrim Avatar asked Nov 30 '09 06:11

Simeon Pilgrim


2 Answers

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.

like image 188
Simeon Pilgrim Avatar answered Nov 13 '22 08:11

Simeon Pilgrim


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.

like image 23
MoominTroll Avatar answered Nov 13 '22 07:11

MoominTroll