CODEWITHSUNDEEP
maui
Konrad
Konrad

Reputation: 11

MAUI - How to make a grid to fill the entire screen after rotating the grid?

I have app that is using portrait orientation only. But I have page that need to be showed in landscaped orientation. I ddidn't change screen orientation but only rotated main grid. By default grid keeps original size, so it is a problem because height is much bigger that width. I'm wondering how can I property set Width and Height for this grid to use whole screen of device.

Now I'm using hardcoded numeric values. It looks pretty ok on my phone, but it is worse on other devices.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelpMeHum.Maui.Pages.GamePages.PlayPage"
             NavigationPage.HasNavigationBar="false"
             Shell.NavBarIsVisible="false">

    <Grid Rotation="90" x:Name="Grid"
        Margin="15,15,15,15"
        RowSpacing="5"
        WidthRequest="750" HeightRequest="350">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>

        <Label
            x:Name="FirstLabel"
            FontSize="64"
            HorizontalTextAlignment="Center"
            VerticalTextAlignment="End"
            Grid.Row="0" />

        <Label
            x:Name="SecondLabel"
            FontSize="40"
            HorizontalTextAlignment="Center"
            VerticalTextAlignment="Start"
            Grid.Row="1" />
    </Grid>
</ContentPage>

Labels text is changed in runtime (it is changed multiple times). In future I also want to add some buttons in left bottom corner, but I still want to have first label on top half of screen and second on bottom half.

Upvotes: 0

Views: 1305

Answers (2)

Peter Wessberg
Peter Wessberg

Reputation: 1921

If you want to rotate the grid you need to set the height to 0, rotate and then set it to the width of the device. Try and see if this solves your problem.

This is an example of what I mean:

private void RotateGrid()
{
    var screenWidth = DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density;

    var targetRotation = MyGrid.Rotation == 0 ? 90 : 0;

    if (targetRotation == 90)
    {
        MyGrid.HeightRequest = 0;
        MyGrid.RotateTo(targetRotation, 250, Easing.CubicInOut);
        MyGrid.HeightRequest = screenWidth;
    }
    else
    {
        MyGrid.RotateTo(targetRotation, 250, Easing.CubicInOut);
    }
}

Upvotes: 0

Liqun Shen-MSFT
Liqun Shen-MSFT

Reputation: 8220

You may refer to Customize UI appearance based on the platform and device idiom. It can help to customize UI on different device. For example:

 <Grid  x:Name="Grid" BackgroundColor="Yellow"
     WidthRequest="{OnIdiom Phone=750,Tablet=850,Desktop=950}"
     ...>

Hope it helps!

Upvotes: 0

Related Questions