Practical Guide For ListView Cells In Xamarin.Forms

In this article, you will learn about cells used in ListView in Xamarin.Forms.

This article will cover the following things about List View.

1. Introduction to ListView
2. Create a Basic ListView
3. Binding & Cells

• Text Cell
• Image Cell
• View Cell

Target Audience

People with basic knowledge of C# and XAML.

Introduction to ListView

ListView is used to present data in list, especially long lists that require scrolling.

You all are already familiar with list as you are using list of contacts daily in your mobile phone. Other examples include your messaging inbox that contains a list of messages. Let’s implement this.

Create a Basic ListView

In our mobile application, we can implement list by gathering data from remote API or by some database. But in this example, we will make a sample hard code list of data and implement it. Now, start creating a basic ListView. The necessary code is given.

XAML

<ListView x:Name="lst"></ListView>

 Code

lst.ItemsSource = new List<string>() { "item 1", "item 2", "Item 3" };

Output on Windows and Android

Binding & Cells

Now, make a complete list and bind its elements. Firstly, we make a class and then bind its properties with ListView.

Add a new class.

public class Contacts {
    public string Name {
        get;
        set;
    }
    public string Num {
        get;
        set;
    }
    public string imgsource {
        get;
        set;
    }
}

For just practicing purposes, make a class of contacts and define three properties of Name, Num, and imgsource as shown above in the code.

Then, go to code file, add some data, and change item source of ListView. 

lst.ItemsSource = new List < Contacts > () {
    new Contacts() {
            Name = "Umair", Num = "0456445450945", imgsource = "http://bit.ly/2oDQpPT",
        },
        new Contacts() {
            Name = "Cat", Num = "034456445905", imgsource = "http://gtty.im/2psFEos",
        },
        new Contacts() {
            Name = "Nature", Num = "56445905", imgsource = "http://gtty.im/2psFEos",
        },
};

As we discussed earlier, there are three types of cells in ListView. Now, let's discuss these three cells and perform some data binding.

TextCell

TextCell is the data template of ListView. In this cell, we can set text and details. Other properties of TextCell include text color, detail color etc.

XAML 

<ListView x:Name="lst">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Name}" Detail="{Binding Num}"></TextCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Here, you can see that we used the TextCell and set binding. We set Binding of ‘Text’ with ‘Name’ and we binded the ‘detail’ with ‘Num’ property of contact class.

Output on Android and Windows

This is how TextCell is shown on Android and Windows. It will show some text and its details.

ImageCell

Now, let's use an ImageCell. ImageCell is a cell that contains images in it. ImageCell includes ImageSource, Text, and Details.

XAML 

<ListView x:Name="lst">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ImageCell Text="{Binding Name}" Detail="{Binding Num}" ImageSource="{Binding imgsource}"></ImageCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Here, you can see that we used the ImageCell and set Binding. We set Binding of ‘Text’ with ‘Name’, ‘detail’ with ‘Num’ and ‘ImageSource’ with ‘imgsource’ property of contact class.

Output on Android and Windows

This template looks cool on all mobile phone devices. But the List looks weird on a Windows desktop and there is no way to set image height in ImageCell. You have to make your own custom cell to overcome this problem. Let’s discuss how to make a custom cell (ViewCell). Read the points blow.

ViewCell

ViewCell is the third cell that we use in list. In ViewCell, we can make a custom View of list. That is the View made according to our desire. Let’s go through its example.

XAML 

<ListView x:Name="lst" HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal">
                    <StackLayout Orientation="Vertical">
                        <Label Text="{Binding Name}" Font="18"></Label>
                        <Label Text="{Binding Num}" TextColor="Gray"></Label> </StackLayout>
                    <Image Source="{Binding imgsource}" HeightRequest="30" WidthRequest="50" HorizontalOptions="EndAndExpand"></Image>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Here, you can see that we made two stack layouts with different orientation to make our ViewCell different. We can also set its color, height, width, and other options to make it better. 

Output on Android and Windows

Now, give it a try and make your own custom ViewCell.

Thanks for reading.