lpx

Hi,

My thread title is a little bit strange but i didnt knew how to describe this problem. I have the following grid with two expanders inside.

I have 2 rows and one expander. They are ocupping the same space, this is, the grid height/2.

But when i collapse an expander, it occupies the same space, but the difference is that the space ocuppied by the listbox is occupied by the expander header! Thats not a cool thing and definitly i dont have a clue on how to do it.

What i really wanted is that the expander could collapse, freeing the space occupied to the control that is there as well.

So, if i collapse and expander, the other will take place of the remaining area.

How can i do this

Code Snippet

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<Expander x:Name="exp1" Width="Auto" Height="Auto" IsExpanded="True" FontWeight="Bold" VerticalAlignment="Stretch" BorderThickness="1,1,1,1" Background="#FFACA899" Grid.IsSharedSizeScope="False" Grid.Column="0" Grid.RowSpan="1" Grid.Row="0">
<Expander.BorderBrush>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlLightColorKey}}"/>
</Expander.BorderBrush>
<ListBox Height="Auto" IsSynchronizedWithCurrentItem="True" x:Name="lbTemplates"/>
</Expander>
<Expander x:Name="exp2" Width="Auto" Height="Auto" IsExpanded="True" FontWeight="Bold" Margin="0,0,0,5" VerticalAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Disabled" Grid.Column="0" Grid.RowSpan="1" Grid.Row="1">
<Expander.Background>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlDarkColorKey}}"/>
</Expander.Background>
<Expander.BorderBrush>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlLightColorKey}}"/>
</Expander.BorderBrush>
<ListBox Height="Auto" IsSynchronizedWithCurrentItem="True" x:Name="lbLayouts" ItemTemplate="{DynamicResource layoutsListBoxDataTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderThickness="1,1,1,1" HorizontalContentAlignment="Center" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Expander>
</Grid>


Thx,

Nuno


Re: Windows Presentation Foundation (WPF) How to really collapse an expander control?

Wei Zhou - MSFT

Hi lpx

We can set the Height of RowDefinition manually to achieve this goal. The following example shows how to do this.

Code Snippet

<Grid>

<Grid.RowDefinitions>

<RowDefinition x:Name="row1" Height="0.5*"/>

<RowDefinition x:Name="row2" Height="0.5*"/>

</Grid.RowDefinitions>

<Expander x:Name="exp1" Width="Auto" Height="Auto"

IsExpanded="True" Margin="2"

VerticalAlignment="Stretch" BorderThickness="1"

BorderBrush="Red" Grid.Row="0"

Collapsed="exp1_Collapsed" Expanded="exp1_Expanded">

<ListBox Height="Auto"/>

</Expander>

<Expander x:Name="exp2" Width="Auto" Height="Auto"

IsExpanded="True" Margin="2"

VerticalAlignment="Stretch" BorderThickness="1"

BorderBrush="Blue" Grid.Row="1"

ScrollViewer.VerticalScrollBarVisibility="Disabled"

Collapsed="exp2_Collapsed" Expanded="exp2_Expanded">

<ListBox Height="Auto" HorizontalContentAlignment="Center"

ItemTemplate="{DynamicResource layoutsListBoxDataTemplate}"

ScrollViewer.HorizontalScrollBarVisibility="Disabled">

<ListBox.ItemsPanel>

<ItemsPanelTemplate>

<WrapPanel />

</ItemsPanelTemplate>

</ListBox.ItemsPanel>

</ListBox>

</Expander>

</Grid>

private void exp1_Collapsed(object sender, RoutedEventArgs e)

{

this.row1.Height = new GridLength(

this.exp1.Margin.Top + this.exp1.Margin.Bottom + 23);

}

private void exp1_Expanded(object sender, RoutedEventArgs e)

{

this.row1.Height = new GridLength(0.5, GridUnitType.Star);

}

private void exp2_Collapsed(object sender, RoutedEventArgs e)

{

this.row2.Height = new GridLength(

this.exp2.Margin.Top + this.exp2.Margin.Bottom + 23);

}

private void exp2_Expanded(object sender, RoutedEventArgs e)

{

this.row2.Height = new GridLength(0.5, GridUnitType.Star);

}

Regards

Wei Zhou






Re: Windows Presentation Foundation (WPF) How to really collapse an expander control?

lpx

thank you very much Wei




Re: Windows Presentation Foundation (WPF) How to really collapse an expander control?

David Cater

Is that really the only way to handle this problem I'm encountering something similar, and using procedural code is really not an option.

I am creating an interface for configuring properties of any arbitrary object. The properties of the object are exposed as an IEnumerable, and the ItemTemplate for each property wraps the interface for the property in an Expander. The effect is that when the user configures an object they see a subdialog pop up that has a list of the named properties of that object as a list of expanders. If the user wants to configure a particular property (or see its value), they click on the expander.

The subdialog (Window) is set to automatically adjust its size based on width and height (SizeToContent=WidthAndHeight). The subdialog looks great at first. It's sized to perfectly fit the ListBox that contains the unexpanded properties. When I expand a property, the ListBox expands to show the expanded property, and the subdialog containing the ListBox expands as well. All of that is good.

When I collapse the Expander, though, the space is not reclaimed. The effect here is that the Apply/Cancel buttons (at the bottom of the dialog) get further and further away from the properties as you expand and collapse different properties. If you expand too many properties at once, the dialog will even get bigger than the height of the screen, making it impossible to see the Apply/Cancel buttons. That's a separate issue that I can fix with a ScrollViewer, but certainly the problem is made worse by the fact that collapsing the Expander isn't making it take up less space than it needed when fully expanded.

Is this a known issue Is it a bug or a feature Are there any other workarounds other than manually resetting the size of the object containing the expander

Thanks,

David Cater