MAUI CollectionView能否实现UWP GridView式自动列调整及动态修改Span？

UWP的GridView自适应表现 #

• 数据源：IEnumerable
• PC端自适应逻辑：窗口宽度为1000时列数为10；宽度为500时自动变为5列

MAUI的CollectionView问题 #

CollectionView通过ItemsLayout的Span属性指定列数，但PC端调整窗口宽度时，项目不会自动重排，且直接修改Span的代码不生效：

private void Button_Clicked(object sender, EventArgs e)
{
    var layout = collectionView.ItemsLayout as GridItemsLayout;
    layout.Span += 2;
}

问题原因及解决方法 #

为什么直接修改Span不生效？ #

GridItemsLayout的Span属性未实现INotifyPropertyChanged，直接修改后无法触发UI布局更新。

解决方式一：MVVM绑定方式 #

1. 在ViewModel中定义带属性变更通知的Span属性：

private int _gridSpan = 2;
public int GridSpan
{
    get => _gridSpan;
    set
    {
        if (_gridSpan != value)
        {
            _gridSpan = value;
            OnPropertyChanged();
        }
    }
}

// 实现INotifyPropertyChanged接口的核心方法
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

2. 在XAML中绑定Span：

<CollectionView x:Name="collectionView">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Span="{Binding GridSpan}" Orientation="Vertical" />
    </CollectionView.ItemsLayout>
</CollectionView>

3. 后续修改GridSpan值即可自动更新布局

解决方式二：后台代码替换ItemsLayout #

直接创建新的GridItemsLayout实例并赋值给CollectionView：

private void Button_Clicked(object sender, EventArgs e)
{
    var currentLayout = collectionView.ItemsLayout as GridItemsLayout;
    if (currentLayout != null)
    {
        collectionView.ItemsLayout = new GridItemsLayout(currentLayout.Span + 2, currentLayout.Orientation);
    }
}

实现窗口宽度自适应调整Span #

监听页面的SizeChanged事件，根据窗口宽度计算合适的Span值：

private void Page_SizeChanged(object sender, EventArgs e)
{
    var page = sender as Page;
    if (page == null) return;
    
    // 根据实际需求调整宽度阈值和Span计算逻辑
    if (page.Width >= 1000)
    {
        collectionView.ItemsLayout = new GridItemsLayout(10, GridItemsLayoutOrientation.Vertical);
    }
    else if (page.Width >= 500)
    {
        collectionView.ItemsLayout = new GridItemsLayout(5, GridItemsLayoutOrientation.Vertical);
    }
    else
    {
        collectionView.ItemsLayout = new GridItemsLayout(2, GridItemsLayoutOrientation.Vertical);
    }
}

记得在XAML的Page标签中添加SizeChanged="Page_SizeChanged"。

内容的提问来源于stack exchange，提问作者大江东去fff