Syncfusion’s Xamarin.Forms List View component is used to display a list of data in a predefined or customized view. It offers high performance when bound with commonly used data sources. Data can be grouped, sorted, and filtered with ease. Key features include different layouts, item templating, swiping, horizontal orientation, item drag and drop, sticky headers and footers, and selection with different modes and gestures.
This blog post will explore the advantages of the Syncfusion list view component over the Xamarin.Forms framework list view, and then show how easy it is to get started with the Syncfusion list view.
The Syncfusion list view will make your development easier with its rich set of features and functionalities. The following are some feature advantages the Syncfusion list view has over the Xamarin.Forms framework list view.
Besides these, the Syncfusion list view component for Xamarin.Forms supports all the other features in the Xamarin.Forms framework list view, such as grouping, autofitting items, pull to refresh, data binding to various item sources, custom sorting, custom grouping, item size customization, and more.
Next, we will take a quick look at getting started with the Syncfusion list view component for Xamarin.Forms and walk through the process of creating a real-world scenario for it. These are the steps to get started:
First, create a Xamarin.Forms project and add the Syncfusion.Xamarin.SfListView NuGet package to the solution to install the necessary package and renderer assemblies for each platform.
Create a new cross-platform project as follows:
A new window will appear. Here, select the Blank App template, the Xamarin.Forms option under UI Technology, and Portable Class Library (PCL) under Code Sharing Strategy.
After creating the project, we need to add the NuGet packages. Right-click the project name in Solution Explorer and select Manage NuGet Packages. Search for Syncfusion.Xamarin.SfListView, and then install it.
The list view component is entirely configurable in both XAML and code behind. Import the SfListView control namespace in your XAML page and add the SfListView control to the ContentPage or as a nested child based on your requirements.
<?xml version="1.0" encoding="utf-8" ?> <ContentPage >="http://xamarin.com/schemas/2014/forms" >:x="http://schemas.microsoft.com/winfx/2009/xaml" >:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" >:local="clr-namespace:SfListViewApp" x:Class=" SfListViewApp.MainPage"> <syncfusion:SfListView x:Name="listView" /> </ContentPage>
In Android, the list view will be launched without any further initialization. An additional step is required for launching the list view in iOS and UWP.
After the Xamarin.Forms framework initializes and before LoadApplication is called, call the SfListViewRenderer.Init() method in the FinishedLaunching overridden method of the AppDelegate class, as demonstrated in the following code example.
public override bool FinishedLaunching(UIApplication app, NSDictionary options) { ... Xamarin.Forms.Forms.Init(); Syncfusion.ListView.XForms.iOS.SfListViewRenderer.Init(); LoadApplication(new App()); ... }
Call the SfListViewRenderer.Init() method in the MainPage constructor before LoadApplication is called, as demonstrated in the following code example.
public MainPage() { ... Syncfusion.ListView.XForms.UWP.SfListViewRenderer.Init(); LoadApplication(new App()); ... }
For UWP, one additional step is required if the project is built in release mode with the .NET Native tool chain enabled because reflection is used internally for sorting, grouping, and filtering features in the DataSource class. However, the issue can be solved at the application level by adding the following directives in the Default.rd.xml file in the application of the UWP project.
<Directives >="http://schemas.microsoft.com/netfx/2013/01/metadata"> <Library Name="Syncfusion.DataSource.Portable"> <Type Name="System.Linq.EnumerableExecutor{System.Int32}" Dynamic="Required Public" /> <Type Name="System.Collections.ObjectModel.ObservableCollection{}" Dynamic="Required Public" /> <Namespace Name="System.Linq" Dynamic="Required All" /> </Library> </Directives>
List view is a data-bound control. Therefore, you must create a data model to bind to it.
In our example, a simple shopping category has been modeled that generates a list of shopping categories with a description and image for each category. In a real-world scenario, you can also bind the data from services and databases to render the list view based on your requirements.
public class ListViewShoppingCategoryInfo : INotifyPropertyChanged { private string categoryName; private string categoryDesc; private ImageSource categoryImage; public string CategoryName { get { return categoryName; } set { categoryName = value; OnPropertyChanged("CategoryName"); } } public string CategoryDescription { get { return categoryDesc; } set { categoryDesc = value; OnPropertyChanged("CategoryDescription"); } } public ImageSource CategoryImage { get { return categoryImage; } set { categoryImage = value; OnPropertyChanged("CategoryImage"); } } public event PropertyChangedEventHandler PropertyChanged; private void OnPropertyChanged(string name) { if (this.PropertyChanged != null) this.PropertyChanged(this, new PropertyChangedEventArgs(name)); } }
public class ShoppingCategoryInfoRepository { internal ObservableCollection<ListViewShoppingCategoryInfo> GetCategoryInfo() { var categoryInfo = new ObservableCollection<ListViewShoppingCategoryInfo>(); for (int i = 0; i < CategoryNames.Count(); i++) { var info = new ListViewShoppingCategoryInfo() { CategoryName = CategoryNames[i], CategoryDescription = CategoryDescriptions[i], CategoryImage = ImageSource.FromResource("SfListViewApp.Icons." + CategoryNames[i] + ".jpg") }; categoryInfo.Add(info); } return categoryInfo; } string[] CategoryNames = new string[] { "Fashion", "Electronics", "Home & Kitchen", "Sports & Health", "Kids", "Books", "Footwear", "Mobile & Accessories", "Flower Gift Cakes", "Watches", "Jewelry", "Food", "Perfumes", "Movies & Music", "Cameras & Optics" }; string[] CategoryDescriptions = new string[] { "Latest fashion trends in online shopping for branded Shoes, Clothing, Dresses, Handbags, Watches, and Home Decor for Men & Women...", "Shop variety of electronics like Mobiles, Laptops, Tablets, Cameras, Gaming Consoles, TVs, LEDs, Music Systems, and much more...", "Purchase home & kitchen accessories like Cookware, Home Cleaning, Furniture, Dining Accessories, Showcase accessories, etc...", "Buy accessories for Badminton, Cricket, Football, Swimming, Sports shoes, Tennis, Gym, Volleyball, and Hockey at the lowest price...", "Shop for clothing for boys, girls, and babies. Explore the range of Tops, Tees, Jeans, Shirts, Trousers, Skirts, Body Suits...", "Purchase books across various categories at the lowest price. Read books online and download as PDF...", "Buy Footwear for Men, Women, and Kids, including Formal Shoes, Slippers, Casual Shoes, Sandals, and more at the best price...", "Buy branded Mobile Phones, Smartphones, Tablets, and Mobile Accessories like Headsets, Memory Cards, Chargers, Covers, etc...", "Buy different Flowers, Gifts, and Cakes online. Birthday Gifts, Anniversary Gifts, Mother’s Day Gifts, Flowers and Cakes etc...", "Latest range of trendy Digital Watches, Analog Watches, Digital Steel Watches, Digital LED Watches for Men and Women...", "Buy Jewelry for Men, Women, and Children from brands like Gitanjali, Tara, Orra, Sia Art Jewelry, Addons, Ayesha, Peora, etc...", "Shop from a wide range of best quality Fruits, Vegetables, Health Foods, Indian Grocery, Cereals, Noodles, Foods etc...", "Choose the best branded perfumes like Azzaro, Davidoff, CK, Axes, Good Morning, Hugo Boss, Jaguar, Calvin Klein, Antonio etc...", "Buy a variety of Movies & TV on Blu-ray in different languages, and Music in a variety of formats like audio CD, DVD, MP3, VCD, etc...", "Purchase a variety of cameras like Tamron, Sigma, Nikon, Sony, and Canon, and SLRs, Lenses, and Optics accessories at the best prices..." }; }
Configure the populated data or data from services or databases to a collection in the ViewModel. The collection can be any commonly preferred data source. I prefer ObservableCollection overall for its internal INotifyCollectionChanged implementation, as we generally expect the list view to be responsive. If collection changes are not a concern, then a generic List<T> can be used to hold the data, which is faster than the ObservableCollection.
public class ListViewViewModel { private ObservableCollection<ListViewShoppingCategoryInfo> categoryList; public ListViewViewModel() { GenerateSource(); } public ObservableCollection<ListViewShoppingCategoryInfo> CategoryList { get { return categoryList; } set { this.categoryList = value; } } private void GenerateSource() { ShoppingCategoryInfoRepository categoryinfo = new ShoppingCategoryInfoRepository(); categoryList = categoryinfo.GetCategoryInfo(); } }
To bind the data source to the list view, set the view model as the binding context of the page and bind the collection containing the data in your view model to the SfListView.ItemsSource property as shown in the following example.
<?xml version="1.0" encoding="utf-8" ?> <ContentPage >="http://xamarin.com/schemas/2014/forms" >:x="http://schemas.microsoft.com/winfx/2009/xaml" >:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" >:local="clr-namespace:SfListViewApp" x:Class=" SfListViewApp.MainPage"> < ContentPage.BindingContext> <local:ListViewGettingStartedViewModel/> </ContentPage.BindingContext> <syncfusion:SfListView x:Name="listView" ItemsSource="{Binding CategoryList}"/> </ContentPage>
By defining the SfListView.ItemTemplate of the list view, a custom user interface can be put in place to display the data items.
<syncfusion:SfListView x:Name="listView" ItemsSource="{Binding CategoryList}" ItemSize="160" > <syncfusion:SfListView.ItemTemplate> <DataTemplate> <Frame BackgroundColor="White" Padding="1"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.35*"/> <ColumnDefinition Width="0.65*"/> </Grid.ColumnDefinitions> <Image Source="{Binding CategoryImage}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/> <Grid Grid.Column="1" Padding="10,0,0,0"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Label Text="{Binding CategoryName}" FontSize="Medium" LineBreakMode="WordWrap" FontAttributes="Bold"/> <Label Grid.Row="1" Text="{Binding CategoryDescription}" LineBreakMode="WordWrap" FontSize="Small" /> </Grid> </Grid> </Frame> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView>
This completes configuring a simple list view in an application. Running the sample after following the previous steps will render a shopping category list in your view as shown in the following screenshot.
The complete sample can be downloaded here.
In this post, we have learned about creating and configuring the list view component with data, and the advantages of the Syncfusion List View component for Xamarin.Forms over the Xamarin.Forms framework list view. We hope you enjoyed the blog, and if you would like to try the list view component for yourself, download our trial setup, explore the demos for iOS, UWP, and Android, and peruse the documentation. If you have any questions, you can post them in our community forums or in our Direct-Trac support system.
If you like this blog post, we think you’ll also like the following free e-books: