.NET MAUI CollectionView窗口大小变化时如何重新触发OnSelectTemplate？

1. 方案的合理性分析 #

你的临时方案在MAUI缺乏VariableSizeWrapGrid替代方案的前提下，是一种可行的折中，但存在几个需要注意的潜在问题：

• 内容语义与UI逻辑耦合：原本只有第10、20项这类特定位置的新闻是大图样式，横竖屏切换后，同一行的普通新闻也会变成大图，可能不符合你原本的内容优先级设计（比如大图对应重要新闻），用户可能会困惑普通新闻突然变大图的逻辑。
• 维护成本偏高：如果后续适配更多列数（比如平板端3列、4列），你需要持续修改DataTemplateSelector中的行判断逻辑，随着列数场景增加，代码会越来越复杂。
• 轻微性能损耗：窗口尺寸变化时需要批量刷新行内项的模板，虽然你的列表只有10-100条，性能影响不大，但频繁横竖屏切换可能会有短暂的界面闪烁。

如果以上问题在你的业务场景中可以接受，这个方案完全可以作为临时过渡方案。

2. 触发CollectionView重新选择模板的实现方法 #

核心思路是让DataTemplateSelector感知列数变化，并通知CollectionView重新计算每个项的模板，无需重置BindingContext或丢失滚动位置：

步骤1：实现带属性通知的自定义DataTemplateSelector #

让选择器实现INotifyPropertyChanged，添加绑定属性跟踪当前列数，列数变化时触发通知：

public class NewsTemplateSelector : DataTemplateSelector, INotifyPropertyChanged
{
    public DataTemplate RegularTemplate { get; set; }
    public DataTemplate BigPhotoTemplate { get; set; }

    private int _currentColumnCount = 1;
    public int CurrentColumnCount
    {
        get => _currentColumnCount;
        set
        {
            if (_currentColumnCount != value)
            {
                _currentColumnCount = value;
                OnPropertyChanged();
            }
        }
    }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var newsItem = item as NewsItem;
        if (newsItem == null) return RegularTemplate;

        // 获取当前项的索引
        var collectionView = container as CollectionView;
        var itemsList = collectionView.ItemsSource.Cast<NewsItem>().ToList();
        var index = itemsList.IndexOf(newsItem);
        
        // 根据列数计算是否属于大图行
        int bigRowInterval = 10;
        int rowIndex = index / CurrentColumnCount;
        bool isInBigRow = (rowIndex + 1) % (bigRowInterval / CurrentColumnCount) == 0;

        return isInBigRow ? BigPhotoTemplate : RegularTemplate;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

步骤2：监听窗口尺寸变化，更新列数和选择器属性 #

在页面代码后台监听SizeChanged事件，动态调整列数并触发模板刷新：

private void OnPageSizeChanged(object sender, EventArgs e)
{
    var collectionView = NewsCollectionView;
    var gridLayout = collectionView.ItemsLayout as GridItemsLayout;
    
    // 根据窗口宽度判断列数（示例逻辑，可按需调整）
    int newColumnCount = Width > 600 ? 2 : 1;
    if (gridLayout.Span == newColumnCount) return;

    gridLayout.Span = newColumnCount;
    var templateSelector = collectionView.ItemTemplate as NewsTemplateSelector;
    templateSelector.CurrentColumnCount = newColumnCount;

    // 触发CollectionView重新计算模板，不会丢失滚动位置
    collectionView.InvalidateItemsView();
}

补充说明 #

• InvalidateItemsView()是MAUI中专门用来刷新ItemsView（包括CollectionView）布局和模板的方法，不会重置滚动位置，比重新赋值ItemsSource更高效。
• 如果你的ItemsSource是ObservableCollection，也可以给每个数据项添加IsInBigRow属性，列数变化时批量更新该属性并触发PropertyChanged，但这种方法需要修改数据模型，灵活性不如修改选择器。

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