question

StefanoM-9408 avatar image
0 Votes"
StefanoM-9408 asked ColeXia-MSFT commented

Scroll a CollectionView to ItemGroup

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


dotnet-xamarin
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi StefanoM-9408 , could you provide us a complete , minimal project to test ?

0 Votes 0 ·

I updated the code. I need to scroll to the group name and not the first element because some groups may be empty

0 Votes 0 ·

1 Answer

ColeXia-MSFT avatar image
0 Votes"
ColeXia-MSFT answered ColeXia-MSFT commented

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 .

89324-capture.png


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


capture.png (18.3 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

May I know whether your issue has been solved or not? If not, please share it in here. We can work together to figure it out.

0 Votes 0 ·