How to add an image on ListViewGroupHeaderTemplate?

1 Answer 97 Views
Comercializadora Paxia
Top achievements
Rank 1
Comercializadora Paxia asked on 09 Feb 2023, 01:02 AM


I am customizing a listView, I am working with the grouping functionality and I want to know if it is possible to add an image in the ListViewGroupHeaderTemplate. In the same way, can you tell me if the way in which I add the GroupDescriptors is correct.

Here's my code:

<DataTemplate x:Key="ListViewGroupHeaderTemplate">
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition />
                <Image Grid.RowSpan="2" Grid.Column="0" Source="{Binding LogoStore}" HeightRequest="50" WidthRequest="50" Margin="5" />
                <Label Margin="0,12,0,6" Text="{Binding NameStore}" Grid.Column="1" TextColor="Black" FontSize="Medium" HorizontalOptions="Start" />
                <Label Margin="0,12,0,6" Text="{Binding AddressStore}" Grid.Column="1" TextColor="#EEEEEE" FontSize="Medium" HorizontalOptions="Start" />
        <telerik:ListViewPropertyGroupDescriptor PropertyName="NameStore" />
        <telerik:ListViewPropertyGroupDescriptor PropertyName="AddressStore" />
        <telerik:ListViewPropertyGroupDescriptor PropertyName="LogoStore" />


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 10 Feb 2023, 05:17 PM


Let me get straight to the questions:

1) Add Image to the GroupHeader - this scenario can be achieved using a converter. The approach is shown in the attached project. 

2) PropertyGroupDescriptors definition:
From the provided code it seems you want a multi level grouping.You group the ListView based on three properties from the data model.  You cannot use Binding PropertyName in the group header template. 
The solution is: 

 <Label Margin="0,12,0,6" Text="{Binding Key}" Grid.Column="1" TextColor="Black" FontSize="Medium" HorizontalOptions="Start" />

"Key" is the grouping key, which is usually the property name that is being grouped on. The BindingContext of the GroupHeader is a complex object - GroupHeaderContext. All information is described here: 

Download the attached file. I have left comments for a convenience. I hope it will be of help to get started with the ListView Grouping. 

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Asked by
Comercializadora Paxia
Top achievements
Rank 1
Answers by
Telerik team
Share this question