The CollectionView does not scroll to the desired group by index

Question

Why is it that when I try to navigate to a specific group, I always get sent back to the first group?

If I find a group, and in it the instance I need, and pass it to ScrollTo, then the search works correctly.

AnimalGroup group = viewModel.Animals.FirstOrDefault(a => a.Name == "Monkeys");
Animal monkey = group.FirstOrDefault(m => m.Name == "Proboscis Monkey");
collectionView.ScrollTo(monkey, group);

But I can't do it with indexes. Please help me figure it out.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppColScroll.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            

            <CollectionView HeightRequest="300" x:Name="collectionView" 
                            ItemsSource="{Binding Animals}" 
                IsGrouped="true">
                <CollectionView.GroupHeaderTemplate>
                    <DataTemplate>
                        <Label Text="{Binding Name}"
                   BackgroundColor="LightGray"
                   FontSize="18"
                   FontAttributes="Bold" />
                    </DataTemplate>
                </CollectionView.GroupHeaderTemplate>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="10">
                            
                            <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                            <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold" />
                            <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

            <Button x:Name="Btn1"  Text="Btn1"  
                    Clicked="Btn1_Clicked"/>
            <Button x:Name="Btn2"  Text="Btn2"  
        Clicked="Btn2_Clicked"/>
            <Button x:Name="Btn3"  Text="Btn3"  
        Clicked="Btn3_Clicked"/>
            <Button x:Name="Btn4"  Text="Btn4"  
        Clicked="Btn4_Clicked"/>
            <Button x:Name="Btn5"  Text="Btn5"  
        Clicked="Btn5_Clicked"/>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

using Microsoft.Maui.Controls;
using System.Collections.ObjectModel;

namespace MauiAppColScroll
{
    public partial class MainPage : ContentPage
    {
        int count = 0;
        public ObservableCollection<AnimalGroup> Animals { get; private set; } = new ObservableCollection<AnimalGroup>();

        public MainPage()
        {
            Animals.Add(new AnimalGroup("Bears", new ObservableCollection<Animal>
{
    new Animal
    {
        Name = "American Black Bear",
        Location = "North America",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/08/01_Schwarzbär.jpg"
    },
    new Animal
    {
        Name = "Asian Black Bear",
        Location = "Asia",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/180px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG"
    },
}));

            Animals.Add(new AnimalGroup("Monkeys", new ObservableCollection<Animal>
{
    new Animal
    {
        Name = "Baboon",
        Location = "Africa & Asia",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
    },
    new Animal
    {
        Name = "Capuchin Monkey",
        Location = "Central & South America",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
    },
    new Animal
    {
        Name = "Blue Monkey",
        Location = "Central and East Africa",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
    },
}));
            Animals.Add(new AnimalGroup("Horses", new ObservableCollection<Animal>
{
    new Animal
    {
        Name = "American Black Bear",
        Location = "North America",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/08/01_Schwarzbär.jpg"
    },
    new Animal
    {
        Name = "Asian Black Bear",
        Location = "Asia",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/180px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG"
    },
}));
            Animals.Add(new AnimalGroup("Cats", new ObservableCollection<Animal>
{
    new Animal
    {
        Name = "American Black Bear",
        Location = "North America",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/08/01_Schwarzbär.jpg"
    },
    new Animal
    {
        Name = "Asian Black Bear",
        Location = "Asia",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/180px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG"
    },
}));
            Animals.Add(new AnimalGroup("Dogs", new ObservableCollection<Animal>
{
    new Animal
    {
        Name = "American Black Bear",
        Location = "North America",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/08/01_Schwarzbär.jpg"
    },
    new Animal
    {
        Name = "Asian Black Bear",
        Location = "Asia",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/180px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG"
    },
}));
            InitializeComponent();
            BindingContext = this;
       
        }



        private void Btn1_Clicked(object sender, EventArgs e)
        {
            collectionView.ScrollTo(1, 0);
        }
        private void Btn2_Clicked(object sender, EventArgs e)
        {
            collectionView.ScrollTo(1, 1);
        }
        private void Btn3_Clicked(object sender, EventArgs e)
        {
            collectionView.ScrollTo(1, 2);
        }
        private void Btn4_Clicked(object sender, EventArgs e)
        {
            collectionView.ScrollTo(1, 3);
        }
        private void Btn5_Clicked(object sender, EventArgs e)
        {
            collectionView.ScrollTo(1, 4);
        }
    }

}

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MauiAppColScroll
{
    public class AnimalGroup : ObservableCollection<Animal>
    {
        public string Name { get; private set; }

        public AnimalGroup(string name, ObservableCollection<Animal> animals) : base(animals)
        {
            Name = name;
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MauiAppColScroll
{
    public class Animal
    {
        public string Name { get; set; }
        public string Location { get; set; }
        public string Details { get; set; }
        public string ImageUrl { get; set; }
    }
}

I expected that when calling

 private void Btn5_Clicked(object sender, EventArgs e)
 {
     collectionView.ScrollTo(1, 4);
 }

I will see the 5th group "Dogs" and it transfers me to the first one if, for example, I am in the middle of the list. Or nothing happens at all if I click on Btn5 immediately after loading.

Answer 1

You can use LINQ to filter the 5th group "Dogs" and then directly Scroll an item into view to the 5th Dogs group:

private void Btn5_Clicked(object sender, EventArgs e)
{
    AnimalGroup group = Animals.FirstOrDefault(a => a.Name == "Dogs");
    Animal dog = group.FirstOrDefault(m => m.Name == "American Black Bear");
    
    collectionView.ScrollTo(dog, group);
}

Update:

This issue is related with The ScrollTo method does not carry the element in a grouping #8718 as commented above. If you're targeting Android, you can use this workaround.