Quick Start Tutorial: Creating Universal Apps Via Xamarin: TableView - Part Sixteen

Read the previous parts of the series here,

TableView is used to display the group of the items in Xamarin forms. TableView contains only the cell. To each cell, we can assign a different type of the cell format.

TableView structure is given below:

structure

Note: TableView does not contain the row and column relationship.

Each cell is added into the TableSection and TableSection is added into the TableRoot. Finally TableRoot is added into the TableView.

Cell is a built in template. It represents a different control. Built in templates are available, which are given below: 
  1. Entry Cell
  2. Switch Cell
  3. Text Cell
  4. Image Cell

TableSection

Table section is differentiating different sections like in the form, it differentiates the personal information and educational information.

Properties

  1. Title
  2. BindingContext
  3. RowHeight

Title properties are used to set the title of the section.

RowHeight: It sets the row heights of the property.

Table Root: This is root node for the tableview. All the tablesections must be added into the TableRoot.

Properties

  1. Title
  2. BindingContext

Title: This property sets the overall title of the TableView.

Sample code

  1. <TableView>  
  2.     <TableRoot Title="Xamarin TableView">  
  3.         <TableSection Title="Section1">  
  4.             <SwitchCell Text="Do you like this" /> </TableSection>  
  5.         <TableSection Title="Section2">  
  6.             <SwitchCell Text="Perfect C#" /> </TableSection>  
  7.     </TableRoot>  
  8. </TableView>  
output

Note: Title property is set for only Universal Windows Program.

Intent: Intent property is used to hint at the purpose of the TableView. This property is optional.

Types,

Types

Settings: A table contains the switch and other configuration settings controls.

Data: Display similar items (Xamarin is highly recommended. Instead of the data, use the list view. Later, we will see listview).

Form: It contains forms of data like Registration form.

Menu: Table is used for the selection of items.

Note: TableView does not contain the itemSource element.

SwitchCell:This control is used to enable or disable the option

Properties

On: This property indicates true or false value.
Text: Sets the caption of the control.
OnChange: This event will trigger whenever the enable or disable option is done.

Note: Default installation of Xamarin OnChange event will not work in UWP programming. You have to update Xamarin Forms.

NuGet Package Manager update.

Go to Tools -> NuGet Package Manager -> Manage NuGet Packages for the solution.

 NuGet Package Manager

Select the Xamain.Forms -> Click Install update.

Install update

Example

This example enables “Are you postgraduate.” It loads PG course in the Picker control and disables when it loads the UG course information.
  1. private void CellEnable_OnOnChanged(object sender, ToggledEventArgs e)  
  2. {  
  3.     LoadCourseInfo(TableSection.BEnalble);  
  4. }  
  5. private void LoadCourseInfo(bool loadPg) {  
  6.     PickerCourse.Items.Clear();  
  7.     if (loadPg) {  
  8.         PickerCourse.Title = "PG Course";  
  9.         PickerCourse.Items.Add("M.Tech");  
  10.         PickerCourse.Items.Add("MCA");  
  11.         PickerCourse.Items.Add("MBA");  
  12.     } else {  
  13.         PickerCourse.Title = "UG Course";  
  14.         PickerCourse.Items.Add("B.Tech");  
  15.         PickerCourse.Items.Add("BE");  
  16.         PickerCourse.Items.Add("BSc");  
  17.     }  
  18.     PickerCourse.SelectedIndex = 0;  
  19. }  
output

Complete source is available here GitHub.

Up Next
    Ebook Download
    View all
    Learn
    View all