TableView In Xamarin.Forms Application For Android And UWP

TableView is a view, which is required to display scrolling lists of the data or choices, where there are rows that don't share the same template. Unlike ListView, TableView does not have the concept of an ItemsSource, so the items must be added as children manually.

Before reading this article, please go through the article How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform

After reading this article, you will learn how to add Table View in Xamarin Forms Application for an Android and Universal Windows Platform with XAML and Visual C# in cross platform application development.

The important tools are given below, which are required to develop UWP.

Windows 10 (Recommended).
Visual Studio 2015 Community Edition (It is a free software available online).
Using Visual Studio 2015 Installer, enable Xamarin (Cross Platform Mobile development and C#/.NET, while installing/modifying Visual Studio 2015.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2015 -> Start -> New Project-> Select Cross-Platform (under Visual C#-> Blank app (Xamarin.Forms Portable)-> Give the suitable name for your app (XamFormTableView) ->OK.

XAML

Step 2

Now, create project “XamFormTableView_Droid”.

XAML

Choose the Target and minimum platform version for your Universal Windows Project.

XAML

Create project “XamFormTableView_UWP”.

XAML

Step 3

Afterwards, Visual Studio creates 6 projects and displays Getting Started.XamarinPage. Now, we have to update Xamarin forms Reference for the Portable Project and XamFormTableView_Droid project.

(Please refer How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform)

Step 4

Add a XAML page for TableView Demo. Right click XamFormTableView(Portable) project. Select ADD-> NewItem and select ->CrossPlatform-> FormXamlPage-> Give the relevant name.

XAML

Step 5

Add TableView, TableRoot, TableSection, TextCell Tag and two Labels in TableViewDemo.xaml.

<StackLayout VerticalOptions="Center" Orientation="Vertical" HorizontalOptions="Center">
<Label x:Name="lblTitle" Text="Table View in Xamarin Forms - UWP and Android Demo" Font="Large" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
<Label x:Name="lblsubTitle" Text="User Details" Font="Large" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
<TableView Intent="Data">
<TableRoot>
<TableSection Title="User 1 :">
<TextCell Text="Name : Raghul" />
<TextCell Text="Email : [email protected]" TextColor="Red" />
<TextCell Text="Phone No : 12345679" />
</TableSection>
<TableSection Title="User 2">
<TextCell Text="Name : Kannan" />
<TextCell Text="Email : [email protected]" TextColor="Green" />
<TextCell Text="Phone No : 12345679" />
</TableSection>
<TableSection Title="User 3 :">
<TextCell Text="Name : Kamal" />
<TextCell Text="Email : [email protected]" TextColor="Blue" />
<TextCell Text="Phone No : 12345679" />
</TableSection>
<TableSection Title="User 4 :">
<TextCell Text="Name : Deeran" />
<TextCell Text="Email : [email protected]" TextColor="Aqua" />
<TextCell Text="Phone No : 12345679" />
</TableSection>
</TableRoot>
</TableView>
</StackLayout>

Step 6

Open (double click) the file App.cs in the Solution Explorer-> XamFormTableView(portable) and set the Root page.

XAML

Step 7

We will test an Android and UWP. Thus, we can set the multiple Startup Projects as XamFormTableView.Droid and XamFormTableView.UWP (Universal Windows).

XAML

Step 8

Change the Configuration Manager settings and go to Build -> Configuration Manager.

Uncheck all the build and deploy options to iOS, Windows, WinPhone. Check the Droid and UWP

XAML

Step 9

Deploy your app in the local machine and the output of the XamFormTableView app is given below.

XAML

Summary

Now, you have successfully created and tested TableView in Xamarin.Forms Application for cross platform application development, using Visual C# and Xamarin.