Grid RowDefinintion fixed Height ignored

1.2k Views Asked by At

I have a simple Grid with two rows, the first having a fixed height. Inside, I have an element with RowSpan="2", and on top another element which should reside only in the first row:

        <Grid Background="Lime">
            <Grid.RowDefinitions>
                <RowDefinition Height="20"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Rectangle Grid.RowSpan="2" Height="50" Fill="Blue"/>

            <TextBlock Grid.Row="0" Text="Foo" VerticalAlignment="Center" Background="Red"/>
        </Grid>

However, the actualheigth of the first row simply ignores the Height setting, beeing much larger than expected.

Is this a bug in the Grid? How can I workaround this?

4

There are 4 best solutions below

0
On

i also tried this a few times, but it won't work. I think it's by design. Can't you just put the rectangle as a parent of the grid in the xaml?

3
On

I think you want something like this:

<Grid Background="Lime">
    <Grid.RowDefinitions>
        <RowDefinition Height="20"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Rectangle Grid.RowSpan="2" Height="50" VerticalAlignment="Center" Fill="Blue"/>
    <TextBlock Grid.Row="0" Text="Foo" VerticalAlignment="Center" Background="Red"/>
</Grid>

I'm not sure if having a RowSpan that covers a RowDefinition with Height="*" would work out.

0
On

It does not seem to work this way Instead, I simply used the VerticalAlignment property to move the TextBlock to the top, and completely removed the RowDefinitions:

        <Grid Background="Lime">
            <Rectangle Height="50" Fill="Blue"/>
            <TextBlock Grid.Row="0" Text="Foo" VerticalAlignment="Top" Background="Red" Height="20"/>
        </Grid>
0
On

In this case you must use VerticalAlignment to stretch in order to fill your RowDefinition's Height.

<Grid Background="Lime">
    <Grid.RowDefinitions>
        <RowDefinition Height="20"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Rectangle Grid.RowSpan="2" Height="50" Fill="Blue"/>

    <TextBlock Name="texto" Grid.Row="0" Text="Foo" VerticalAlignment="Stretch" Background="Red"/>
</Grid>  

On this way you will see your TextBox stretched to the Row height.