Infinite Scroll in Carousel view in Xamarin forms?

Question

Infinite Scroll in Carousel view in Xamarin forms.

Mageshwaran R · Answer

Hi Nimish, Try this link,It may help you https://stackoverflow.com/questions/58366576/how-can-i-creat-endless-scrolling-in-xamarin

Nimish Saxena · Answer

But this is applicable for ListView but i am using Carousel View. IsBounceEnabled="True" CurrentItemChanged="OnCurrentItemChanged" RemainingItemsThreshold="1" IsScrollAnimated="True" VerticalOptions="FillAndExpand" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" VerticalScrollBarVisibility="Never" RemainingItemsThresholdReachedCommand="{Binding LoadMoreDataCommand}"> --> Tapped="CircleImageTap" /> Tapped="OnLikeClicked" /> Tapped="OnCommentClicked" /> Tapped="ShareSocialNetwork"/>

Rajanikant Hawaldar · Answer

After the project creation, install “Xamarin.Forms.Extended.Infinitescrolling” NuGet package. For that, go to Solution Explorer and right-click Solution and select Manage NuGet Package option, In the window, move to browse tab and search “Xamarin.Forms.Extended.InfiniteScrolling” and install it. For example: C# Code: Add a new model class named “Item.cs”. For that, create a Model folder in the shared project, under the Models folder, add Item.cs class and write the below-given code. public class Items { public string Id { get ; set ; } public string Text { get ; set ; } public string Title { get ; set ; } public string Description { get ; set ; } } Next, create a dummy data class named “DataItems.cs” and paste the below-given code. Now, add the new Tabbed Page. For that, open Solution Explorer => right-click the shared project => select Add => in the dialog window, left plane selects Xamarin. Forms and center plane select Tabbed Page and give the name as “MainPage” and click Add. As well as, add two new content page, names are “SingleViewList” and “GroupViewList”. Open the SingleViewList.xaml page and write the below-given code. In the code, we designed simple ListView and setting up the list view behavior as infinite scroll and ListView Footer design. XAML Code: "1.0" encoding= "utf-8" ?> "http://xamarin.com/schemas/2014/forms" xmlns:x= "http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d= "http://xamarin.com/schemas/2014/forms/design" xmlns:scroll= "clr-namespace:Xamarin.Forms.Extended;assembly=Xamarin.Forms.Extended.InfiniteScrolling" xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable= "d" x:Class= "XFInfiniteScroll.Views.SingleViewList" > "ListsingleItems" HasUnevenRows= "True" VerticalOptions= "FillAndExpand" HorizontalOptions= "FillAndExpand" > "{Binding IsWorking}" /> "12" > "20" /> "20" /> "0" Text= "{Binding Text}" /> "1" Text= "{Binding Description}" /> "6" > "Loading..." IsVisible= "{Binding IsWorking}" VerticalOptions= "Center" HorizontalOptions= "Center" /> Code Behind of SingleViewList.cs. We are just binding the data and setting the page size. C# Code: private const int PageSize = 20; public SingleViewList() { InitializeComponent(); Items = new InfiniteScrollCollection { OnLoadMore = async () => { // load the next page var page = Items.Count / PageSize; var items = await DataItems.GetItemsAsync(page, PageSize); IsWorking = false ; return items; } }; // load the initial data loadDataAsync(); } public InfiniteScrollCollection Items { get ; set ; } public bool IsWorking { get ; set ; } private async Task loadDataAsync() { var items = await DataItems.GetItemsAsync(pageIndex: 0, pageSize: PageSize); Items.AddRange(items); ListsingleItems.ItemsSource = Items; } Next, open GroupListView.xaml and paste the below-given code. The same thing as SingleViewList.cs page, but we are using Grouping based ListView of Header and Item template ListView. XAML Code: "1.0" encoding= "utf-8" ?> "http://xamarin.com/schemas/2014/forms" xmlns:x= "http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d= "http://xamarin.com/schemas/2014/forms/design" xmlns:scroll= "clr-namespace:Xamarin.Forms.Extended;assembly=Xamarin.Forms.Extended.InfiniteScrolling" xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable= "d" x:Class= "XFInfiniteScroll.Views.GroupViewList" > "true" HasUnevenRows= "True" VerticalOptions= "FillAndExpand" HorizontalOptions= "FillAndExpand" x:Name= "GroupItems" > "{Binding IsWorking}" /> "12" > "*" /> "20" /> "20" /> "0" Text= "{Binding Text}" /> "1" Text= "{Binding Description}" /> "25" > "White" > "{Binding Header}" TextColor= "Blue" FontFamily= "Roboto" FontAttributes= "None" FontSize= "16" HorizontalTextAlignment= "Center" VerticalTextAlignment= "Center" /> "6" > "Loading..." IsVisible= "{Binding IsWorking}" VerticalOptions= "Center" HorizontalOptions= "Center" /> Code Behind of GroupListView.cs. C# Code: private int ListItemsCount = 0; private const int PageSize = 20; public InfiniteScrollCollection string , Items>> Items; public bool IsWorking { get ; set ; } public GroupViewList() { InitializeComponent(); Items = new InfiniteScrollCollection string , Items>> { OnLoadMore = async () => { // load the next page IsWorking = true ; ListItemsCount = 0; foreach (var _itemslist in Items) { ListItemsCount += _itemslist.Count; } double _pagecount = ( double )ListItemsCount / PageSize; var page = Convert.ToInt32(Math.Ceiling(_pagecount)); var items = await DataItems.GetItemsAsync(page, PageSize); var _items = items.GroupBy(e => e.Title).Select(e => new ObservableGroupCollection string , Items>(e)).ToList(); if (_items.Count > 0) { foreach (var getGroupItems in _items.GroupBy(i => i.Header).ToList()) { var _GetExistingGroupItems = Items.LastOrDefault(i => i.Header == getGroupItems.Key); if (_GetExistingGroupItems != null && _GetExistingGroupItems.Count > 0) { // this is an existing group, so add the items to that foreach (var _ExistingGroupedItems in getGroupItems.ToList()) { foreach (var _GroupListitems in _ExistingGroupedItems.ToList()) { _GetExistingGroupItems.Add(_GroupListitems); //Update items } } } else { //Add new Group Items.AddRange(getGroupItems); GroupItems.ItemsSource = Items; } } } IsWorking = false ; return null ; } }; loadDataAsync(); } private async Task loadDataAsync() { IsWorking = true ; var items = await DataItems.GetItemsAsync(pageIndex: 0, pageSize: PageSize); var groupItems = items.GroupBy(e => e.Title).Select(e => new ObservableGroupCollection string , Items>(e)).ToList(); Items.AddRange(groupItems); OnPropertyChanged( "Items" ); GroupItems.ItemsSource = Items; IsWorking = false ; } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null ) { PropertyChanged?.Invoke( this , new PropertyChangedEventArgs(propertyName)); } public class ObservableGroupCollection : ObservableCollection { private readonly K _header; public ObservableGroupCollection(IGrouping group) : base (group) { _header = group.Key; } public K Header { get { return _header; } } } Next, go to MainPage.xaml and configure this “SingleViewList” and “GroupViewList” page as children of Tabbed Page. Code is given below XAML Code: "1.0" encoding= "utf-8" ?> "http://xamarin.com/schemas/2014/forms" xmlns:x= "http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d= "http://xamarin.com/schemas/2014/forms/design" xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable= "d" Title= "XF Infinite Scroll" xmlns:views= "clr-namespace:XFInfiniteScroll.Views" x:Class= "XFInfiniteScroll.MainPage" > "Single Items" > "Group Items" > Now, run your Xamarin. Forms project by clicking run or F5 and you will get output like below.

Nimish Saxena · Answer

Scrolling video like tiktok.but need to scroll is infinite in Carousel view

Rajanikant Hawaldar · Answer

explain in details what your looking for

Infinite Scroll in Carousel view in Xamarin forms?

Answers (5)