如何在 xamarin 表单中设置集合视图的自动高度？

Question

我在一个页面中有多个集合视图，所以目前我正在动态计算高度，它不能按预期正常工作，因为内容也是动态的。

那么集合视图将采用自动高度的任何解决方案？

Answer 1

我认为您的页面如下所示：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinWork.MainPage">

    <ScrollView>
        <StackLayout>
            <CollectionView x:Name="Collection"
                     Margin="0,30,0,0"
                     HorizontalOptions="Start"
                     VerticalOptions="Start">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label Text="{Binding .}"
                            LineBreakMode="WordWrap"
                            HorizontalOptions="StartAndExpand"
                            VerticalOptions="FillAndExpand"/>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
            <CollectionView x:Name="Collection2"
                     HorizontalOptions="Start"
                     VerticalOptions="Start">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label Text="{Binding .}"
                            LineBreakMode="WordWrap"
                            HorizontalOptions="StartAndExpand"
                            VerticalOptions="FillAndExpand"/>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
    </ScrollView>
</ContentPage>

您可以创建一个行为来计算每个项目的高度以增加 ContentView 的高度，如下所示：

public class CollectionFitContentBehavior : Behavior<CollectionView>
{
    List<View> _itemsView;
    CollectionView _control;
    protected override void OnAttachedTo(CollectionView bindable)
    {
        base.OnAttachedTo(bindable);
        _control = bindable;
        _control.ChildAdded += ChildsAdded;
        _itemsView = new List<View>();
    }

    protected override void OnDetachingFrom(CollectionView bindable)
    {
        base.OnDetachingFrom(bindable);
        _control.ChildAdded -= ChildsAdded;

        foreach(var item in _itemsView)
            item.SizeChanged -= ChildSize;
    }

    private void ChildsAdded(object sender, ElementEventArgs e)
    {
        var cell = (e.Element as View);
        cell.SizeChanged += ChildSize;
        _itemsView.Add(cell);
    }

    private void ChildSize(object sender, EventArgs e)
    {
        var cell = (sender as View);
        _control.HeightRequest = _control.HeightRequest + cell.Height;
    }
}

并添加如下行为：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:xamarinwork="clr-namespace:XamarinWork"
             x:Class="XamarinWork.MainPage">

    <ScrollView>
        <StackLayout>
            <CollectionView x:Name="Collection"
                     Margin="0,30,0,0"
                     HorizontalOptions="Start"
                     VerticalOptions="Start">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label Text="{Binding .}"
                            LineBreakMode="WordWrap"
                            HorizontalOptions="StartAndExpand"
                            VerticalOptions="FillAndExpand"/>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
                <CollectionView.Behaviors>
                    <xamarinwork:CollectionFitContentBehavior/>
                </CollectionView.Behaviors>
            </CollectionView>
            <CollectionView x:Name="Collection2"
                     HorizontalOptions="Start"
                     VerticalOptions="Start">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label Text="{Binding .}"
                            LineBreakMode="WordWrap"
                            HorizontalOptions="StartAndExpand"
                            VerticalOptions="FillAndExpand"/>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
                <CollectionView.Behaviors>
                    <xamarinwork:CollectionFitContentBehavior/>
                </CollectionView.Behaviors>
            </CollectionView>
        </StackLayout>
    </ScrollView>
</ContentPage>