Cells in Xamarin.Forms

Xamarin.Forms cell can be added to ListViews and TableViews. A cell is a specialized element which is used for items in a table and describes how the elements in a list should be rendered. The Cell class is driven from Element, from which we can derive VisualElements. A cell itself is not a visual element. It is a template for creating the visual element. The cell is used exclusively with ListView and TableView control.

Here are the types of cell:

TextCell
SwitchCell
EntryCell
ImageCell
ViewCell

TextCell

TextCell is a cell that has two separate text areas for displaying the data. TextCell is typically used for the purpose of the information in both TableView and ListView controls. The two text areas are aligned vertically to maximize the space within the cell.

Here we want to show the contact details of a person with the help of TextCell in the ListView.

These are the steps that we follow to show the contact details of the person in TextCell.

Example:

In this example, we are creating TextCell in ListView to show the ContactDetail of a person.

// Program

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"
             xmlns:local="clr-namespace:XamarinCells"
             x:Class="XamarinCells.MainPage">
    <StackLayout>
        <Label Text="Contacts Detail" FontSize="Medium" TextColor="Maroon" HorizontalOptions="Center"></Label>
         <ListView x:Name="Mylist">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Name}" Detail="{Binding Address}"></TextCell>
                    <!--here we bind the Text and Detail of the person in the TextCell-->
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

</ContentPage>

Here, we create a class, which is Data.CS, where we create the data.

Data.CS

using System;
using System.Collections.Generic;
using System.Text;

namespace XamarinCells
{
    public class Data
    {
        public string Name { get; set; }
        public string Address { get; set; }
    }
}

On the coding page of the MainPage.Xaml.CS, we create a list of the data, where we provide the information of the person, and then show the information of the object (people) in the TextCell with the help of ListView.

MainPage.Xaml.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XamarinCells
{
    public partial class MainPage : ContentPage
    {
        public List<Data> people = new List<Data>()
        {
            new Data{Name="Ayesha Tyagi", Address="A-27, defence colony, delhi,11024"},
            new Data{Name="Vaishali Tyagi", Address="E-377, Sec 16,Noida ,201301"},
        };
        public MainPage()
        {
            InitializeComponent();
            Mylist.ItemsSource = people;
        }
    }
}

Execute this program, click on the emulator.

Output:

This print the ContactDetail of the Ayesha Tyagi and Vaishali Tyagi

SwitchCell

SwitchCell is a cell that combines the capabilities of a label and an on-off switch. A SwitchCell can be useful for turning on and off the functionality or user preference or configuration options.

Example:

In this example, we are creating a SwitchCell to show the text and functionality of the Switch.

//Program

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"
             xmlns:local="clr-namespace:XamarinCells"
             x:Class="XamarinCells.MainPage">
  
    <ContentPage.Content>
        <StackLayout Padding="10">
            <StackLayout Orientation="Horizontal">
                <Label Text="SwitchCell"></Label>
                <Label Text="{Binding IsToggled, Source={x:Reference Switch}}" TextColor="Black" VerticalOptions="Center" HorizontalOptions="EndAndExpand"></Label>
                <Switch x:Name="Switch" VerticalOptions="Start"></Switch>
                
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>

</ContentPage>

Output:

EntryCell

EntryCell is a cell that combines the capabilities of a Label and Entry. The EntryCell can be useful in those scenarios when we build some functionality in our application to gather the data from the user. They can be easily placed into a TableView and can be treated as simple form.

Example:

Here, we create EntryCell with TableView in Xamarin.Forms application for Android and Universal Window Platform with Xaml in cross-platform application development.

For that, we have to set up the environment for the Cross-Platform application.

Here, we will follow the following steps:

Step1: Right, Click on Project Name, as shown in the Screenshot.

Step2: Click on the Properties, as shown in the screenshot.

