TableView in Xamarin.Forms

TableView is a control that displays a list similar to the ListView as rows in horizontal orientation but it can present the children added manually in a rich visualization.
In TableView, we can't load the content as a source like ListView (ItemSource), we have to add elements manually.

In this article, I will explain how we can use this control.

1- How to use TableView

  <StackLayout HorizontalOptions = "Center" VerticalOptions = "Center">
            <TableView >
                <TableView.Root>
                    <TableRoot>
                        <TableSection Title="TableView Overview">
                            <TextCell Text="Text cell" Detail="Details"/>
                            <EntryCell Placeholder="Could you introduce something !"/>
                            <SwitchCell  Text = "My Switch" />
                        </TableSection>
                    </TableRoot>
                </TableView.Root>
            </TableView>
</StackLayout>

2- Public property list of TableView

HasUnevenRows property

Gets or sets a value indicating whether it can have non-uniform rows.

By setting the HasUnevenRows property to True, the height will be automatically changed according to the contents of the TableView.

  <TableView HasUnevenRows="True" >

Intent property

Gets or sets the intent of the table.
By using the Intent property, you can change to a TableView that fits your purpose.

Data

A table intended to contain an arbitrary number of similar data entries.

Example in XAML:

 <StackLayout HorizontalOptions = "Center" VerticalOptions = "Center">
            <TableView Intent="Data">
                <TableView.Root>
                    <TableRoot>
                        <TableSection Title="TableView having the property Intent=Data">
                            <TextCell Text="This is Xamarin ! TableView Control!" Detail="Details"/>
                            <EntryCell Placeholder="This is an Entry Cell to introduce a text!"/>
                            <SwitchCell Text="Select Yes/No!"/>
                        </TableSection>
                    </TableRoot>
                </TableView.Root>
            </TableView>
        </StackLayout>

· Menu

A table for use as a menu for selection.

· Settings

A table containing a series of switches, toggles, or other configurable configuration settings.

· Form

A table that is normally used to store the information contained in a form.

Root property

Gets or sets the root of the table.
You can assign cells to TableView by using the Root property. Actually , used it with all the code from the beginning.

RowHeight property

An integer representing the height of the item in the list. If HasUnevenRows is true, this property is ignored.
You can change the cell size by using the RowHeight property.
  <TableView RowHeight="100">

TableView in Code-behind

I will write the following code in the code behind 

InitializeComponent ();

            //iOS only, take a margin at the top

            Padding = new Thickness(0, top: Device.OnPlatform(20, 0, 0), right: 0, bottom: 0);

        // TableView

        var tableView = new TableView

        {

            //Set intent as "Form"

                    Intent = TableIntent.Form,

            //Assign to route

                    Root = new TableRoot("Configuration")

            {

                new TableSection("TableView having the property Intent=Form")

                {

                    //TextCell

                    new TextCell

                    {

                        Text = "This is Xamarin ! TableView Control!",

                        Detail = "Details",

                    },

 

                    //Switch Cell

                    new SwitchCell

                    {

                        Text = "Select Yes/No!"

                    },

 

                    //エントリーセル

                    new EntryCell

                    {

                        Label = "Entry Cell",

                        Placeholder = "This is an Entry Cell to introduce a text!"

                            }

                

                }

            }

        };

            // TableView Place only content as content

            Content = tableView;