CODEWITHSUNDEEP
xamlmaui
Planeptunia
Planeptunia

Reputation: 13

Why .NET MAUI Grid is not extending vertically

I'm trying to add a Welcome Screen for my App, it consists out of a title label, 2 buttons lined in stack vertically and a frame which would hold recently edited files. Elements are added to grid but for some reason Grid takes only about 50% of available vertical space.

XAML markdown for the UI:

<?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="BXMT.MainPage"
             Shell.NavBarIsVisible="False">

    <VerticalStackLayout Spacing="25">
        <Grid VerticalOptions="FillAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Grid.ColumnSpan="2" Grid.Row="1" 
                Text="Title Label" HorizontalTextAlignment="Center"
                VerticalTextAlignment="Center" Padding="0,20,0,20"
                HorizontalOptions="FillAndExpand" VerticalOptions="Start" />
            <Frame Grid.Row="2" Grid.RowSpan="2"
                BorderColor="LightGray" BackgroundColor="Transparent"
                VerticalOptions="FillAndExpand" Margin="20">
            </Frame>
            <StackLayout Grid.Row="2" Grid.Column="2" Grid.RowSpan="2" 
                Padding="30" Spacing="20"
                Margin="40" VerticalOptions="FillAndExpand">
                <Button Text="Button 1" />
                <Button Text="Button 2" />
            </StackLayout>
        </Grid>
    </VerticalStackLayout>

</ContentPage>

How the Grid ends up looking in Dynamic Preview:

I tried explicitly setting Grid's VerticalOptions to FillAndExpand but it didn't gave any positive results

Upvotes: 0

Views: 160

Answers (1)

Shuowen He-MSFT
Shuowen He-MSFT

Reputation: 692

After my testing, the VerticalStackLayout in the code conflicts with the layout of the Grid.

You can remove the <VerticalStackLayout> and adjust the Rowdefinitions and columndefinitions of the Grid to achieve the desired layout:

<Grid ...>
    <Gird.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
</Gird.RowDefinitions>
...

Upvotes: 0

Related Questions