Rectangle in Xamarin forms does not honor the HeightRequest

Question

I am trying to set the HeightRequest of a Rectangle to 10, but the height instead fills the entire height of the Grid. What am I doing wrong or is this a bug in Xamarin Forms. I am using Xamarin.Forms 5.0.0.2012.

<Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <shapes:Rectangle Grid.Row="0" Grid.Column="0"
                                          Fill="Green"

                                          StrokeThickness="0"
                                          WidthRequest="50"
                                          HeightRequest="10"/>

                        <Label Grid.Row="0" Grid.Column="1"
                               Style="{StaticResource Subtitle1TextStyle}"
                               Text="Green area: ideally, your average lines would stay within your target range." />

                        <shapes:Rectangle Grid.Row="1" Grid.Column="0"
                                          Fill="Black"
                                          StrokeThickness="0"
                                          WidthRequest="50"
                                          HeightRequest="10"/>

                        <Label Grid.Row="1" Grid.Column="1"
                               Style="{StaticResource Subtitle1TextStyle}"
                               Text="Black line: The black line has a lot of text on this line. The Rectangle height keeps growing even though the height request has been set to 10." />
</Grid>

Cfun Cfun · Accepted Answer · 2021-03-01T14:33:16

Because you are putting the Label and the black rectangle on the same Row (which have it Height set to Auto), it means it will take the maximum Height of the elements in that Row which in your case is the Label, thus the rectangle will get the same Height as the Label even that you have specified it HeightRequestto be 10.

To overcome this create another Row and span the Label over Row 2 and 3, also notice the new simplified syntax for ColumnDefinition and RowDefinition:

<Grid RowDefinitions="auto,auto,auto" ColumnDefinitions="auto,*">

        <Rectangle Grid.Row="0" Grid.Column="0"
                   Fill="Green"
                   StrokeThickness="0"
                   WidthRequest="50"
                   HeightRequest="10"/>

        <Label Grid.Row="0" Grid.Column="1"
               Text="Green area: ideally, your average lines would stay within your target range."/>

        <Rectangle Grid.Row="1" Grid.Column="0"
                   Fill="Black"
                   VerticalOptions="Fill"
                   StrokeThickness="0"
                   WidthRequest="50"
                   HeightRequest="10"/>

        <Label Grid.Row="1" Grid.Column="1"
               Grid.RowSpan="2"
               TextColor="Black"
               Text="Black line: The black line has a lot of text on this line. The Rectangle height keeps growing even though the height request has been set to 10."/>
</Grid>

Rectangle in Xamarin forms does not honor the HeightRequest

1 Answers