Xamarin CollectionView - Scroll Programatically

Question

I have collection view . See below code

 <CollectionView ItemsSource="{Binding photos}" HeightRequest="300"
                                    ItemSizingStrategy="MeasureAllItems" Margin="10,0,10,0"
                                    x:Name="photosView"
                                    ItemsUpdatingScrollMode="KeepScrollOffset">
                        <CollectionView.ItemsLayout>
                            <GridItemsLayout Orientation="Vertical" Span="3" />
                        </CollectionView.ItemsLayout>
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <StackLayout Padding="2">
                                <Frame BackgroundColor="Red" HeightRequest="79" WidthRequest="53" Padding="0" Margin="0"
                                       IsClippedToBounds="True" HasShadow="False" CornerRadius="10">
                                    <Image Aspect="AspectFill"  Source="{Binding imageUrl}"/>
                                </Frame>
                                    </StackLayout>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>

I am showing 3 rows and 3 columns of the images. If I have more than 9 images then I am showing Button which says Scroll for more photos. Now On click on the imageI have below code

void OnScrollMore(System.Object sender, System.EventArgs e)
    {
        //photosView.SendScrolled(new ItemsViewScrolledEventArgs() { FirstVisibleItemIndex = 0 });
        photosView.ScrollTo(photosView.Y + 10, position: ScrollToPosition.MakeVisible, animate: true);
        
    }

But nothing is happening . It is not getting scrolled to next row.

Any suggestions?

Answer 1

The reason your ScrollTo method is not working is because the photosView can't find the item 'photosView.Y + 10' in your photosView itemssource. The method you're invoking is trying to find an item in the ItemsSource. It is not scrolling to a y-position like you're trying to do. You can see it in the description of the method when going to the definition. It is waiting for an 'object item'.

public void ScrollTo(object item, object group = null, ScrollToPosition position = ScrollToPosition.MakeVisible, bool animate = true);

If what you're trying to do is scroll to the last added item of the collectionview, then try this working approach and build it up from there. Here everytime you press the button, an item (string) gets added. This item is set as the ScrollTo object at the end of the button click handler.

MainPage.xaml

<StackLayout Orientation="Vertical">
        <CollectionView ItemsSource="{Binding photos}" HeightRequest="300"
                                    ItemSizingStrategy="MeasureAllItems" Margin="10,0,10,0"
                                    x:Name="photosView"
                                    ItemsUpdatingScrollMode="KeepLastItemInView">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="3" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Padding="2">
                        <Frame BackgroundColor="Red" HeightRequest="79" WidthRequest="53" Padding="0" Margin="0"
                                       IsClippedToBounds="True" HasShadow="False" CornerRadius="10">
                            <Label Text="{Binding}" TextColor="White"
                                   HorizontalOptions="Center" VerticalOptions="Center"
                                   HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <Button Text="scroll more" HorizontalOptions="Center" VerticalOptions="End" Clicked="OnScrollMore"/>
    </StackLayout>

MainPage.xaml.cs

public partial class MainPage : ContentPage
    {
        ObservableCollection<string> ObservableItems { get; set; }

        public MainPage()
        {
            InitializeComponent();

            ObservableItems = new ObservableCollection<string>(new List<string>() { "een", "twee", "drie" });
            photosView.ItemsSource = ObservableItems;
        }

        void OnScrollMore(System.Object sender, System.EventArgs e)
        {
            var item = (ObservableItems.Count + 1).ToString();

            ObservableItems.Add(item);

            photosView.ScrollTo(item, position: ScrollToPosition.MakeVisible, animate: true);
        }
    }

Resulting in: