1

Given the XAML below, is it possible to make an adjustment so that when either of the Expander items are expanded, the TextBlock content stretches vertically to fill the remaining space? (Note that this XAML is purposely simplified, the solution must satisfy this simple example and any data bound ItemsSource scenario).

The StackPanel itself stretches to fill the space (since it is contained within a Grid), so I assume there is a conflict within the StackPanel measuring code that does not allow infinitely large content elements. I'm not even sure if this is possible to resolve elegantly, it may just require manually overriding the measuring code and determining the optimal expanded height for the content container.

<Grid>
    <StackPanel>
        <Expander Header="Item 1">
            <TextBlock Background="LightCoral" Text="Content 1 should be stretched vertically when expanded"/>
        </Expander>
        <Expander Header="Item 2">
            <TextBlock Background="LightBlue" Text="Content 2 should be stretched vertically when expanded"/>
        </Expander>
    </StackPanel>
</Grid>

NOTE: I read through How to get StackPanel's children to fill maximum space downward? and it is not really related to this question as the solution to that post is to use a DockPanel which is not possible in a data bound ItemsSource scenario.

Community
  • 1
  • 1
pjs
  • 2,601
  • 1
  • 20
  • 24
  • I don't think this is actually a (trivially) solvable problem. Since the height constraints are not mutually exclusive. Basically you would need to re-layout all expanders in the stackpanel if any expander were to change its IsExpanded state. – pjs Jul 19 '15 at 19:14

1 Answers1

0

StackPanel sets the Content Height to auto even if it is placed inside a Grid control. 'Grid' should be used in place of StackPanel and then set Row height from code behind. Here is an example;

       <Grid>

            <Grid.RowDefinitions>
                <RowDefinition x:Name="row1" Height="auto"/>
                <RowDefinition x:Name="row2" Height="auto"/>
            </Grid.RowDefinitions>
            <Expander Header="Item 1"  Expanded="Expander_Expanded_1" VerticalAlignment="Stretch" >               
                    <TextBlock Background="LightCoral" Text="Content 1 should be stretched vertically when expanded" VerticalAlignment="Stretch"/>              
            </Expander>
            <Expander Header="Item 2" Grid.Row="1" Expanded="Expander_Expanded_2" VerticalAlignment="Stretch" >               
                    <TextBlock Background="LightBlue" Text="Content 2 should be stretched vertically when expanded" VerticalAlignment="Stretch"/>             
            </Expander>

        </Grid>

And in the code behind you can set the height of the row on expanded event

private void Expander_Expanded_1(object sender, RoutedEventArgs e)
        {
            ex2.Height = new GridLength(1, GridUnitType.Auto);
            ex1.Height = new GridLength(1, GridUnitType.Star);
        }
  • Unfortunately, this doesn't answer the question properly, since this is not a viable solution in a data bound ItemsSource scenario. – pjs Jul 10 '15 at 16:56