Infinite Scroll in Carousel view in Xamarin forms?

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 InfiniteScrollCollectionstring, Items>> Items;
public bool IsWorking
{
get; set;
}
public GroupViewList()
{
InitializeComponent();
Items = new InfiniteScrollCollectionstring, 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.

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mageshwaran R5y ago
Hi Nimish,
Try this link,It may help you

https://stackoverflow.com/questions/58366576/how-can-i-creat-endless-scrolling-in-xamarin
Nimish Saxena5y ago
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 Hawaldar5y ago
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 InfiniteScrollCollectionstring, Items>> Items;
public bool IsWorking
{
    get; set;
}

public GroupViewList()
{
    InitializeComponent();
    Items = new InfiniteScrollCollectionstring, 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 Saxena5y ago
Scrolling video like tiktok.but need to scroll is infinite in Carousel view
Rajanikant Hawaldar5y ago
explain in details what your looking for