Scroll a CollectionView to ItemGroup

Question

I have a CollectionView with groups. Each group has a string with a Date.

I subsequently created a CarouselView with all the dates of the CollectionView groups.

I am trying to create a way to scroll the elements of the CarouselView and consequently scroll the CollectionView to the corresponding group, but it doesn't work.

The CollectionView remains stationary.

<StackLayout>
        <CarouselView
            x:Name="CarouselView1"
            ItemsSource="{Binding humors}"
            Scrolled="CarouselView_Scrolled">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}" />
                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>

        </CarouselView>
        <CollectionView
            x:Name="CollectionDiary"
            HeightRequest="100"
            IsGrouped="True"
            ItemsSource="{Binding humors}"
            SelectionMode="Single">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal">
                        <Label Text="{Binding name}" />
                        <Label Text="{Binding count}" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
            <CollectionView.GroupHeaderTemplate>
                <DataTemplate>
                    <Label
                        BackgroundColor="LightGray"
                        FontAttributes="Bold"
                        FontSize="Large"
                        Text="{Binding Name}" />
                </DataTemplate>
            </CollectionView.GroupHeaderTemplate>
        </CollectionView>
    </StackLayout>



    private void CarouselView_Scrolled(object sender, ItemsViewScrolledEventArgs e)
    {
        var current = CarouselView1.CurrentItem as HumorGroup;           
         CollectionDiary.ScrollTo(current,ScrollToPosition.Center);          
    }


public class HumorDiary
{
    public string name { get; set; }
    public int count { get; set; }
}

public class HumorGroup : ObservableCollection<HumorDiary>
{
    public string Name { get;  set; }
    public HumorGroup(string name, ObservableCollection<HumorDiary> humor) : base(humor)
    {
        Name = name;
    }
}

    public ObservableCollection<HumorGroup> humors { get; set; }
public void GroupHumorViewmodel
{           
        humors = new ObservableCollection<HumorGroup>();
        humors.Add(new HumorGroup("2021",new ObservableCollection<HumorDiary>() {
            new HumorDiary(){name="2021-day1",count=3},
            new HumorDiary(){name="2021-day2",count=3},
            new HumorDiary(){name="2021-day3",count=4},
            new HumorDiary(){name="2021-day4",count=2},
            new HumorDiary(){name="2021-day5",count=5},
            new HumorDiary(){name="2021-day6",count=4},
            new HumorDiary(){name="2021-day7",count=2},
            new HumorDiary(){name="2021-day8",count=5}


        }));

        humors.Add(new HumorGroup("2020", new ObservableCollection<HumorDiary>() {
            new HumorDiary(){name="2020-day1",count=3},
            new HumorDiary(){name="2020-day2",count=3},
            new HumorDiary(){name="2020-day3",count=4},
            new HumorDiary(){name="2020-day4",count=2},
            new HumorDiary(){name="2020-day5",count=5},
            new HumorDiary(){name="2020-day6",count=4},
            new HumorDiary(){name="2020-day7",count=2},
            new HumorDiary(){name="2020-day8",count=5}

        }));

}

Answer 1

Take a look at Scroll Tomethod , we can't make the view scroll to a specific group , the parameter must be an item of a group .

So it's impossible to achieve this in forms , you can seek a way with custom renderer on specific platform .

PS : It's better to use CurrentItemChanged event instead of Scrolled event on CarouselView, because Scrolled event triggers multiple times during scrolling .

code

   private void CarouselView1_CurrentItemChanged(object sender, CurrentItemChangedEventArgs e)  
           {  
               var current = e.CurrentItem as HumorGroup;  
               if (current != null && current.Count > 0)  
               {  
                   CollectionDiary.ScrollTo(current[0], current, ScrollToPosition.Start);  
               }                     
           }  

Refer to

https://stackoverflow.com/questions/39306074/scrollto-not-working-with-grouped-listview-in-xamarin-forms
https://forums.xamarin.com/discussion/162182/listview-scrollto-groupheader