Step3; Check the multiple startup project radio button-> click on apply->click ok.

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"
             xmlns:local="clr-namespace:XamarinCells"
             x:Class="XamarinCells.MainPage">
  
    <ContentPage.Content>
       
        <StackLayout>
            <Label Text="Xamarin Form Entry Cell Demo in Android and UWP " VerticalOptions="Center" HorizontalOptions="Center" />
            <TableView Intent="Form">
                <TableRoot>
                    <TableSection Title="Application Form">
                        <EntryCell Label="Name:" HorizontalTextAlignment="Start" LabelColor="Black" Placeholder="Enter Your First Name Here" />
                        <EntryCell Label="Age :" LabelColor="Black" Placeholder="Enter Your Age Here" />
                        <EntryCell Label="Specialization :" LabelColor="Black" Placeholder="Enter Your Specialization Here" />
                    </TableSection>
                </TableRoot>
            </TableView>
        </StackLayout>
    </ContentPage.Content>

</ContentPage>

Execute this program, click on the emulator.

Output:

In Android

Here, in the output, this prints the information of a person in the EntryCell in TableView in Android.

Output:

In Windows

ImageCell

ImageCell objects are used to place the images and text into a table. ImageCell control the functions similarly to a normal page control.

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"
             xmlns:local="clr-namespace:Label"
             x:Class="Label.MainPage" 
              Title="Editor Page-XAML">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
// In the source we have to give the name of the image file.
            <Image Source="nature.jpg"></Image>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Execute this program, click on the emulator.

Output:

ViewCell

We can consider the ViewCell as a blank slate. It is our personal canvas to create a cell that looks exactly the way that we want.

With the help of ViewCell, we can do customization of the forms.

Example:

Here, we create a page in the ViewCell with the help of ListView.

//Program

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"
             xmlns:local="clr-namespace:XamarinCells"
             x:Class="XamarinCells.MainPage">
    <StackLayout>
        <Label Text="Contacts Detail" FontSize="Medium" TextColor="Maroon" HorizontalOptions="Center"></Label>
         <ListView x:Name="Mylist">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <!--<ImageCell Text="{Binding Name}" Detail="{Binding Address}" ImageSource="{Binding Image}"></ImageCell>-->
                    <!--here we bind the Text and Detail of the person in the TextCell-->
                    <ViewCell>
                        <!--take ViewCell to customize the page-->
                        <StackLayout Orientation="Horizontal">
                            <Grid BackgroundColor="Maroon" Padding="10">
                                
                                <!--with the help of grid we will show the id(sequences of the items) set the padding property-->
                                <Label Text="{Binding Id}" TextColor="White"></Label>
                                <!--Binding Id bind the id--> 
                            </Grid>
                            <StackLayout Orientation="Vertical">
                                <!--create another stacklayout-->
                                <Label Text="{Binding Name}" TextColor="Maroon"></Label>
                                <!--create label to bind the name and address-->
                                <Label Text="{Binding Address}" TextColor="Purple"></Label>
                            </StackLayout>
                            
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

</ContentPage>

Class is created where we define the Variable name of items, which we want to show on the page.

//Program

Data.CS

using System;
Using System.Collections.Generic;
Using System.Text;

namespace XamarinCells
{
    public class Data
    {
        public string Name { get; set; }
        public string Address { get; set; }
        //public string Image { get; set; }
        public int Id { get; set; }
    
    }
}

On the coding page of the MainPage.Xaml, we create a list of items with id.

//Program

using System;
using System.Collections.Generic;
using System. Linq;
using System. Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XamarinCells
{
    public partial class MainPage : ContentPage
    {
        public List<Data> people = new List<Data>()
        {
            new Data{Name="Ayesha Tyagi", Address="A-27, defence colony, delhi,11024",Id=1},
            new Data{Name="Vaishali Tyagi", Address="E-377, Sec 16,Noida ,201301",Id=2},
        };
        public MainPage()
        {
            InitializeComponent();
            Mylist.ItemsSource = people;
        }
    }
}

Execute this program, click on the emulator.

Output: