MAUI中旋转Grid后如何设置使其铺满整个设备屏幕？

要解决旋转后Grid无法铺满屏幕的问题，核心是动态匹配设备竖屏状态下的屏幕尺寸，避免硬编码数值。以下是两种可行方案：

方案一：后台代码动态设置Grid尺寸 #

移除XAML中硬编码的WidthRequest和HeightRequest，通过代码获取设备屏幕的逻辑尺寸，旋转后Grid的宽度应等于竖屏时的屏幕高度，高度等于竖屏时的屏幕宽度，再减去Margin的总边距：

1. 修改XAML #

<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="MainGrid"
          Margin="15,15,15,15"
          RowSpacing="5">

        <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>

2. 后台代码实现 #

在页面的OnAppearing方法中计算并设置Grid尺寸：

protected override void OnAppearing()
{
    base.OnAppearing();
    var displayInfo = DeviceDisplay.MainDisplayInfo;
    // 转换为逻辑像素（适配不同屏幕密度）
    double screenLogicalWidth = displayInfo.Width / displayInfo.Density;
    double screenLogicalHeight = displayInfo.Height / displayInfo.Density;

    // 旋转后，Grid宽度取竖屏高度（减去上下Margin总和），高度取竖屏宽度（减去左右Margin总和）
    MainGrid.WidthRequest = screenLogicalHeight - MainGrid.Margin.Top - MainGrid.Margin.Bottom;
    MainGrid.HeightRequest = screenLogicalWidth - MainGrid.Margin.Left - MainGrid.Margin.Right;
}

方案二：使用RelativeLayout自动适配 #

通过RelativeLayout绑定Grid的尺寸到父容器的高度/宽度，同时调整旋转后的居中位置，无需后台代码：

<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">

    <RelativeLayout HorizontalOptions="Fill" VerticalOptions="Fill">
        <Grid Rotation="90" x:Name="MainGrid"
              Margin="15,15,15,15"
              RowSpacing="5"
              <!-- 宽度绑定父容器高度，减去Margin上下总和（15*2=30） -->
              RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-30}"
              <!-- 高度绑定父容器宽度，减去Margin左右总和（15*2=30） -->
              RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-30}"
              <!-- 让Grid中心与父容器中心重合，保证旋转后居中显示 -->
              RelativeLayout.CenterXConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5}"
              RelativeLayout.CenterYConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.5}">

            <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的Row=1、Column=0，设置对齐方式 -->
            <Button 
                Grid.Row="1"
                HorizontalOptions="Start"
                VerticalOptions="End"
                Text="示例按钮"/>
        </Grid>
    </RelativeLayout>
</ContentPage>

注意事项 #

• 若后续添加按钮，由于Grid整体旋转90度，按钮的HorizontalOptions和VerticalOptions需基于旋转后的布局逻辑设置（比如要实现横屏左下角，对应Grid的Row=1、HorizontalOptions=Start、VerticalOptions=End）。
• 两种方案都适配不同设备的屏幕尺寸，无需硬编码数值，能保证在各类设备上铺满屏幕。

内容的提问来源于stack exchange，提问作者Konrad