Articles in this section
Category / Section

How to show group and grouped items within a frame Xamarin.Forms ListView (SfListView)

2 mins read

You can show the frame around each group and group items with the help of converter by changing the border thickness of the GroupHeaderItem and ListViewItem in Xamarin.Forms SfListView.



ItemTemplate and GroupHeaderTemplate are defined with the converter that defines the border thickness.

<ContentPage xmlns=""
        <local:ThicknessConverter x:Key="converter"/>
        <syncfusion:SfListView x:Name="listView" GroupHeaderSize="50" ItemSize="60" Margin="10" ItemsSource="{Binding contactsinfo}">
                    <Grid BackgroundColor="Gray">
                        <Grid Padding="5,0,0,0" BackgroundColor="White" x:Name="grid" Margin="{Binding Converter={StaticResource converter}, ConverterParameter={x:Reference listView}}" >
                                <ColumnDefinition Width="50" />
                                <ColumnDefinition Width="*" />
                            <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50"/>
                            <Grid Grid.Column="1" Padding="10,0,0,0" VerticalOptions="Center">
                                <Label LineBreakMode="WordWrap" TextColor="#474747" Text="{Binding ContactName}"/>
                                <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" Text="{Binding ContactNumber}"/>
                    <Grid BackgroundColor="Gray" Margin="0,10,0,0">
                        <Grid BackgroundColor="White" Margin="{Binding Converter={StaticResource converter}, ConverterParameter={x:Reference listView}}">
                            <Grid Margin="5">
                                <Frame Padding="5,0,0,0" HasShadow="False" OutlineColor="LightGray" BackgroundColor="AliceBlue">
                                    <Label x:Name="label" Text="{Binding Key}" FontSize="20" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Start"/>


Thickness returned based on the ListView item,  GroupHeader item and the last item of the group.

namespace ListViewXamarin
    public class ThicknessConverter : IValueConverter
        Thickness groupBorderThickness;
        Thickness lastItemThickness;
        Thickness defaultThickness;
        public ThicknessConverter()
            groupBorderThickness = new Thickness(1, 1, 1, 0);
            defaultThickness = new Thickness(1, 0, 1, 0);
            lastItemThickness = new Thickness(1, 0, 1, 1);
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            var listView = parameter as SfListView;
            var itemData = value as Contacts;
            object key = null;
            GroupResult actualGroup = null;
            var descriptor = listView.DataSource.GroupDescriptors[0];
            if (value == null)
                return defaultThickness;
            if (itemData == null)
                return groupBorderThickness;
                key = descriptor.KeySelector(itemData);
                for (int i = 0; i < listView.DataSource.Groups.Count; i++)
                    var group = listView.DataSource.Groups[i];
                    if ((group.Key != null && group.Key.Equals(key)) || group.Key == key)
                        actualGroup = group;
                var lastItem = actualGroup.GetGroupLastItem();
                if (lastItem == itemData)
                    return lastItemThickness;
                return defaultThickness;
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            return value;


Image for adding grouped item in a frame

View sample in GitHub

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment