Bindable dynamic TableView sections and rows

Posted on Posted in Xamarin.Forms

Overview

In this article I will show you how to implement an attached property for Xamarin.Forms.TableView to add support for bindable sections. It’s very useful when you want to keep your logic clean in ViewModel and change sections visibility dynamically.

This functionality is used in my mobile application Escape Rooms Notebook. On visit details screen I needed to hide empty cells and empty sections. For this purpose I had to refresh TableView content when user updates details. Below you can learn how it’s done.

In this sample I will apply MVVM pattern which is widely used in Xamarin.Forms applications.

Case study

Let’s assume that we have a Contact object and we want to display sections and rows only for non-empty properties. There is also a button to change contact, therefore a¬†TableView has to rebuild sections after each change.

Case requirements:

  • TableView should be able to display four sections:
    • Basic Information (First Name, Last Name, Company)
    • Personal Details (Year of Birth, Height)
    • Notes
    • Actions (“Next Contact” button)
  • “Next Contact” button reloads TableView and changes sections dynamically
  • If a contact property doesn’t have value, row is not displayed
  • Section is displayed only if at least one property has value

1. Prepare models [Model]

We need classes to represent sections and rows. You can define your own row types, but in this example I will use these:

  • TextValueRow – will represent a cell with title and value on the right side
  • EditorRow – will represent a cell with multiline entry
  • ButtonRow – will represent a cell with Button

Let’s define them:

 

2. Create a view with TableView [View]

For now we will create a ContentPage with empty TableView:

 

3. Build sections [ViewModel]

Defined models don’t use any class from Xamarin framework, therefore we can build TableView content even in regular .NET PCL. To make it simple, I will implement it in ViewModel. It will contain just a few sample contacts and one method to build and set sections list for non-empty properties.

Sections property will define how our TableView should look like.

 

4. Create SectionsFactory

So far we’ve got a definition of our TableView in Sections property from ViewModel, but now we need to tell our application how to translate it into Cells, which TableView can display.

In order to keep our architecture clean and separate views and Xamarin framework from logic I extracted creating cells to another class. Here you can use passed properties in defined models to adjust each row and return custom cells.

 

5. Create attached property

Finally, we implement attached property, which will be used in XAML to bind sections from ViewModel to our TableView. In this method I will use SectionsFactory.CreateSection to convert model into TableSection, which is supported by TableView.

 

6. Bind all to ViewModel

Now we can use implemented attached property to bind Sections property from ViewModel to our View:

 

Final result

Full source code

This solution works both on iOS and Android. Below you can see how sections change dynamically after clicking “Next Contact” button.

Dynamic TableView
Dynamic TableView