How to have one control expand/fill up to maxheight, then expand/fill another control in WPF?

Question

I have the following XAML source to demonstrate what I am working on.

I want, when resizing the group vertically, is to have the first groupbox expand, up to its max height, then, when that is reached, expand the third groupbox.The third groupbox has a min height property, as well.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Name="Screen_1_Name"   
    x:Class="TestExpansionScreens.Screen_1"
    Width="400" Height="400">

    <Grid x:Name="LayoutRoot" Background="White" Margin="0,0,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <GroupBox Header="Thing1" Background="LightGreen" Grid.Row="0" Grid.Column="0" MaxHeight="350">
            <Button Content="Stuff1"  />
        </GroupBox>

        <GroupBox Header="Thing2" Background="LightBlue" Grid.Row="1" Grid.Column="0">
            <TextBox Text="Stuff2" Height="60" />
        </GroupBox>

        <GroupBox Header="Thing3" Background="Pink" Grid.Row="2" Grid.Column="0">           
            <TextBox Text="Stuff3"  />          
        </GroupBox>
    </Grid>
</UserControl>

Normally, when I just want a single control expanded to fill the available space, I use a DockPanel. I've built this example with all kinds of assortments of grids and dockpanels, however, I have been unable to resolve how to make it work. Any idea on how to make it happen?

Thanks

Try binding the heights to a converter. http://stackoverflow.com/questions/9083933/gridviewcolumn-width-adjustment/9088071#9088071 — paparazzo, Jan 24 '13 at 22:11

score 1 · Answer 1 · answered Jan 25 '13 at 03:29

You have to set the MaxHeight on your first RowDefinition, not on the GroupBox. The row will grow up to that height and then all excess space will be occupied by the third row. You can also add a MinHeight to the third row.

    <Grid x:Name="LayoutRoot" Background="White" Margin="0,0,0,0">
        <Grid.RowDefinitions>
            <RowDefinition MaxHeight="350" />
            <RowDefinition Height="Auto"/>
            <RowDefinition MinHeight="150" />
        </Grid.RowDefinitions>

        <GroupBox Header="Thing1" Background="LightGreen" Grid.Row="0" Grid.Column="0">
            <Button Content="Stuff1"  />
        </GroupBox>

        <GroupBox Header="Thing2" Background="LightBlue" Grid.Row="1" Grid.Column="0">
            <TextBox Text="Stuff2" Height="60" />
        </GroupBox>

        <GroupBox Header="Thing3" Background="Pink" Grid.Row="2" Grid.Column="0">
            <TextBox Text="Stuff3"  />
        </GroupBox>
    </Grid>

How to have one control expand/fill up to maxheight, then expand/fill another control in WPF?

1 Answers1