Skip to content

Commit 4b63c3e

Browse files
author
KB Bot
committed
Added new kb article collectionview-item-template-adjust-height
1 parent cb12a64 commit 4b63c3e

File tree

1 file changed

+61
-0
lines changed

1 file changed

+61
-0
lines changed
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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+
### Setting a Fixed Height with `ItemLength`
33+
34+
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:
35+
36+
```XAML
37+
<telerik:RadCollectionView.ItemsLayout>
38+
<telerik:CollectionViewLinearLayout ItemLength="20"/>
39+
</telerik:RadCollectionView.ItemsLayout>
40+
```
41+
42+
### Adjusting `MinimumHeightRequest` for Dynamic Sizing
43+
44+
To enable dynamic sizing, set the `MinimumHeightRequest` of the `RadCollectionViewItemView` to 0 using the `ItemViewStyle`:
45+
46+
```XAML
47+
<telerik:RadCollectionView.ItemViewStyle>
48+
<Style TargetType="telerik:RadCollectionViewItemView">
49+
<Setter Property="MinimumHeightRequest" Value="0" />
50+
</Style>
51+
</telerik:RadCollectionView.ItemViewStyle>
52+
```
53+
54+
### Recommendation
55+
56+
If the item size is static, prefer using `ItemLength` as it improves the control's virtualization performance.
57+
58+
## See Also
59+
60+
- [CollectionView Documentation](https://docs.telerik.com/devtools/maui/controls/collectionview/overview)
61+
- [CollectionViewLinearLayout Overview](https://docs.telerik.com/devtools/maui/controls/collectionview/layouts/linear-layout)

0 commit comments

Comments
 (0)