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

Read the previous parts of the series here,

• Quick Start Tutorial: Creating Universal Apps Via Xamarin - Part One
• Quick Start Tutorial: Creating Universal Apps Via Xamarin - Part Two
• Quick Start Tutorial: Creating Universal Apps via Xamarin: Label and Button - Part Three
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Device class - Part Four
• Quick Start Tutorial: Creating Universal Apps via Xamarin: Device Class (cont.) - Part Five
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Entry Control - Part Six
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: StackLayout and Layout Options - Part Seven
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: DisplayAlert and DisplayActionSheet - Part Eight
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Date Picker, Time Picker and Activity Indicator - Part Nine
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: XAML And Resource Dictionary - Part Ten
• Quick Start Tutorial: Creating Universal Apps via Xamarin: Style in XAML - Part Eleven
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Style in XAML (Cont.) - Part Twelve
  
• Quick Start tutorial: Creating Universal Apps via Xamarin: Binding in Xaml-Part Thirteen
• Quick Start tutorial: Creating Universal Apps via Xamarin: IValueConverter in Xaml-Part Fourteen
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Picker Control Xaml - Part 15
  

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:



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

<TableView>
    <TableRoot Title="Xamarin TableView">
        <TableSection Title="Section1">
            <SwitchCell Text="Do you like this" /> </TableSection>
        <TableSection Title="Section2">
            <SwitchCell Text="Perfect C#" /> </TableSection>
    </TableRoot>
</TableView>

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,



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.



Select the Xamain.Forms -> Click 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.

private void CellEnable_OnOnChanged(object sender, ToggledEventArgs e)
{
    LoadCourseInfo(TableSection.BEnalble);
}
private void LoadCourseInfo(bool loadPg) {
    PickerCourse.Items.Clear();
    if (loadPg) {
        PickerCourse.Title = "PG Course";
        PickerCourse.Items.Add("M.Tech");
        PickerCourse.Items.Add("MCA");
        PickerCourse.Items.Add("MBA");
    } else {
        PickerCourse.Title = "UG Course";
        PickerCourse.Items.Add("B.Tech");
        PickerCourse.Items.Add("BE");
        PickerCourse.Items.Add("BSc");
    }
    PickerCourse.SelectedIndex = 0;
}

Complete source is available here GitHub.