Automatic Sizing For CollectionView

Nathan Sokalski 4,116

I have several CollectionView(s) which I want to be automatically sized to the height of their items (the CollectionView(s) are horizontal). However, they are instead using the full height. Here is the code for my CollectionView:

<CollectionView x:Name="itmPlayerNames" Grid.Column="1" Grid.Row="0" BackgroundColor="Blue" HorizontalOptions="Start" VerticalOptions="Start" HorizontalScrollBarVisibility="Never" VerticalScrollBarVisibility="Never">
<CollectionView.ItemsSource>
<x:Array Type="{x:Type system:String}">
<system:String>Player One</system:String>
<system:String>Player Two</system:String>
<system:String>Player Three</system:String>
<system:String>Player Four</system:String>
<system:String>Player Five</system:String>
<system:String>Player Six</system:String>
</x:Array>
</CollectionView.ItemsSource>
<CollectionView.ItemsLayout><LinearItemsLayout Orientation="Horizontal"/></CollectionView.ItemsLayout>
<CollectionView.ItemTemplate><DataTemplate><Label Text="{Binding}" Style="{StaticResource ItemText}" HorizontalTextAlignment="Center" BackgroundColor="Green"/></DataTemplate></CollectionView.ItemTemplate>
</CollectionView>

How can I make this be the height of the items in the DataTemplate? I am very confused by some of the properties like VerticalOptions, HeightRequest, etc. I found everything in UWP much easier with properties like Height & VerticalAlignment. Any ideas? Thanks.

1 answer

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,491 Reputation points Microsoft Vendor

2020-12-01T06:25:18.403+00:00
Hello,

Welcome to our Microsoft Q&A platform!

Items in a CollectionView can be dynamically resized by changing layout related properties of elements within the DataTemplate.

In your DataTemplate, you just have Label, if you want to change the Height, you could set HeightRequest for your Label

<Label HeightRequest="300" Text="{Binding .}" BackgroundColor="Green"/>

Here is related article about it.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#dynamic-resizing-of-items

Best Regards,

Leon Lu

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Nathan Sokalski 4,116 Reputation points

2020-12-01T17:02:34.123+00:00

That didn't seem to help. However, it does work if I place it in the CollectionView element itself. But it still requires me to manually calculate the necessary height, which is what I am trying to avoid. Any other ideas?

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,491 Reputation points Microsoft Vendor

2020-12-02T09:26:43.167+00:00

@njsokal

You can use Two Stacklayout, set the HeightRequest for your inner StackLayout, then you can add whatever you want, just calculate the necessary height for once.Note: Outside the stacklayout' defaulted height is your screen's height.

<CollectionView.ItemTemplate> <DataTemplate > <StackLayout> <StackLayout HeightRequest="50" VerticalOptions="Center" BackgroundColor="gray"> <Label Text="{Binding}" HorizontalTextAlignment="Center" BackgroundColor="Green"/> </StackLayout> </StackLayout> </DataTemplate> </CollectionView.ItemTemplate>

Nathan Sokalski 4,116 Reputation points

2020-12-02T17:47:15.423+00:00

Once again, that still requires me to manually calculate the height.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,491 Reputation points Microsoft Vendor

2020-12-03T09:46:14.833+00:00

Can you share picture that you want to achieve? Due to your Qustion is: How can I make this be the height of the items in the DataTemplate?. If you do not want to specific height, you just want items' height adjust by himself, you do not change anything. Becuase it will dynamic resizing of items. If you have some dobuts about VerticalOptions, please read this article:https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/layout-options

Derek Foulk 1 Reputation point

2022-03-13T07:26:47.843+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.) What we want to know is how to make CollectionView set its own height automatically. By default, CollectionView elements expand to fill all available vertical space in their parent element. I believe that the ListView element did the same thing.

What I expected CollectionView to do:
When the CollectionView contains three items that are 50px tall, I expected the CollectionView height to be 150px (3 items x 50px tall = 150px).

What CollectionView actually does:
With any number of 50px tall items (1-Infinite), the CollectionView element's height is equal to the total height of the page (greater if there is an element preceding it).

I have not figured this out yet. Right now, the only thing I can think of is using a converter in the CollectionView > HeightRequest property that receives the collection that is used as the ItemsSource, then returns an integer equal to the count * height of items. This solution feels gross though. It seems that we need to use StackLayout instead of CollectionView... StackLayout isn't a great alternative for me, though. I want a list of items that can be tapped, invoking a command upon tapping. CollectionView is better suited for this use case.
Sign in to comment