How to share items source among Xamarin.Forms ListView?
You can programmatically split the collections of items among Xamarin.Forms ListView 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
Conclusion
I hope you enjoyed learning about how to share items source among Xamarin.Forms ListView with carousel page.
You can refer to our Xamarin.Forms ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
