Hiding Default Expand Icon in .NET MAUI CollectionView with Grouping
Environment
| Version | Product | Author |
|---|---|---|
| 13.0.0 | Telerik UI for .NET MAUI CollectionView | Dobrinka Yordanova |
Description
I want to hide the default expand icon in the .NET MAUI CollectionView when grouping is used. I plan to use a custom icon and style it further.
This knowledge base article also answers the following questions:
- How can I replace the default expand icon in .NET MAUI CollectionView with a custom one?
- How to hide the expand indicator in .NET MAUI CollectionView grouping?
- How to style the expand icon in .NET MAUI CollectionView?
Solution
Use the following steps to customize or hide the expand icon in the .NET MAUI CollectionView when grouping is enabled.
- Customize the Expand Icon in .NET MAUI CollectionView Grouping
- Hide the Expand Icon in .NET MAUI CollectionView Grouping
Customize the Expand Icon
To use a custom expand icon in the .NET MAUI CollectionView when grouping is enabled, you have to use the GroupViewStyle property:
<telerik:RadCollectionView>
<telerik:RadCollectionView.GroupViewStyle>
<Style TargetType="telerik:RadCollectionViewGroupView">
<Setter Property="ExpandCollapseIndicatorStyle" Value="{StaticResource ExpandCollapseIndicatorStyle}" />
</Style>
</telerik:RadCollectionView.GroupViewStyle>
</telerik:RadCollectionView>
Define the ExpandCollapseIndicatorStyle style to customize the expand icon. You can set a custom icon or change the text color, for example:
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="ExpandCollapseIndicatorStyle" TargetType="Label">
<Setter Property="TextColor" Value="Red" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
Hide the Expand Icon
To hide the expand icon set the IsVisible property of the expand indicator to False in the ExpandCollapseIndicatorStyle:
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="ExpandCollapseIndicatorStyle" TargetType="Label">
<Setter Property="TextColor" Value="Black" />
<Setter Property="IsVisible" Value="False" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
Then set the ExpandCollapseIndicatorStyle to the GroupViewStyle of the CollectionView as shown below:
<telerik:RadCollectionView>
<telerik:RadCollectionView.GroupViewStyle>
<Style TargetType="telerik:RadCollectionViewGroupView">
<Setter Property="ExpandCollapseIndicatorStyle" Value="{StaticResource ExpandCollapseIndicatorStyle}" />
</Style>
</telerik:RadCollectionView.GroupViewStyle>
</telerik:RadCollectionView>