Reputation: 53
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.
Upvotes: 2
Views: 1685
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