TableView in Xamarin.Forms

Article
1/17/2024

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>

https://2.bp.blogspot.com/-NjIwd4dW0xI/WniFpOCsz7I/AAAAAAAAQPk/uT7llnhs9Hgw1qdjbSibqt0hUdqNSaxNQCLcBGAs/s640/1.JPG 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>

https://1.bp.blogspot.com/-ryvs0bhIjfE/WniIjrmKkPI/AAAAAAAAQPw/gQA3nJDUadoR65IYV6EV1LFj0Fg3YOl9gCLcBGAs/s640/2.JPG

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!"
                            },
  
                            //EntryCell
                            new EntryCell
                            {
                                Label = "Entry Cell",
                                Placeholder = "This is an Entry Cell to introduce a text!"
                            }
                 
                        }
                    }
                };
            // TableView Place only content as content
            Content = tableView;

https://2.bp.blogspot.com/-9BgJCjUBd04/WniLzgK25MI/AAAAAAAAQP8/1zFIAhlG06AEN-1ashqYZjn22-qMlvPYgCLcBGAs/s640/3.JPG

Share via