Skip to content

Commit b7e723c

Browse files
Merge pull request #1234 from telerik/new-kb-collectionview-item-template-adjust-height-4ed65de37ac544ef9c1ec70a2f77015d
Added new kb article collectionview-item-template-adjust-height
2 parents 6b548f3 + a8e7a4e commit b7e723c

File tree

1 file changed

+59
-0
lines changed

1 file changed

+59
-0
lines changed
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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

Comments
 (0)