Category / Section
How to display multiple data in the group header template using converter?
List view allows you to display multiple data in the group header template with different labels using IValueConverter with the help of GroupResult. It contains various information: levels, items, subgroups, etc., and pass those values in the ConverterParameter.
XAML
<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms">
<ContentPage.Resources>
<ResourceDictionary>
<local:GroupHeaderConverter x:Key="TemplateConverter"/>
<local:GroupHeaderImageConverter x:Key="ImageConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<Grid >
<syncfusion:SfListView x:Name="listView" ItemSize="80"
SelectionMode="Single"
AllowGroupExpandCollapse="True"
GroupHeaderSize="60"
ItemsSource="{Binding EmployeeInfo}"
ItemSpacing="2">
<syncfusion:SfListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding .,Converter={StaticResource ImageConverter}}" Grid.RowSpan="2" HeightRequest="35" WidthRequest="35"/>
<Label x:Name="grouplabel" Grid.Column="1" Grid.Row="0"
Text="{Binding .,Converter={StaticResource TemplateConverter}}"
FontAttributes="Bold" Margin="3"
VerticalOptions="Center" HorizontalOptions="Start"/>
<Label Text="{Binding Key}" Grid.Column="1" Grid.Row="1"
FontAttributes="Bold" Margin="3"
VerticalOptions="Center" HorizontalOptions="Start"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</syncfusion:SfListView.GroupHeaderTemplate>
</syncfusion:SfListView>
</Grid>
</ContentPage.Content>
</ContentPage>
C#
public class GroupHeaderConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value == null)
return null;
var items = (value as GroupResult).Items.ToList<Employee>().ToList();
return items[0].GroupingData.Designation;
}
}
public class GroupHeaderImageConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value == null)
return null;
var items = (value as GroupResult).Items.ToList<Employee>().ToList();
return items[0].GroupingData.GroupingImage;
}
}
Screenshot

Click here to download the sample.