Category / Section
How to add expand or collapse icon in group header of SfListView?
2 mins read
SfListView provides support to expand or collapse the group when tapped on group header item by setting AllowGroupExpandCollapse as True.
And also allows to show the expand and collapse state of the group with icon in the group header by customizing the GroupHeaderTemplate and using the IsExpand property, which determines whether the group is expanded or collapsed.
XAML
<ContentPage>
<ContentPage.BindingContext>
<local:ContactsViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>
<ContentPage.Resources>
<ResourceDictionary>
<local:BoolToImageConverter x:Key="BoolToImageConverter"/>
<DataTemplate x:Name="ItemTemplate" x:Key="ItemTemplate">
<ViewCell>
<ViewCell.View>
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Grid RowSpacing="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Image Source="{Binding ContactImage}"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="50"/>
<Grid Grid.Column="1"
VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="{Binding ContactName}">
</Label>
<Label Grid.Row="1"
Grid.Column="0"
Text="{Binding ContactNumber}">
</Label>
</Grid>
<Grid Grid.Row="0"
Grid.Column="2"
HorizontalOptions="End">
</Grid>
</Grid>
<StackLayout Grid.Row="1" BackgroundColor="Gray" HeightRequest="1"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
<DataTemplate x:Name="GroupHeaderTemplate" x:Key="GroupHeaderTemplate">
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image x:Name="NormalImage" Grid.Column="0" HorizontalOptions="Center"
HeightRequest="30"
WidthRequest="30"
Source="{Binding IsExpand, Converter={StaticResource BoolToImageConverter}}"
VerticalOptions="Center"/>
<Label Text="{Binding Key}" Grid.Column="1"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<Grid>
<syncfusion:SfListView x:Name="listView" ItemSize="70"
GroupHeaderSize="60"
ItemTemplate="{StaticResource ItemTemplate}"
GroupHeaderTemplate="{StaticResource GroupHeaderTemplate}"
ItemsSource="{Binding contactsinfo}"
AllowGroupExpandCollapse="True">
</syncfusion:SfListView>
</Grid>
</ContentPage.Content>
</ContentPage>
You can switch the expand or collapse group icon based on IsExpand property using the BoolToImageConverter converter.
C#
public class BoolToImageConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if ((bool)value)
return ImageSource.FromResource("ListViewSample.Images. GroupExpand.png");
else
return ImageSource.FromResource("ListViewSample.Images. GroupCollapse.png");
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
The below code illustrates to define the GroupHeaderTemplate in code behind,
listView = new SfListView();
viewModel = new ContactsViewModel();
listView.ItemsSource = viewModel.contactsinfo;
listView.GroupHeaderTemplate = new DataTemplate(() =>
{
var grid = new Grid { BackgroundColor = Color.FromHex("#E4E4E4") };
var column0 = new ColumnDefinition { Width = 30 };
var column1 = new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) };
grid.ColumnDefinitions.Add(column0);
grid.ColumnDefinitions.Add(column1);
var image = new Image();
Binding binding = new Binding("IsExpand");
binding.Converter = new BoolToImageConverter();
image.SetBinding(Image.SourceProperty, binding);
image.HeightRequest = 30;
image.WidthRequest = 30;
image.VerticalOptions = LayoutOptions.Center;
image.HorizontalOptions = LayoutOptions.Center;
var label = new Label
{
FontAttributes = FontAttributes.Bold,
FontSize = 22,
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Start,
Margin = new Thickness(20, 0, 0, 0),
};
label.SetBinding(Label.TextProperty, new Binding("Key"));
grid.Children.Add(image, 0, 0);
grid.Children.Add(label, 1, 0);
return grid;
});
The below screenshots show the Group Header icon is loaded when expanded and collapsed.
Click here to download the sample. Click here to download the sample which is created completely in MVVM pattern.
