WPF Grid layout panel with row height set to "Auto"

26,460

Solution 1

Try setting the middle row to this...

<RowDefinition Height="*" /> 

Solution 2

Replace the middle

<RowDefinition Height="Auto" />

with

<RowDefinition Height="*" />
Share:
26,460
Nate
Author by

Nate

I'm a developer with broad experience and a curious disposition. I like learning about and creating new things.

Updated on July 09, 2022

Comments

  • Nate
    Nate almost 2 years

    I'd like to have a Grid with a row on the top and bottom with either labels or buttons in them. In the middle I plan on using a ListBox. I want the ListBox to expand to use all the available space. It would be nice to not hard code the height of the other two rows. My XAML is below. How can I make the middle section expand automatically? Thanks.

    <UserControl x:Class="WpfApplication1.UserControl1"
             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" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
    
        <Label Grid.Row="0"
               Grid.ColumnSpan="3"
               Content="Top Row" />
    
        <ListBox Grid.Row="1"
                 Grid.ColumnSpan="3" />
    
        <Label Grid.Row="2"
               Grid.ColumnSpan="3"
               Content="Bottom Row" />
    </Grid>
    

  • Nate
    Nate almost 14 years
    Thanks a bunch. Very helpful.
  • Berryl
    Berryl almost 14 years
    @Nate. "" shortcuts are even more sophisticated than this. You don't need anything more in this example, but if you had a complex grid where you needed multiple rows or columns to expand in different proportions you might have "2" for one and "5*" for another. If you left them both at "" (which is a shortcut way of saying 1) then the two rows would divide the expanded space between themselves equally. Cheers
  • Nate
    Nate almost 14 years
    Thanks Berryl. That's very interesting.