Xamarin.Forms - Adjusting height of CollectionView to be minimum size to fit children

Question

I have a CollectionView with a few items in it. I'm trying to adjust the size of the CollectionView to be just big enough to fit all of its children. Right now, it's much larger than the amount of children it has.

The Blue color represents the size of the CollectionView. As you can see, it's well beyond the size of it's children. I'd like it to fit them perfectly, or at the very least be closer to the same size.

I don't have any height requests on any of the elements on the page, including the CollectionView.

Here's my code. It's not particularly pretty at the moment, but it's a work in progress.

<StackLayout>
                <CollectionView x:Name="assessmentsCollectionView"
                                BackgroundColor="Blue">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout Spacing="10"
                                         Padding="5">
                                <Frame CornerRadius="5"
                                       Padding="0"
                                       HorizontalOptions="FillAndExpand"
                                       VerticalOptions="FillAndExpand">
                                    <StackLayout Orientation="Horizontal">
                                        <Frame Padding="5"
                                               CornerRadius="0"
                                               WidthRequest="50">
                                            <Label Text="{Binding TypeLetter}"
                                                   TextColor="#37474f"
                                                   FontSize="24"
                                                   VerticalTextAlignment="Center"
                                                   HorizontalTextAlignment="Center"/>
                                        </Frame>
                                        <StackLayout Padding="10">
                                            <Label Text="{Binding Name}"
                                               TextColor="Black"
                                               FontSize="24"/>
                                            <StackLayout Orientation="Horizontal">
                                                <Image Source="calendarIcon.png"
                                                       WidthRequest="12"
                                                       HeightRequest="12"/>
                                                <Label Text="{Binding Date}"
                                                       FontSize="12"
                                                       TextColor="Gray"/>
                                            </StackLayout>
                                        </StackLayout>
                                    </StackLayout>
                                </Frame>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>

score 19 · Answer 1 · answered Nov 30 '21 at 10:13

I changed CollectionView to FlexLayout with BindableLayout.ItemsSource and BindableLayout.ItemTemplate What was previously

<CollectionView.ItemTemplate>
                    <DataTemplate>
                        ...
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

What was done

 <FlexLayout Direction="Column"
                         x:Name="MessagesList"
                         AutomationId="MessagesList"
                         BindableLayout.ItemsSource="{Binding Messages}" >
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            ...
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </FlexLayout>

For me works well, no need to set Height for item or FlexLayout, all are dynamic

Love this... good solution – SerenityNow Feb 28 '22 at 21:34 — SerenityNow, Feb 28 '22 at 21:34
This should be the accepted answear! – bazsisz Sep 14 '22 at 08:27 — bazsisz, Sep 14 '22 at 08:27

score 8 · Accepted Answer · answered Jan 18 '21 at 02:04

If you have little rows in Collectionview, you can set a value to collectionView.HeightRequest. when item increase, the height will increase as well.

I create a property called.RowHeigth. If I add item in the CollectionView(with AddCommand), RowHeigth will increase.

<StackLayout>
        <CollectionView
            x:Name="assessmentsCollectionView"
            BackgroundColor="Blue"
            HeightRequest="{Binding rowHeigth}"
            ItemsSource="{Binding letters}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Padding="5" Spacing="10">
                        <Frame
                            Padding="0"
                            CornerRadius="5"
                            HorizontalOptions="FillAndExpand"
                            VerticalOptions="FillAndExpand">
                            <StackLayout Orientation="Horizontal">
                                <Frame
                                    Padding="5"
                                    CornerRadius="0"
                                    WidthRequest="50">
                                    <Label
                                        FontSize="24"
                                        HorizontalTextAlignment="Center"
                                        Text="{Binding TypeLetter}"
                                        TextColor="#37474f"
                                        VerticalTextAlignment="Center" />
                                </Frame>
                                <StackLayout Padding="10">
                                    <Label
                                        FontSize="24"
                                        Text="{Binding Name}"
                                        TextColor="Black" />
                                    <StackLayout Orientation="Horizontal">
                                        <Image
                                            HeightRequest="12"
                                            Source="c1.png"
                                            WidthRequest="12" />
                                        <Label
                                            FontSize="12"
                                            Text="{Binding Date}"
                                            TextColor="Gray" />
                                    </StackLayout>
                                </StackLayout>
                            </StackLayout>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <Button
            x:Name="btn1"
            Command="{Binding AddCommand}"
            Text="btn1" />
    </StackLayout>

 public partial class Page4 : ContentPage
{
    
    public Page4()
    {
        InitializeComponent();

        this.BindingContext = new letterviewmodel(); ;
    }
}
public class letterviewmodel: INotifyPropertyChanged
{
    public ObservableCollection<lettermodel> letters { get; set; }
    private int _rowHeigth;
    public int rowHeigth
    {
        get { return _rowHeigth; }
        set
        {
            _rowHeigth = value;
            RaisePropertyChanged("rowHeigth");
        }
    }
    public ICommand AddCommand { protected set; get; }
    public letterviewmodel()
    {
        letters = new ObservableCollection<lettermodel>()
        {
            new lettermodel(){TypeLetter="A",Name="letter 1",Date="2021-01-01"},
            new lettermodel(){TypeLetter="B",Name="letter 2",Date="2021-01-01"},
            new lettermodel(){TypeLetter="C",Name="letter 3",Date="2021-01-01"}

        };
        rowHeigth = letters.Count * 100 ;

        AddCommand = new Command<lettermodel>(async (key) => {
            letters.Add(new lettermodel() { TypeLetter = "D", Name = "test letter ", Date = "2021-01-01" });
            rowHeigth = letters.Count * 100 ;
        });
    }
    
    public event PropertyChangedEventHandler PropertyChanged;       
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
public class lettermodel
{
    public string TypeLetter { get; set; }
    public string Name { get; set; }
    public string Date { get; set; }
}

Don't forget toimplement INotifyPropertyChanged interface, to inotify data update.

That's a smart way of doing it. I would love it if there was some sort of property that would simply make a parent objects height and/or width fit its content exactly, but that doesn't seem to exist. — Knight Steele, Jan 18 '21 at 03:40
@KnightSteele - [issue with discussion here](https://github.com/xamarin/Xamarin.Forms/issues/6554). — ToolmakerSteve, Oct 30 '21 at 00:42

Xamarin.Forms - Adjusting height of CollectionView to be minimum size to fit children

2 Answers2

Linked