MAUI中CollectionView按索引滚动指定分组异常问题求助

架构老林

2026-6-24

MAUI分组CollectionView使用索引调用ScrollTo方法失效问题

在MAUI项目中，开启分组功能的CollectionView通过实体实例调用ScrollTo方法时，能正常滚动到指定分组及其中的项；但使用索引参数（如collectionView.ScrollTo(1,4)）调用时，无法滚动到目标的第5个“Dogs”分组，反而回到第一个分组或点击无反应。

相关代码示例

正常工作的实体实例调用代码

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

XAML代码

<?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>

C#后台代码

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);
        }
    }
}

AnimalGroup类

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;
        }
    }
}

Animal类

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; }
    }
}

问题说明

期望调用collectionView.ScrollTo(1,4)时能滚动到“Dogs”分组，但实际无法实现，需要排查解决。

内容的提问来源于stack exchange，提问作者Igor Krupskiy

MAUI中CollectionView按索引滚动指定分组异常问题求助

相关代码示例 #

正常工作的实体实例调用代码 #

XAML代码 #

C#后台代码 #

AnimalGroup类 #

Animal类 #

问题说明 #