How to jump to a specific group header when clicking on a side indexer in .NET MAUI ListView (SfListView)?

You can jump to specific group header in .NET MAUI SfListView by tapping on the indexed letter (group key) and scrolling to the respective group (GroupHeaderItem) by passing group key index in the ScrollToRowIndex.

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <syncfusion:SfListView  x:Name="listView" Grid.Row="0"
                            IsStickyGroupHeader="True" SelectionMode="None"
                            ItemsSource="{Binding contactsinfo}">

        <syncfusion:SfListView.ItemTemplate>
            <DataTemplate>
                <StackLayout Spacing="4">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Image Source="{Binding ContactImage}" HeightRequest="50" WidthRequest="50" Grid.Column="0"/>
                        <StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="Start" Grid.Column="1">
                            <Label LineBreakMode="WordWrap" 
                                           VerticalOptions="Center" HorizontalOptions="Center"
                                       HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
                                   TextColor="#474747" 
                                   Text="{Binding ContactName}">
                            </Label>
                            <Label LineBreakMode="WordWrap" 
                                   VerticalOptions="Center" HorizontalOptions="Center"
                                   HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
                                   TextColor="#474747"
                                   Text="{Binding ContactNumber}"/>
                        </StackLayout>
                    </Grid>
                    <StackLayout BackgroundColor="LightGray" Grid.Row="1" Grid.ColumnSpan="1" HeightRequest="1" Margin="0,0,20,0"/>
                </StackLayout>
            </DataTemplate>
        </syncfusion:SfListView.ItemTemplate>
    </syncfusion:SfListView>
    <Grid Grid.Row="0" x:Name="IndexPanelGrid" HorizontalOptions="End" VerticalOptions="End" RowSpacing="15"/>
</Grid>

The following code dynamically creates and populates an index panel with labels representing the group headers extracted from the GroupKey values in a grouped SfListView.

// grouping items
ListView.DataSource!.GroupDescriptors.Add(new GroupDescriptor()
{
    PropertyName = "ContactName",
    KeySelector = (object obj1) =>
    {
        var item = (obj1 as Contacts);
        return item!.ContactName[0].ToString();
    }
});
ListView.Loaded += ListView_Loaded; 

private void ListView_Loaded(object? sender, ListViewLoadedEventArgs e)
{
    indexPanelGrid!.ColumnDefinitions.Add(new ColumnDefinition(GridLength.Auto));

    //Creating new label based on the group header key value after loading
    var groupcount = this.ListView!.DataSource!.Groups.Count;

    var items = ListView.DataSource.Groups.ToList<GroupResult>().OrderBy(o=>o.Key);           
    for (int i = 0; i < groupcount; i++)
    {
        label = new Label();
        GroupResult group = items.ElementAt(i);
        label.Text = group.Key.ToString();

        indexPanelGrid.RowDefinitions.Add(new RowDefinition(GridLength.Auto));
        Grid.SetColumn(label, 0);
        Grid.SetRow(label, i);
        indexPanelGrid.Children.Add(label);

        var labelTapped = new TapGestureRecognizer() { Command = new Command<object>(OnTapped), CommandParameter = label };
        label.GestureRecognizers.Add(labelTapped);
    }
}

By tapping on a group key value displayed in the index panel, you can scroll the SfListView to the corresponding group header by comparing the tapped value with all the available GroupHeader key values, as demonstrated below:

private void OnTapped(object obj)
{
    // Navigating to respective GroupHeader based on the tapped label value loaded in IndexLabelGrid
    if (previousLabel != null)
    {
        previousLabel.TextColor = Colors.DimGray;
    }
    var label = obj as Label;
    var text = label!.Text;
    label.TextColor = Colors.Red;
    for (int i = 0; i < ListView!.DataSource!.Groups.Count; i++)
    {
        var group = ListView.DataSource.Groups[i];

        if (group.Key == null)
            App.Current!.MainPage!.DisplayAlert("Message", "Group not available", "ok");
        if ((group.Key != null && group.Key.Equals(text)))
        {
            ListView.ItemsLayout!.ScrollToRowIndex(ListView.DataSource.DisplayItems.IndexOf(group), true);
        }
    }
    previousLabel = label;
}

Output

View sample in GitHub

Conclusion:

I hope you enjoyed learning about how to jump to a specific group header when clicking on a side indexer in .NET MAUI ListView.

You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!