.NET MAUI中Code-Behind实例化Popup的布局异常问题

1. 修正ItemTemplate的布局结构 #

先确保CollectionView的ItemTemplate使用正确的网格列定义，这是实现“第一列拉伸、第二列自适应”的基础：

<CollectionView.ItemTemplate>
    <DataTemplate>
        <Grid ColumnDefinitions="*, Auto">
            <!-- 第一列：占满剩余空间 -->
            <Label Grid.Column="0" Text="{Binding Content}" LineBreakMode="WordWrap"/>
            <!-- 第二列：根据日期内容自适应宽度 -->
            <Label Grid.Column="1" Text="{Binding Date}" Margin="10,0,0,0"/>
        </Grid>
    </DataTemplate>
</CollectionView.ItemTemplate>

核心是ColumnDefinitions="*, Auto"的配置，明确两列的尺寸规则。

2. 延迟触发布局刷新 #

在Popup的OnAppearing事件中延迟执行布局更新，避免Popup未完成尺寸计算时就渲染CollectionView：

protected override void OnAppearing()
{
    base.OnAppearing();
    // 延迟100ms确保Popup尺寸已确定
    Dispatcher.DispatchDelayed(TimeSpan.FromMilliseconds(100), () =>
    {
        MyCollectionView.InvalidateLayout();
        MyCollectionView.ForceLayout();
    });
}

3. 监听Popup尺寸变化并强制重绘 #

因为Popup会随横竖屏调整尺寸，在SizeChanged事件中同步刷新CollectionView布局：

public CustomPopup()
{
    InitializeComponent();
    SizeChanged += (s, e) =>
    {
        MyCollectionView.InvalidateLayout();
        MyCollectionView.ForceLayout();
    };
}

先调用InvalidateLayout()标记布局无效，再用ForceLayout()触发重计算，比单独调用后者更有效。

4. 调整Popup尺寸的设置时机 #

不要在Popup构造函数中直接设置尺寸，改在OnAppearing中根据当前屏幕方向计算，确保尺寸生效后再渲染内部控件：

protected override void OnAppearing()
{
    base.OnAppearing();
    var displayInfo = DeviceDisplay.Current.MainDisplayInfo;
    var screenWidth = displayInfo.Width / displayInfo.Density;
    var screenHeight = displayInfo.Height / displayInfo.Density;

    WidthRequest = displayInfo.Orientation == DisplayOrientation.Landscape 
        ? screenWidth * 0.8 
        : screenWidth * 0.9;
    HeightRequest = displayInfo.Orientation == DisplayOrientation.Landscape 
        ? screenHeight * 0.6 
        : screenHeight * 0.7;

    // 刷新自身及CollectionView布局
    InvalidateLayout();
    MyCollectionView.InvalidateLayout();
}

5. 临时禁用虚拟化（小数据量场景） #

如果上述方案无效，可临时关闭CollectionView的虚拟化，避免布局复用导致的异常（注意：大量数据时会影响性能）：

<CollectionView ItemsSource="{Binding Items}" 
                ItemsLayout="VerticalList"
                IsVirtualizing="False">
    <!-- ItemTemplate 定义 -->
</CollectionView>

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