Grid RowDefinitions heights not working inside of ScrollView

Question

I need to define a grid with proportional heights and widths so I have the following code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PruebaMaui.LoginPage"
             BackgroundImageSource="landscape.png">
    <ScrollView>
        <Grid
            ColumnDefinitions=".05*,.18*,.05*,.18*,.05*,.18*,.05*,.18*,.05*"
            RowDefinitions=".01*,.02*,.03*,.04*,.05*">

            <Button BackgroundColor="Azure" Grid.Column="0" Grid.Row="0"/>
            <Button BackgroundColor="Blue" Grid.Column="0" Grid.Row="1"/>
            <Button BackgroundColor="Red" Grid.Column="0" Grid.Row="2"/>
            <Button BackgroundColor="Yellow" Grid.Column="0" Grid.Row="3"/>
            <Button BackgroundColor="Green" Grid.Column="0" Grid.Row="4"/>

            <Button BackgroundColor="Blue" Grid.Column="1" Grid.Row="0" />
            <Button BackgroundColor="Red" Grid.Column="2" Grid.Row="0" />
            <Button BackgroundColor="Yellow" Grid.Column="3" Grid.Row="0" />
            <Button BackgroundColor="Green" Grid.Column="4" Grid.Row="0" />
            <Button BackgroundColor="Aqua" Grid.Column="5" Grid.Row="0" />
            <Button BackgroundColor="Firebrick" Grid.Column="6" Grid.Row="0" />
            <Button BackgroundColor="DarkGray" Grid.Column="7" Grid.Row="0" />
            <Button BackgroundColor="DeepPink" Grid.Column="8" Grid.Row="0" />
        </Grid>
    </ScrollView>
</ContentPage>

But as soon as I run my app, the columns work but the row heights' don't match my programmed parameters. In fact, they get the total space evenly. The next image shows my problem.

In fact this only works badly compiling for the windows platform. With the android emulator it works fine.

What happens if you remove `.0`s? `RowDefinitions="1*,2*,3*,4*,5*"` — ToolmakerSteve, Sep 26 '22 at 20:07
Please, don't use ".01*,.02*,.03*,.04*,.05*" but prefer "*,2*,.3*,4*,5*" instead ! For your columnDef, x2 all values to have 1 as a start. Having 0.05* add unecessary chars and is less readable — Nk54, Sep 27 '22 at 15:17

score 1 · Answer 1 · answered Sep 27 '22 at 01:46

You need to wrap the Grid with a StackLayout and then also wrap the button with StackLayout. After taking these actions, the height of Grid.RowDefinitions should work.

Here's the xaml code below for your reference:

    <ScrollView>

        <StackLayout>
            <Grid
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"
          
            ColumnDefinitions=".05*,.18*,.05*,.18*,.05*,.18*,.05*,.18*,.05*"
            RowDefinitions=".01*,.02*,.03*,.04*,.05*">

                <StackLayout Grid.Column="0" Grid.Row="0"   >
                    <Button BackgroundColor="Azure" HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>
                </StackLayout>

                <StackLayout Grid.Column="0" Grid.Row="1"   >
                    <Button BackgroundColor="Blue"  HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>
                </StackLayout>

                <StackLayout Grid.Column="0" Grid.Row="2"   >
                    <Button BackgroundColor="Red" HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>
                </StackLayout>



                <StackLayout Grid.Column="0" Grid.Row="3">
                    <Button BackgroundColor="Yellow" HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>
                </StackLayout>


                <StackLayout Grid.Column="0" Grid.Row="4" >
                    <Button BackgroundColor="Green" HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>
                </StackLayout>

                <Button BackgroundColor="Blue" Grid.Column="1" Grid.Row="0" />

                <Button BackgroundColor="Red" Grid.Column="2" Grid.Row="0" />

                <Button BackgroundColor="Yellow" Grid.Column="3" Grid.Row="0" />

                <Button BackgroundColor="Green" Grid.Column="4" Grid.Row="0" />

                <Button BackgroundColor="Aqua" Grid.Column="5" Grid.Row="0" />

                <Button BackgroundColor="Firebrick" Grid.Column="6" Grid.Row="0" />

                <Button BackgroundColor="DarkGray" Grid.Column="7" Grid.Row="0" />

                <Button BackgroundColor="DeepPink" Grid.Column="8" Grid.Row="0" />

            </Grid>

        </StackLayout>
    </ScrollView>

Good answer. I overlooked the surrounding `ScrollView`. There is a bug in Maui (and X-Forms) layout in the situation shown in original XAML. When layout begins, the height of "content" for ScrollView is not known. The logic for assigning heights to Grid rows doesn't behave correctly in this case. In the answer's XAML, there are two changes improving the layout behavior: 1) `VerticalOptions="FillAndExpand"`. 2) wrapping in `StackLayout`. — ToolmakerSteve, Sep 27 '22 at 23:14
Good catch! This could be a potential issue, I would suggest raising [an new issue](https://github.com/dotnet/maui/issues/new/choose) in Github if this hasn't been addressed before. — Alexandar May - MSFT, Sep 28 '22 at 07:44

Grid RowDefinitions heights not working inside of ScrollView

1 Answers1