Using Control Templates in Xamarin Forms

Sometimes in our mobile applications, we need to switch between different views inside a ContentPage or ContentView depending on the context. You could use IsVisible to hide one view and show another view, but this isn’t a clean way. So instead of doing this we should use control templates to achieve the same but in a better way.

You can use Control Templates to change the appearance of a view/page at runtime. This is helpful if you want to re-theme pages or switch between views depending on the context. The property that allows to set a control template is called ControlTemplate which is available in ContentPage and ContentView classes.

In the following sample, will show you how to use them for switching views in a ContentPage depending on the context. So let’s go step by step:

1-Create a ContentPage

In the page (MainPage) XAML, we will set a Picker as the Content. This picker will allow us to switch between templates based on the picker selection.

2-Create a ViewModel

In the ViewModel (MainViewModel), we will just have a few properties with default values to support our templates.

3-Create the templates

The templates could be any Xamarin Forms view. For this sample, we will be using a Grid for each of the templates. Let’s get familiar with two important keywords you will see in the XAMLs.

ContentPresenter – marks where the control template owner page/view will display its content. (For this specific case where the picker will be displayed within the template).
TemplateBinding – allows binding properties in a control template to bindable properties on the parent of the target view that owns the template. The source is always set to the view that owns the template

Template 1

As you can see above we are using the ContentPresenter, wherever I put it is where the picker of our page will be displayed since it’s Content.

Also, you will notice we are using the TemplateBinding for our bindings. The BindingContext of this view is the Page (MainPage) not the ViewModel (MainViewModel), so we are binding to the property Size inside the BindingContext of the page which is the ViewModel that’s why we use BindingContext.Size.

Template 2

Template 3

Template 4

In template 4, you will notice the position of the ContentPresenter was set to the last row of the Grid, that’s why you will see the picker will now be displayed in the bottom.

4- Finally let’s switch between templates!

In our page (MainPage) code behind, we first created an instance for each control template by using the ControlTemplate class constructor passing as parameter the type of the template. Also added an event handler to listen when picker selection changes to be able to switch between templates by setting the ControlTemplate property of the page to the specific template instance based on the picker SelectedIndex.

You can find the sample project full source code here.