Text Cell In Xamarin.Forms Application For Android And UWP

TextCell is a cell with primary text and secondary text.

Reading this article, you will learn how to use TextCell with Table View in Xamarin.Forms application for Android and Universal Windows Platform with XAML and Visual C#, in cross platform application development.

The following important tools are required for developing UWP,

  1. Windows 10 (Recommended)
  2. Visual Studio 2017 RC Community/Enterprise/Professional Edition (It is a Free trial software available online)
  3. Using Visual studio 2017 Installer, enable the feature of mobile development with .NET.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2017 RC and go to Start -> New Project-> Select Cross-Platform (under Visual C# -> Cross Platform App) -> Give a suitable name to your App (XamFormTextCell) ->OK.

 

Step 2

Select the Cross Platform template as Blank APP ->Set UI Technology as Forms and Sharing as PCL. Afterwards, Visual Studio creates 4 projects (Portable, Droid, iOS, UWP) and displays Getting Started.XamarinPage.

 

Step 3

In MainPage.Xaml page, add Label and TextCells in TableView.

  1. <Label Text="Xamarin Form Switch Cell Demo in Android and UWP " VerticalOptions="Center" HorizontalOptions="Center" />  
  2. <TableView Intent="Form">  
  3.     <TableRoot>  
  4.         <TableSection Title="Job and Its Description">  
  5.             <TextCell Text="Academic librarian" Detail="Academic librarians are responsible for acquiring, organising, managing and distributing library resources, and ensuring that library provision meets the needs of all its users." />  
  6.             <TextCell Text="Aeronautical engineer" Detail="Aeronautical engineers produce specifications for the design, development, manufacture, maintenance and modification of military and civil aircraft, aeronautical components and associated systems.Aeronautical engineers produce specifications for the design, development, manufacture, maintenance and modification of military and civil aircraft, aeronautical components and associated systems." />  
  7.             <TextCell Text="Electrical engineer" Detail="Electrical engineers are responsible for a part of, or the complete life cycle of, a new or modified electrical product or system – from research and design to development and installation." />  
  8.             <TextCell Text="Agricultural consultant" Detail="Agricultural consultants are specialist advisers who provide technical, commercial and financial advice and information to farming, agricultural and public sector staff." />  
  9.             <TextCell Text="Graphic designer" Detail="Working from agreed design briefs, graphic designers use text and images to communicate information and ideas." /> </TableSection>  
  10.     </TableRoot>  
  11. </TableView>  

 

 

Step 4

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

 

Step 5

Change the Configuration Manager settings.
Go to Build -> Configuration Manager, uncheck the "Build" and "Deploy" options for iOS, and check for Droid and UWP.
 


Step 6

Deploy your app on Android Emulator and Local Machine (UWP). The output of the XamFormTextCell App is -

 

Summary

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


Similar Articles