Category / Section
How to share items source among Xamarin.Forms ListView with carousel page (SfListView)
2 mins read
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
