.NET MAUI：根据可用宽度计算CollectionView网格列数

你的核心问题在于依赖设备屏幕宽度计算列数，而桌面端窗口缩放时，这个值不会更新，也无法反映CollectionView实际可用的宽度。下面提供两种可行的解决方案，让列数随容器宽度动态调整：

方案一：后台代码监听控件尺寸变化 #

这种方式简单直接，适合快速实现：

1. 修改ViewModel，支持动态更新列数 #

确保ViewModel实现INotifyPropertyChanged接口，将列数改为可绑定属性：

public class YourViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private int _numHorizontalViewMenuItems;
    public int NumHorizontalViewMenuItems
    {
        get => _numHorizontalViewMenuItems;
        set
        {
            _numHorizontalViewMenuItems = value;
            OnPropertyChanged(nameof(NumHorizontalViewMenuItems));
        }
    }

    private const int MenuItemMinWidth = 120;

    public void UpdateHorizontalViewMenuItems(double availableWidth, double horizontalSpacing)
    {
        if (availableWidth <= 0)
        {
            NumHorizontalViewMenuItems = 1;
            return;
        }
        // 考虑列间距的精确计算：Span*(ItemWidth + Spacing) - Spacing ≤ 可用宽度
        NumHorizontalViewMenuItems = (int)Math.Floor((availableWidth + horizontalSpacing) / (MenuItemMinWidth + horizontalSpacing));
        NumHorizontalViewMenuItems = Math.Max(NumHorizontalViewMenuItems, 1);
    }

    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 在页面后台监听CollectionView尺寸变化 #

在XAML对应的.cs文件中，监听SizeChanged事件并触发列数更新：

public partial class YourPage : ContentPage
{
    private YourViewModel _viewModel;
    private GridItemsLayout _gridLayout;

    public YourPage()
    {
        InitializeComponent();
        _viewModel = (YourViewModel)BindingContext;
        _gridLayout = clvMenuItems.ItemsLayout as GridItemsLayout;
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        // 初始加载时计算一次列数
        UpdateSpan();
    }

    private void clvMenuItems_SizeChanged(object sender, EventArgs e)
    {
        UpdateSpan();
    }

    private void UpdateSpan()
    {
        if (_gridLayout == null) return;
        _viewModel.UpdateHorizontalViewMenuItems(clvMenuItems.ActualWidth, _gridLayout.HorizontalItemSpacing);
    }
}

3. XAML中绑定事件 #

给CollectionView添加SizeChanged事件绑定：

<CollectionView ItemsSource="{Binding MenuItems}"
                x:Name="clvMenuItems"
                SizeChanged="clvMenuItems_SizeChanged">
    <CollectionView.ItemsLayout>
        <GridItemsLayout 
            Orientation="Vertical"
            Span="{Binding NumHorizontalViewMenuItems}"
            VerticalItemSpacing="4"
            HorizontalItemSpacing="4" />
    </CollectionView.ItemsLayout>
    <!-- 原ItemTemplate内容保持不变 -->
</CollectionView>

方案二：使用Behavior封装可复用逻辑 #

如果需要在多个页面复用这个功能，可以封装成Behavior：

1. 创建CollectionViewSpanBehavior #

public class CollectionViewSpanBehavior : Behavior<CollectionView>
{
    public static readonly BindableProperty SpanProperty =
        BindableProperty.Create(nameof(Span), typeof(int), typeof(CollectionViewSpanBehavior), 1);

    public static readonly BindableProperty ItemMinWidthProperty =
        BindableProperty.Create(nameof(ItemMinWidth), typeof(double), typeof(CollectionViewSpanBehavior), 120.0);

    public int Span
    {
        get => (int)GetValue(SpanProperty);
        set => SetValue(SpanProperty, value);
    }

    public double ItemMinWidth
    {
        get => (double)GetValue(ItemMinWidthProperty);
        set => SetValue(ItemMinWidthProperty, value);
    }

    protected override void OnAttachedTo(CollectionView bindable)
    {
        base.OnAttachedTo(bindable);
        bindable.SizeChanged += OnCollectionViewSizeChanged;
        UpdateSpan(bindable);
    }

    protected override void OnDetachingFrom(CollectionView bindable)
    {
        base.OnDetachingFrom(bindable);
        bindable.SizeChanged -= OnCollectionViewSizeChanged;
    }

    private void OnCollectionViewSizeChanged(object sender, EventArgs e)
    {
        if (sender is CollectionView cv)
        {
            UpdateSpan(cv);
        }
    }

    private void UpdateSpan(CollectionView cv)
    {
        if (cv.ActualWidth <= 0)
        {
            Span = 1;
            return;
        }

        var gridLayout = cv.ItemsLayout as GridItemsLayout;
        if (gridLayout == null) return;

        double spacing = gridLayout.HorizontalItemSpacing;
        Span = (int)Math.Floor((cv.ActualWidth + spacing) / (ItemMinWidth + spacing));
        Span = Math.Max(Span, 1);
    }
}

2. XAML中使用Behavior #

<CollectionView ItemsSource="{Binding MenuItems}"
                x:Name="clvMenuItems">
    <CollectionView.Behaviors>
        <local:CollectionViewSpanBehavior 
            ItemMinWidth="120"
            Span="{Binding NumHorizontalViewMenuItems, Mode=TwoWay}" />
    </CollectionView.Behaviors>
    <CollectionView.ItemsLayout>
        <GridItemsLayout 
            Orientation="Vertical"
            Span="{Binding NumHorizontalViewMenuItems}"
            VerticalItemSpacing="4"
            HorizontalItemSpacing="4" />
    </CollectionView.ItemsLayout>
    <!-- 原ItemTemplate内容保持不变 -->
</CollectionView>

两种方案都能实现窗口缩放时动态调整列数，核心是监听CollectionView的实际可用宽度变化，而非依赖固定的设备屏幕宽度。

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