ListView And Creating List In Xamarin

Intoduction

In this article we will learn about the ListView in Xamarin. List View is Used to display scrollable list of data. It supports context actions and data biding. We will also see how to add and remove items from the lists. At the end of the article you will have good knowledge about the Lists.

Targeted Audience

People with the basic knowledge of C# and Xamarin.

Tools

Visual Studio with Xamarin Installed.

Components

Cells
Data in ListView is presented in cells. Cells shows a row of data. There are built in cells but you can define custom cells too.

TextCell
Consists of two attributes “Text” and “Detail” to show string of text with a detail of text.

Image Cell
It displays an image with text. It appears as a TextCell with an image on the left side.

The picture below shows a list with a picture and three labels which are being added dynamically. Lets see how to do this.

First of all right click on your project and add a new folder “Models” to keep your classes separately.

Add a class name “Contacts” and add four properties like ‘Id’, ’name’, ’address’, ’image’ in it.

Use below code in the class

C# Code

public class Contacts
{
private int id;
public int Id
{
get { return id; }
set { id = value; }
}
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
private string address;
public string Address
{
get { return address; }
set { address = value; }
}
private string image;
public string Image
{
get { return image; }
set { image = value; }
}
}

After this go to your MainPage.xaml.cs and create a propfull with the name of MyList and don’t forget to make this as an “ObservableCollection”, it updates as the changes occurs. In the MainPage() function create the object of your List by initializing it. And add some items for the first time. For now I am adding 10 item by default for your learning purpose. Name the list in the Xaml and set the item source in C# as the MyList.

C# Code

private ObservableCollection<Contacts> myList;
public ObservableCollection<Contacts> MyList
{
get { return myList; }
set { myList = value; }
}
public MainPage()
{
InitializeComponent();
this.BindingContext = this;
MyList = new ObservableCollection<Contacts>();
for (int i = 1; i < 10; i++)
{
MyList.Add(new Contacts() { Id = i, Name = "Student" + i.ToString(), Address = "Address" + i.ToString(), Image = "usa.png" });
}
ContactsList.ItemsSource = MyList;
}

Now in XAML create a ListView and give the name to your ContentPage and bind this with the Item Source Of the List. In the header add two buttons to add and delete a item. After that put a tag <ListView.ItemTemplate> and create a <DataTemplate>. Data Template contains the data of the list. Put a ViewCell in it and add Three labels with a image. To add the image just simply copy it and paste outside to your UWP or Android project and add the reference to your tag. And bind each of them with the same name of the property in contacts class.

XAML Code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:PracApp1"
x:Class="PracApp1.MainPage"
x:Name="ContentPage1">
<ListView x:Name="ContactsList" ItemsSource="{Binding Source={x:Reference ContentPage1}, Path=BindingContext.MyList}" IsVisible="True">
<ListView.Header>
<StackLayout Orientation="Horizontal">
<Button Text="Add New" Clicked="Button_Clicked"></Button>
<Button x:Name="Delete" Text="Delete" Clicked="Delete_Clicked"></Button>
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Text="Delete Item" Clicked="MenuItem_Delete" CommandParameter="{Binding .}">
</MenuItem>
</ViewCell.ContextActions>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding Image}" HeightRequest="50" WidthRequest="50"></Image>
<Label Text="{Binding Id}"></Label>
<Label Text="{Binding Name}"></Label>
<Label Text="{Binding Address}"></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>

You can see an extra tag of <ViewCell.ContectActions>. it defines the action which will be perform by the item, in this case I put a delete item function on it which will delete the selected item.

As you can see in the picture the selected item is deleted.

C# Code

private void Button_Clicked(object sender, EventArgs e)
{
MyList.Add(new Contacts() { Id = 11, Name = "Student", Address = "Address", Image = "usa.png" });
}
private void Delete_Clicked(object sender, EventArgs e)
{
MyList.Remove(MyList.LastOrDefault());
}
private void MenuItem_Delete(object sender, EventArgs e)
{
var mi = sender as MenuItem;
MyList.Remove((Contacts)mi.CommandParameter);
}

If you click to add button a new item will be added to the list.

And if you click to the delete the last item will be delete from the list.

Summary

This Article tells you the basics about the ListView and gives you the introuduction about adding and deleting items from the List.

1 Comment

Join the conversation! Your thoughts help the community grow.

Larry Joseph4y ago
When you say "After this go to your MainPage.xaml.cs and create a propfull with the name of MyList and don’t forget to make this as an “ObservableCollection”," can you explain further how to create a propfull with the name of MyList. Thanks