.NET MAUI如何根据屏幕方向设置Popup布局的尺寸请求

针对你遇到的固定宽高在横屏显示不佳的问题，以下是几种实用的动态适配方案：

方案1：绑定动态宽高+监听屏幕方向变化 #

通过在ViewModel中定义动态宽高属性，结合屏幕方向变化事件实时更新值，实现Popup布局自适应。

步骤1：在ViewModel中添加属性 #

假设你的ViewModel继承自ObservableObject（CommunityToolkit.Mvvm）：

using CommunityToolkit.Mvvm.ComponentModel;

namespace OptimizationApp.ViewModels
{
    public partial class CustomPopupViewModel : ObservableObject
    {
        [ObservableProperty]
        private double _popupWidth = 300;

        [ObservableProperty]
        private double _popupHeight = 500;
    }
}

步骤2：在Popup代码后台监听方向变化 #

在CustomPopupContentPage.xaml.cs中添加方向监听逻辑：

using Microsoft.Maui.Devices;

namespace MacroOptimizerApp.Pages.Views.Controls.CustomPicker
{
    public partial class CustomPopupContentPage : CommunityToolkit.Maui.Views.Popup
    {
        private CustomPopupViewModel _viewModel;

        public CustomPopupContentPage(CustomPopupViewModel viewModel)
        {
            InitializeComponent();
            _viewModel = viewModel;
            BindingContext = viewModel;
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
            UpdatePopupSize(DeviceDisplay.MainDisplayInfo.Orientation);
            DeviceDisplay.MainDisplayInfoChanged += OnDisplayInfoChanged;
        }

        protected override void OnDisappearing()
        {
            base.OnDisappearing();
            DeviceDisplay.MainDisplayInfoChanged -= OnDisplayInfoChanged;
        }

        private void OnDisplayInfoChanged(object sender, DisplayInfoChangedEventArgs e)
        {
            UpdatePopupSize(e.DisplayInfo.Orientation);
        }

        private void UpdatePopupSize(DisplayOrientation orientation)
        {
            var density = DeviceDisplay.MainDisplayInfo.Density;
            var screenWidth = DeviceDisplay.MainDisplayInfo.Width / density;
            var screenHeight = DeviceDisplay.MainDisplayInfo.Height / density;

            if (orientation == DisplayOrientation.Landscape)
            {
                // 横屏时设置为屏幕宽80%、高70%
                _viewModel.PopupWidth = screenWidth * 0.8;
                _viewModel.PopupHeight = screenHeight * 0.7;
            }
            else
            {
                // 竖屏恢复原固定值
                _viewModel.PopupWidth = 300;
                _viewModel.PopupHeight = 500;
            }
        }
    }
}

步骤3：在XAML中绑定宽高 #

修改外层Grid的属性：

<Grid RowDefinitions="Auto, *, Auto" Background="White"
      WidthRequest="{Binding PopupWidth}" HeightRequest="{Binding PopupHeight}">

注意：将中间行的Auto改为*，为后续添加的选择控件预留自适应空间。

方案2：纯XAML标记扩展适配 #

无需编写后台代码，直接使用MAUI的OnOrientation和OnIdiom标记扩展，在XAML中根据方向和设备类型设置最大宽高：

<Grid RowDefinitions="Auto, *, Auto" Background="White"
      HorizontalOptions="Center" VerticalOptions="Center"
      MaximumWidthRequest="{OnIdiom 
          Phone={OnOrientation Portrait=300, Landscape=600}, 
          Tablet={OnOrientation Portrait=400, Landscape=700}}"
      MaximumHeightRequest="{OnIdiom 
          Phone={OnOrientation Portrait=500, Landscape=400}, 
          Tablet={OnOrientation Portrait=600, Landscape=500}}">

这种方式让Grid根据内容自动调整大小，但不会超过设定的最大值，兼顾竖屏和横屏的显示效果。

方案3：直接设置Popup的Size属性 #

CommunityToolkit的Popup本身提供Size属性，可直接动态修改Popup的整体大小：

private void UpdatePopupSize(DisplayOrientation orientation)
{
    var density = DeviceDisplay.MainDisplayInfo.Density;
    var screenWidth = DeviceDisplay.MainDisplayInfo.Width / density;
    var screenHeight = DeviceDisplay.MainDisplayInfo.Height / density;

    Size = orientation switch
    {
        DisplayOrientation.Landscape => new Size(screenWidth * 0.8, screenHeight * 0.7),
        _ => new Size(300, 500)
    };
}

此时内部Grid只需设置HorizontalOptions="Fill"和VerticalOptions="Fill"即可填满Popup。

额外优化建议 #

• 后续添加值选择控件时，用ScrollView包裹，避免内容溢出遮挡按钮：

  <ScrollView Grid.Row="1" Margin="0,5,0,5">
      <!-- 这里放置ListView/CollectionView等选择控件 -->
  </ScrollView>
  

• 按钮Grid保持HorizontalOptions="End"，确保在任何方向下都处于右下角可点击位置。

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