Dynamically expanding Grid also expands fixed height Rows and Columns

Question

I have a dynamically expanding Grid inside another Grid which is separated onto 4 rows and 4 columns.

My main content grid spans 4 rows and 2 columns and dynamically loads different Views, and sometimes expands in height. My problem is, the other rows are also expanded although they have a fixed height, which makes the layout appear weird.

I want to keep all the rows' heights to 36, but just expand the lowest row so all content of my grid is shown.

<Grid HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="45" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="70" />
        <ColumnDefinition Width="110" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="36" />
        <RowDefinition Height="36" />
        <RowDefinition Height="36" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Button Grid.Row="0" Grid.Column="0"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            FontSize="14"
            Content="X">
    </Button>

    <Grid x:Name="MainPaymentContentRoot"
              Grid.Row="0" 
              Grid.RowSpan="4"
              Grid.Column="1" 
              Grid.ColumnSpan="2"
              Margin="20,0,0,0"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch"
              ScrollViewer.VerticalScrollBarVisibility="Auto"
              ScrollViewer.VerticalScrollMode="Auto">
    </Grid>

    <TextBlock Text="MyField" Grid.Row="0" Grid.Column="3" Margin="10,0,0,0" VerticalAlignment="Center" />
    <Button Grid.Row="1" Grid.Column="3" Margin="10,0,0,0"
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="Right"
            Content="AnotherButton">
    </Button>

</Grid>

This is for a Win 8 Development.

Answer 1

Currently, your RowDefinition is set to Auto. This means that the row will calculate the content size, and adjust it's height accordingly.

You need to change it to Height="*".

<RowDefinition Height="*" />

This will force the RowDefinition to expand to the height of the parent. In other words, it will take up all available space.