How to set auto height of collection view in xamarin forms?

Question

I have multiple collection view in a single page,so currently I am calculating height dynamically,its its not working proper as expected because the content is also dynamic.

So any solution that the collection view will take auto height?

Answer 1

I think your page looks something like this:

<?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>

You can create a behavior to calculate the Height of every item to increase the height of ContentView like this:

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;
    }
}

And add the behavior like this:

<?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>