Table View In Xamarin.Forms

In this article, we are going to learn Table View in Xamarin.Form and also we are going to make a table view in xamarin forms and view its output on android and Windows desktop applications.

The points of discussion in regards to this article are given below.

• Table View
• Cells in Table View
• Default templates
• Custom Cells

Table View

It contains rows and columns to place your data in more presentable way.

We are going to make a Table View, which contains groups. It also contains some default cells and custom cells.

This view is the end result of our article. This Table View contains two groups, where one is of basic information and the second is for settings. Let’s start the development.

Development

Let’s start by making a single section and giving it a title.

Code 

<TableView>
    <TableRoot>
        <TableSection  Title="Basic Information">

        </TableSection>
    </TableRoot>
</TableView>

Here, you see that we make a Table View tag, which contains table root and table section. We can declare multiple sections in the table and give them a title. Now, make one more section.

Code 

  <TableView>
      <TableRoot>
          <TableSection  Title="Basic Information">

          </TableSection>

<TableSection  Title="Settings">

          </TableSection>

      </TableRoot>
  </TableView>

Output on an Android and Windows desktop

Here, you can see that we made 2 sections. Now, add some cells in Table View sections.

Default Templates Cells

Some already made templates are given to make our development easier. We can make an image cell i.e. the cell, which contains an image, a Text cell i.e. a cell, which contains a text and details, an entry cell, which contains an entry to take some input from the user etc. Let's implement some default templates of the cells.

Code 

<TableView>
      <TableRoot>
          <TableSection  Title="Basic Information">
              <TextCell Text="Name" Detail="Umair Hassan" ></TextCell>
              <EntryCell Label="Title" Placeholder="(e.g. Shopping)"></EntryCell>
              <SwitchCell Text="Notifications" On="True"></SwitchCell>
          </TableSection>
          <TableSection Title="Settings">

          </TableSection>
      </TableRoot>
  </TableView>

Here, you see that three cells are used, which are given below.

• Text cell
  It contains a text and detail

• Entrycell
  It contains a label and Placeholder for an entry.

• Switch cell
  Switch cell contains a switch and a notification and we set it to true.

Output

Custom Cell

What if we want to make a cell of our desire? To make a custom cell, we use a tag named ‘view cell’. In view cell, we are able to make a custom template. We are free to use any UI element in it. We can also use layout container in our view cell. Let’s make a view cell.

Code 

<ViewCell>
                    <StackLayout Orientation="Horizontal" Padding="13,0">
                        <Label Text="Date" VerticalOptions="Center"></Label>
                        <DatePicker Format="dd MMM yyyy" Date="25 Jan 2016" HorizontalOptions="EndAndExpand"></DatePicker>
                    </StackLayout
                </ViewCell>

Here, we make a view cell, which contains a stack layout. We can set its orientation and padding, as per our desire and in stack layout, two elements are placed. This view is created, as per our desire.

Full Code 

<TableView>
    <TableRoot>
        <TableSection  Title="Basic Information">
            <TextCell Text="Name" Detail="Umair Hassan" ></TextCell>
            <EntryCell Label="Title" Placeholder="(e.g. Shopping)"></EntryCell>
            <SwitchCell Text="Notifications" On="True"></SwitchCell>
        </TableSection>
        <TableSection Title="Settings">
            <ViewCell>
                <StackLayout Orientation="Horizontal" Padding="13,0">
                    <Label Text="Date" VerticalOptions="Center"></Label>
                    <DatePicker Format="dd MMM yyyy" Date="25 Jan 2016" HorizontalOptions="EndAndExpand"></DatePicker>
                </StackLayout>
            </ViewCell>
        </TableSection>
    </TableRoot>
</TableView>

Output on an Android and Windows desktop

Here, we need to learn to make a custom view cell and we also use cells with already made templates. Now, it’s your turn to implement an Image cell.

Happy coding.