|
| 1 | +--- |
| 2 | +title: Adjusting Item Template Height in CollectionView for .NET MAUI |
| 3 | +description: Learn how to make the item template in CollectionView for .NET MAUI occupy only the space it uses by removing extra white space. |
| 4 | +type: how-to |
| 5 | +page_title: Removing Extra Space Below Text in CollectionView Item Template |
| 6 | +meta_title: Removing Extra Space Below Text in CollectionView Item Template |
| 7 | +slug: collectionview-item-template-adjust-height |
| 8 | +tags: collectionview, .net maui, item template, minimumheightrequest, itemlength |
| 9 | +res_type: kb |
| 10 | +--- |
| 11 | + |
| 12 | +## Environment |
| 13 | + |
| 14 | +| Version | Product | Author | |
| 15 | +| --- | --- | ---- | |
| 16 | +| 11.1.0 | Telerik UI for .NET MAUI CollectionView | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | |
| 17 | + |
| 18 | + |
| 19 | +## Description |
| 20 | + |
| 21 | +I want the item template of the CollectionView to only occupy the space it uses. The extra white space below the text in the item needs to be removed. |
| 22 | + |
| 23 | +This knowledge base article also answers the following questions: |
| 24 | +- How can I adjust the height of CollectionView items dynamically? |
| 25 | +- How can I remove the default minimum height set for CollectionView items? |
| 26 | +- How can I improve performance with fixed item heights in .NET MAUI CollectionView? |
| 27 | + |
| 28 | +## Solution |
| 29 | + |
| 30 | +To control the height of the item template in CollectionView for .NET MAUI and remove extra white space, follow one of the solutions below: |
| 31 | + |
| 32 | + |
| 33 | + |
| 34 | +### Setting a Fixed Height with `ItemLength` |
| 35 | + |
| 36 | +Use the `ItemLength` property of the [`CollectionViewLinearLayout`](https://docs.telerik.com/devtools/maui/controls/collectionview/layouts/linear-layout) to explicitly define the height of the items. If the item size is static, this improves the control's virtualization performance. |
| 37 | + |
| 38 | +```XAML |
| 39 | +<telerik:RadCollectionView.ItemsLayout> |
| 40 | + <telerik:CollectionViewLinearLayout ItemLength="20"/> |
| 41 | +</telerik:RadCollectionView.ItemsLayout> |
| 42 | +``` |
| 43 | + |
| 44 | +### Adjusting `MinimumHeightRequest` for Dynamic Sizing |
| 45 | + |
| 46 | +To enable dynamic sizing, set the `MinimumHeightRequest` of the `RadCollectionViewItemView` to 0 using the `ItemViewStyle`: |
| 47 | + |
| 48 | +```XAML |
| 49 | +<telerik:RadCollectionView.ItemViewStyle> |
| 50 | + <Style TargetType="telerik:RadCollectionViewItemView"> |
| 51 | + <Setter Property="MinimumHeightRequest" Value="0" /> |
| 52 | + </Style> |
| 53 | +</telerik:RadCollectionView.ItemViewStyle> |
| 54 | +``` |
| 55 | + |
| 56 | +## See Also |
| 57 | + |
| 58 | +- [CollectionView Documentation](https://docs.telerik.com/devtools/maui/controls/collectionview/overview) |
| 59 | +- [CollectionViewLinearLayout Overview](https://docs.telerik.com/devtools/maui/controls/collectionview/layouts/linear-layout) |
0 commit comments