pablo ramos
pablo ramos

Reputation: 53

Grid RowDefinitions heights not working inside of ScrollView

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.

image

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

Upvotes: 2

Views: 1685

Answers (1)

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10058

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>

Upvotes: 2

Related Questions