How to add an image on ListViewGroupHeaderTemplate?

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

Hello,

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">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <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" />
            </Grid>
        </DataTemplate>
...
 <telerik:RadListView.GroupDescriptors>
        <telerik:ListViewPropertyGroupDescriptor PropertyName="NameStore" />
        <telerik:ListViewPropertyGroupDescriptor PropertyName="AddressStore" />
        <telerik:ListViewPropertyGroupDescriptor PropertyName="LogoStore" />
</telerik:RadListView.GroupDescriptors>


Greetings!!

1 Answer, 1 is accepted

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

Hello,

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: https://docs.telerik.com/devtools/maui/controls/listview/grouping/customize-group-header 

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. 

Regards,
Didi
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.

Tags
ListView
Asked by
Comercializadora Paxia
Top achievements
Rank 1
Iron
Answers by
Didi
Telerik team
Share this question
or