Xamarin Forms creating ListView with Custom Layout:
ListView is an important control of our app. It can be used for displaying static or dynamic data from database or APIs. Xamarin forms ListView supports custom layout for displaying complicated set data. We can create ItemTemplate for our ListView control and display data using ObservableCollection of a model class. In this example we will create a ListView to display product information with its price and a image for each product. For displaying product data on listview we will use a Model class. Create a Model class in your project with name Products.cs and edit it as below:
Products.cs:
namespace XamSample.Models
{
public class Products
{
public string productName { get; set; }
public string productPrice { get; set; }
public string productImage { get; set; }
}
}
This class will be used for creating a ObservableCollection and adding up data to our control. Now edit your xaml design page as below:
MainPage.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamSample.MainPage"
Title="XamarinForms ListView Example">
<StackLayout HorizontalOptions="Center" VerticalOptions="FillAndExpand" Padding="10">
<ListView x:Name="lstProducts" HorizontalOptions="StartAndExpand" VerticalOptions="FillAndExpand"
SeparatorColor="LightGray" SeparatorVisibility="Default" HasUnevenRows="True"
ItemTapped="LstProducts_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="5" VerticalOptions="FillAndExpand"
MinimumHeightRequest="100">
<Image Source="{Binding productImage}" WidthRequest="70" HeightRequest="70"/>
<StackLayout Orientation="Vertical" Padding="2" VerticalOptions="Center">
<Label Text="{Binding productName}" FontSize="20" Margin="2" TextColor="Black" FontAttributes="Bold"/>
<Label Text="{Binding productPrice}" FontSize="16" Margin="2" TextColor="#eb3443"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
This page only contains a ListView for displaying list of products. On selecting any the items we will display data of selected item on a DisplayAlert control.
Edit the code-behind class of MainPage.xaml as below:
MainPage.xaml.cs:
using System;
using System.Collections.ObjectModel;
using Xamarin.Forms;
using XamSample.Models;
namespace XamSample
{
public partial class MainPage : ContentPage
{
ObservableCollection<Products> obProducts;
public MainPage()
{
InitializeComponent();
AddProducts();
lstProducts.ItemsSource = obProducts;
}
public void AddProducts()
{
try
{
obProducts = new ObservableCollection<Products>();
obProducts.Add(new Products
{
productImage = "https://images-na.ssl-images-amazon.com/images/I/813y2%2BdPUOL._AC_SL1500_.jpg",
productName = "Samsung Note 20 5G Ultra",
productPrice = "$1099"
});
obProducts.Add(new Products
{
productImage = "https://m.media-amazon.com/images/I/71sNNCTfMuL._FMwebp__.jpg",
productName = "Apple iPhone 12 mini",
productPrice = "$699"
});
obProducts.Add(new Products
{
productImage = "https://images-na.ssl-images-amazon.com/images/I/61v0enHOXpL._AC_SL1500_.jpg",
productName = "Google Pixel 2 64 GB",
productPrice = "$117"
});
obProducts.Add(new Products
{
productImage = "https://images-na.ssl-images-amazon.com/images/I/71MHTD3uL4L._SL1500_.jpg",
productName = "iPhone 12 Pro Max",
productPrice = "$1200"
});
obProducts.Add(new Products
{
productImage = "https://images-na.ssl-images-amazon.com/images/I/71OYLm6srFL._SL1500_.jpg",
productName = "Samsung Galaxy S20 FE",
productPrice = "$600"
});
obProducts.Add(new Products
{
productImage = "https://images-na.ssl-images-amazon.com/images/I/813y2%2BdPUOL._AC_SL1500_.jpg",
productName = "Samsung Note 20 5G Ultra",
productPrice = "$1099"
});
obProducts.Add(new Products
{
productImage = "https://images-na.ssl-images-amazon.com/images/I/813y2%2BdPUOL._AC_SL1500_.jpg",
productName = "Samsung Note 20 5G Ultra",
productPrice = "$1099"
});
obProducts.Add(new Products
{
productImage = "https://images-na.ssl-images-amazon.com/images/I/410mmBW-AYL._AC_.jpg",
productName = "OnePlus 8 Pro 5G",
productPrice = "$924"
});
obProducts.Add(new Products
{
productImage = "https://images-na.ssl-images-amazon.com/images/I/71valQo5u5L._AC_SL1500_.jpg",
productName = "Samsung Galaxy A01",
productPrice = "$121.76"
});
obProducts.Add(new Products
{
productImage = "https://images-na.ssl-images-amazon.com/images/I/61sLvszoETL._AC_SL1500_.jpg",
productName = "Nokia 2.4 Android 10",
productPrice = "$1099"
});
}
catch (Exception ex)
{
}
}
private async void LstProducts_ItemTapped(object sender, ItemTappedEventArgs e)
{
try
{
var selectedProduct = (Products) e.Item;
await DisplayAlert("You selected", selectedProduct.productName, "Buy", "Cancel");
}
catch(Exception ex)
{
await DisplayAlert("Error", ex.Message.ToString(), "Ok");
}
lstProducts.SelectedItem = null;
}
}
}
The AddProducts() method is being called after InitializeComponent() method and it will fill up the data in ObservableCollection<Products> obProducts. Then we are using it to set ItemSource of our ListView control. On ItemTapped method will be called on selecting any of the item from the ListView and corresponding product data will be parsed.
When you run this example, you will get Xamarin forms ListView with below design and also data will be displayed on displayAlert for any selected item from the ListView:
Also see:
Xamarin forms Creating Action Sheets
Xamarin forms MVVM Binding CommandParameter to Command
Xamarin forms SQLite database – Performing CRUD operations
Xamarin forms creating and using SQLite database
Xamarin forms using Google Maps
Xamarin forms using Camera – saving Images to Gallery
Xamarin Forms MVVM ListView ItemSource Binding