如何让Xamarin Forms CollectionView高度自适应内容无需滚动且不硬编码高度

方案：自定义附加属性实现CollectionView高度自适应 #

这是完全符合你要求的实现方式，无需破坏MVVM架构，ViewModel不需要感知任何高度相关逻辑，也不需要硬编码高度值。

第一步：实现CollectionView高度自适应扩展类

using System.Collections;
using System.Collections.Specialized;
using Xamarin.Forms;

public static class CollectionViewExtensions
{
    public static readonly BindableProperty AutoFitHeightProperty =
        BindableProperty.CreateAttached(
            "AutoFitHeight", 
            typeof(bool), 
            typeof(CollectionViewExtensions), 
            false, 
            propertyChanged: OnAutoFitHeightChanged);

    public static bool GetAutoFitHeight(BindableObject view)
    {
        return (bool)view.GetValue(AutoFitHeightProperty);
    }

    public static void SetAutoFitHeight(BindableObject view, bool value)
    {
        view.SetValue(AutoFitHeightProperty, value);
    }

    private static void OnAutoFitHeightChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is not CollectionView cv || !(bool)newValue) 
            return;

        // 禁用CollectionView自身滚动
        cv.ScrollEnabled = false;

        // 监听数据源切换
        cv.PropertyChanged += (s, e) =>
        {
            if (e.PropertyName == nameof(CollectionView.ItemsSource))
            {
                UpdateHeight(cv);
                // 监听集合变化，适配动态增删项/分组
                if (cv.ItemsSource is INotifyCollectionChanged observable)
                {
                    observable.CollectionChanged += (_, __) => UpdateHeight(cv);
                }
            }
        };

        // 初始计算高度
        UpdateHeight(cv);
    }

    private static void UpdateHeight(CollectionView cv)
    {
        if (cv.ItemsSource == null)
        {
            cv.HeightRequest = -1;
            return;
        }

        // 自动从模板读取固定高度，无需硬编码
        var headerHeight = (cv.GroupHeaderTemplate?.CreateContent() as View)?.HeightRequest ?? 0;
        var itemHeight = (cv.ItemTemplate?.CreateContent() as View)?.HeightRequest ?? 0;
        var itemSpacing = (cv.ItemsLayout as LinearItemsLayout)?.ItemSpacing ?? 0;

        int totalElements = 0;
        if (cv.IsGrouped)
        {
            // 统计所有分组头+列表项的总数量
            foreach (var group in cv.ItemsSource as IEnumerable)
            {
                totalElements += 1; // 累加1个分组头
                if (group is ICollection groupItems)
                {
                    totalElements += groupItems.Count; // 累加当前分组的项数
                }
            }
        }
        else
        {
            totalElements = (cv.ItemsSource as ICollection)?.Count ?? 0;
        }

        // 总高度=所有元素高度和 + 所有元素间距和 + 控件自身上下Padding
        var totalHeight = (totalElements - 1) * itemSpacing + headerHeight * (cv.IsGrouped ? (cv.ItemsSource as ICollection)?.Count ?? 0 : 0) + itemHeight * (totalElements - (cv.IsGrouped ? (cv.ItemsSource as ICollection)?.Count ?? 0 : 0));
        totalHeight += cv.Padding.Top + cv.Padding.Bottom;

        cv.HeightRequest = totalHeight;
    }
}

第二步：XAML中调用扩展属性

你原有代码不需要做任何其他修改，只需要加一行附加属性声明即可：

<CollectionView
    IsGrouped="True"
    ItemsSource="{Binding Items}"
    SelectedItems="{Binding SelectedItems}"
    SelectionMode="Multiple"
    local:CollectionViewExtensions.AutoFitHeight="True">
    <!-- 原有ItemsLayout、模板代码完全保留 -->
    <CollectionView.ItemsLayout>
        <LinearItemsLayout
            ItemSpacing="10"
            Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    <CollectionView.GroupHeaderTemplate>
        <DataTemplate>
            <Grid HeightRequest="20" />
        </DataTemplate>
    </CollectionView.GroupHeaderTemplate>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid HeightRequest="90" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

方案说明

• 所有高度值都自动从你定义的DataTemplate、ItemsLayout中读取，后续修改模板高度、间距不需要调整扩展类代码
• 自动适配ObservableCollection类型的数据源，动态增删项、增删分组时高度会自动重新计算
• 完全符合MVVM规范，ViewModel不需要参与任何高度相关逻辑

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