gridmauilandscape

MAUI landscape mode grid issues

I'm trying to get a grid to keep an aspect ratio of 2:1 in terms of height and width. I'm forcing landscape mode and have the following grid setup:

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:game="clr-namespace:MyApp_Mobile"
         x:Class="MyApp.MainPage"
         x:Name="contentMain"
         x:DataType="thisapp:MainPageViewModel" IconImageSource="app_icon.png"
         LayoutChanged="ContentPage_LayoutChanged" Appearing="contentMain_Appearing" Shell.NavBarIsVisible="False">

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="80" />
        <ColumnDefinition Width="80"/>
        <ColumnDefinition Width="80"/>
        <ColumnDefinition Width="80"/>
        <ColumnDefinition Width="80"/>
        <ColumnDefinition Width="80"/>
        <ColumnDefinition Width="50"/>

    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="80"/>
        <RowDefinition Height="80"/>
        <RowDefinition Height="80"/>

    </Grid.RowDefinitions>
    <Grid x:Name="gridLayoutBox" BackgroundColor="{Binding boxColour}"  IsClippedToBounds="True" Grid.ColumnSpan="6">

    </Grid>

Sadly it doesn't work as expected and doesn't seem to start in column 0. It also doesn't adhere to the column and row dimensions:

6 columns and 3 rows

I want that blue rectangle to be twice the width of it's height - and begin in the upper left corner. I've tried switching to 6 rows and 3 columns, but I get a similar issue:

6 rows and 3 columns

Can anyone tell me what I'm doing incorrectly as I never had this issue in Xamarin?

Thanks,

Mike

EDIT

so making the change suggested initially fixed it, but once I started adding in controls to the last column I get the following display:

 <Grid>
    <Grid >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="80" />
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="80"/>
            <RowDefinition Height="80"/>
            <RowDefinition Height="80"/>
        </Grid.RowDefinitions>
        <Grid x:Name="gridLayoutBox" 
          BackgroundColor="{Binding boxColour}"  
          IsClippedToBounds="True" 
          Grid.ColumnSpan="6" 
          Grid.RowSpan="3" >

        </Grid>
    </Grid>
    <ListView x:Name="listviewPlayers" HorizontalOptions="End" ItemsSource="{Binding Players}" HeightRequest="700" VerticalOptions="EndAndExpand" RowHeight="15" SeparatorColor="Black" Grid.Column="6" Grid.RowSpan="3" >
        <ListView.Header>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="2" Text ="Games" TextColor="Black"></Label>
                <Label Grid.Column="1" Text ="Score" TextColor="Black"></Label>
                <Label Grid.Column="0" Text ="Name" TextColor="Black"></Label>
            </Grid>
        </ListView.Header>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="game:Player">
                <ViewCell>
                    <Grid HeightRequest="25">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding Name}" FontAttributes="Bold" FontSize="10" TextColor="Black">

                        </Label>
                        <Label Grid.Column="1" Text="{Binding CurrentScore}" FontSize="10" HorizontalTextAlignment="Center" TextColor="Black">

                        </Label>
                        <Label Grid.Column="2" Text="{Binding GamesWon}" HorizontalTextAlignment="Center" FontSize="10" TextColor="Black">
                        </Label>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

enter image description here

Then removing the controls in hot reload doesn't revert to the original, correctly placed gridbox??

I ported this directly from Xamarin, and it all worked fine.

It seems to be the listview that breaks things.

Solution

  • I copied your code and just add Grid.RowSpan="3" for the grid. And then I get the effect you want without LayoutChanged and Appearing.

    The full xaml:

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp7.MainPage" Shell.NavBarIsVisible="False">

    <Grid BackgroundColor="Pink">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="80" />
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="80"/>
            <RowDefinition Height="80"/>
            <RowDefinition Height="80"/>
        </Grid.RowDefinitions>
        <Grid x:Name="gridLayoutBox" 
              BackgroundColor="Blue"  
              IsClippedToBounds="True" 
              Grid.ColumnSpan="6" 
              Grid.RowSpan="3" >

        </Grid>
    </Grid>
</ContentPage>

    And the result image:

    enter image description here

    In addition, if you want to force landscape, you can all the following code in the Page's OnHandlerChanged method or OnAppearing method.

    #if ANDROID
Microsoft.Maui.ApplicationModel.Platform.CurrentActivity.RequestedOrientation = Android.Content.PM.ScreenOrientation.Landscape;
#endif

    And in the Portrait mode, the blue grid will be cut off beacause its width is bigger than the screen's width.