We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to share items source among Xamarin.Forms ListView with carousel page (SfListView)

Platform: Xamarin.Forms |
Control: SfListView |
Published Date: July 24, 2020 |
Last Revised Date: July 27, 2020

You can programmatically split the collections of items among Xamarin.Forms SfListView loaded in CarouselPage.

XAML

Define CarouselPage and load the ListViewPage to CarouselPage.ItemTemplate.

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:ListViewXamarin"
              x:Class="ListViewXamarin.ListViewCarousel">
    <CarouselPage.ItemTemplate>
        <DataTemplate>
            <local:ListViewPage/>
        </DataTemplate>
    </CarouselPage.ItemTemplate>
</CarouselPage>

XAML

SfListView is defined in the ListViewPage with the binding value of (.)

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="ListViewXamarin.ListViewPage">
  <ContentPage.Content>
        <StackLayout>
            <syncfusion:SfListView x:Name="listView" ItemSize="100" ItemsSource="{Binding .}">
                <syncfusion:SfListView.LayoutManager>
                    <syncfusion:GridLayout SpanCount="3"/>
                </syncfusion:SfListView.LayoutManager>
                <syncfusion:SfListView.ItemTemplate >
                    <DataTemplate>
                        <Grid x:Name="grid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.3*" />
                                <ColumnDefinition Width="0.7*" />
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/>
                            <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center">
                                <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/>
                                <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/>
                            </Grid>
                        </Grid>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

C#

In the OnSizeAllocated override, send page height to the ViewModel class to determine the items count to split the ItemsSource for the CarouselPage.

public partial class ListViewCarousel : CarouselPage
{
    PagesViewModel pagesViewModel;
 
    public ListViewCarousel()
    {
        InitializeComponent();
    }
 
    protected override void OnSizeAllocated(double width, double height)
    {
        if (height > 0 && BindingContext == null)
        {
            pagesViewModel = new PagesViewModel(height);
            BindingContext = pagesViewModel;
            ItemsSource = pagesViewModel.CarouselPages;
        }
        base.OnSizeAllocated(width, height);
    }
}

C#

In carousel PagesViewModel, ItemsPerPage count is determined by ItemSize and SpanCount which determines the number of pages based on the Items count. PagesViewModel defines the collection for each page and adds it to the collection that is bound to the SfListView.ItemsSource.

public class PagesViewModel
{
    public ObservableCollection<List<Contacts>> CarouselPages { get; set; }
 
    public PagesViewModel(double height)
    {
        int j = 0;
        int itemsPerPage = (int)(height / 100) * 3;
        int temp = itemsPerPage;
        CarouselPages = new ObservableCollection<List<Contacts>>();
        var contactsviewmodel = new ContactsViewModel();
          
        var pageCount = Math.Ceiling((double)contactsviewmodel.ContactsInfo.Count / itemsPerPage);
 
        for (int i = 0; i < pageCount; i++)
        {
            var source = contactsviewmodel.ContactsInfo.Skip(j).Take(temp);
            var items = source.AsEnumerable().ToList();
            CarouselPages.Add(items);
            j += itemsPerPage;
        }
    }
}

Output

Demo image to split the ItemsSource for SfListView with CarouselPage.

View sample in GitHub

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile