How can I make a Xamarin Forms CollectionView size to fit its contents?

Question

I'm using a Xamarin Forms CollectionView to present a grouped list of items. Each item is rendered with a DataTemplate that has a fixed height, and each group header is rendered with another DataTemplate that has a fixed height.

How can I make the CollectionView height big enough to accommodate all of its contents (items, group headers and spaces inbetween) without having to be scrolled, and without hard-coding the height?

Here's my XAML. I've omitted the contents of the grids for brevity.

<CollectionView
    IsGrouped="True"
    ItemsSource="{Binding Items}"
    SelectedItems="{Binding SelectedItems}"
    SelectionMode="Multiple">
    <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>

Note that I can't use BindableLayout or ListView because I need the grouping and multiple selection. I'd also like to do this without breaking the MVVM abstraction, so ideally I don't want anything in the view model to know anything about row heights.

Any help much appreciated.

you will need to calculate the correct height and assign a HeightRequest to the CollectionView — Jason, Oct 29 '21 at 15:36
Does this answer your question? [Xamarin.Forms - Adjusting height of CollectionView to be minimum size to fit children](https://stackoverflow.com/questions/65767461/xamarin-forms-adjusting-height-of-collectionview-to-be-minimum-size-to-fit-chi) — ToolmakerSteve, Oct 30 '21 at 00:43
@ToolmakerSteve thanks for the suggestion. That solution does work, but it breaks the MVVM abstraction by making the view model aware of the row height, which should be a concern of the view layer. I've updated the question to make it clear I'm using MVVM. Ideally I'd like a concern that I can use just at the view layer - like an attached behavior or similar. — Paul, Nov 05 '21 at 09:44
You can put a BindableProperty in your code behind, and specify binding path *for that reference* to the current view class (without touching the BindingContext to VM, so independent of VM). [Here is a good Behavior example (for an email validator)](https://stackoverflow.com/a/69821259/199364). In that, section "Updated", label uses `IsVisible="{Binding Source={x:Reference emailValidator},...` to bind to a property on a local behavior. (If you get this working, add "Your Answer" below showing how - I think this will be helpful to other people.) — ToolmakerSteve, Nov 05 '21 at 20:21

score 0 · Answer 1 · answered Oct 30 '21 at 00:22

0

Wrap it with AbsoluteLayout so you can set Height and Width
by % of screen size or the AbsoluteLayout parent layout size

and then set the HorizontalOption and VerticalOption
of your CollectionView to FillAndExpand

answered Oct 30 '21 at 00:22

cahyo

597
2
5
14

How can I make a Xamarin Forms CollectionView size to fit its contents?

1 Answers1