Dynamically update Xamarin Forms page content using DataTemplate Controls.

I recently came across a Stack Overflow question about a way to dynamically change controls in a page without having resort to code-behind. Using IsVisible to toggle parts of XAML is clunky. I created a better way. It is called DataTemplateControl and StackDataControl.

They are part is part of the SaltyDog Controls repo.

https://github.com/curtisshipley/SaltyDogControls

The problem

Outside of ListViews, there isn’t an elegant way of dynamically changing content display without toggling sections of code using IsVisible. IsVisible works for a smaller number of possibilities. It becomes arduous relying on logic in the ViewModel with a greater variety of display types. Changing this requires revisiting the logic even when it is a simple selection based on data type.

ListViews solve this with a DataTemplate and a DataTemplate selector. I’ve taken that same functionality and exposed it into two custom controls, DataTemplateControl and StackTemplateControl.

DataTemplateControl

DataTemplateControl uses a Selector property to find a DataTemplate in a dictionary such as ResourceDictionary, and uses it to render the data. The resulting XAML is data bound to the BindingContext of the control.

How it works

The DataTemplateControl is very simple. It uses the value of the selector to look up a value in th e TemplateDictionary, which can be anything that implements IDictionary<string,object>, which includes ResourceDictionaries. However it could be bound to a property on the ViewModel. The value returned from the is the template.

Both the Selector and TemplateDictionary properties are BindingProperties. When either changes, a lookup is performed for the DataTemplate, it is rendered, and then bound.

Using

Using the DataTemplateControl is easy:

  1. Just define the DataTemplate(s) in a ResourceDictionary like you would normally do.
  2. Add the control to the page, and bind the ResourceDictionary and the Selector of the control.

Here is some example XAML:

Different Ways this can be used.

The obvious way is to bind the selector to something like a picker, to change sections of the page’s content. For example:

image

Another way this can be used is to dynamically include xaml for special values. If you were displaying a record, and wanted to fill out extra information if particular values were set, you could use the template.

StackTemplateControl

StackTemplateControl is for situations when you want to render a list of similar things in a StackLayout and do not want to use a ListView. ListView brings its own peculiarities, such as focus issues on Android when Entry controls are involved.

How it works

This works similarly to the DataTemplateControl except it takes an ItemsSource and renders a template for each item. It has a default template that can be applied to each item. However if the TemplateDictionary is set, and each item in the items source implements ITemplateSelector, then a custom template can be provided for each item.

All the ITemplateSelector does is return the name of the template to use. For example, one of the item models might look like this:

It is easy to use in Markup:

This results in a StackLayout populated from an ItemsSource with different template for the items:

stack template

There are some powerful things this can do. If the templates are defined in the Application’s ResourceDictionary, then these templates can be leveraged across multiple pages. This would greatly decrease the amount of XAML.

Moving Forward

There are a also lot of improvements that can be made. In addition to ITemplateSelector, a converter could be used to change the item into a selector value. Also in the future it can do something if the collection is an ObservableCollection, and update if individual items change as well.

Checkout the github repo for the latest improvements! Feel free to file an issue if you have questions or comments, or send me an email at curtis@saltydogtechnology.com.