Xamarin Forms Page Templates

Coming from a web background, I was used to having a master page that normally contained a header and footer and then let the individual pages define the content, I was disappointed that I couldn’t do that on Xamarin Forms. In order to compensate for this we needed to create a control and reference it on every page. Not a particularly clean solution but it worked.

All that changed with the release of Xamarin Forms 2.1.0, when ControlTemplate and TemplatedPage were introduced. After some deciphering of the documentation I finally figured out it was incredibly easy to do. Here is how to create a template and apply it to any existing ContentPage. In this scenario I am just going to add a header label to a ContentPage.

Define the ControlTemplate

The first step is to go to your App.xaml and add a ControlTemplate to your ResourceDictionary. The ControlTemplate allows you to provide the VisualElement’s you want displayed.


You will also notice something called the ContentPresenter. This is the placeholder for where the VisualElement’s defined on the ContentPage will appear.

Note: If you only have an App.cs in your main project, check out the section in Styling on how to replace it with an App.xaml and App.xaml.cs

Apply the ControlTemplate

Next all you need to do is go to any ContentPage (which inherits from TemplatedPage) and set the ControlTemplate.

Binding to the ContentPage

On a brief side tangent, if you want your header to receive values from the ContentPage you applied it to you can do this using TemplateBinding, instead of just Binding. You would also need to make sure an INPC property was available in the BindingContext of the ContentPage.

Final Result

All elements are shown on the screen and no longer do we need to create a control and reference it on every page. This is an incredibly simple example but it provides a solid base to expand on to meet your needs. Happy templating.

TemplateExample1


XAMARIN.FORMS MONTHLY NEWSLETTER

JOIN 1,000+ SUBSCRIBERS

  1. Don't miss out on updates
  2. The latest info from this site, Xamarin and the community
  3. Unsubscribe at any time*

* We use MailChimp, with double opt-in, and instant unsubscribe

Microsoft MVP | Xamarin MVP | Xamarin Certified Developer | Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts

6 Comments

    1. Paul Kertscher

      I don’t know if it’s still relevant for you, but I have achieved this, by putting a RelativeLayout into the template. Now you can add an Image control and make it the size you want it (full size maybe? Best use Aspect=”AspectFill” to make the image fill the whole background. This way it does not get distorted.).

      Now you can add a ContentView _after_ the image (otherwise it will be displayed under it, which is not what you want), taking the whole space of the RelativeLayout and put the in it. Works like a charm!

  1. Tres O

    Could someone explain the difference between ControlTemplate, TemplatedPage, and TemplatedView? I can’t find any examples of using TemplatedPage nor TemplatedView.

    1. Adam Pedley

      TemplatedPage and TemplatedView are just what a View or ContentPage inherits from, to provide the ability to host a ControlTemplate.

      As such, just use the ControlTemplate. The TemplatedPage and TemplatedView aren’t designed to be directly used in an application.

  2. Dim

    Running the app in the Simulator I see the full page rendered with the control template applied – exactly as in the image above.
    However, Xamarin.Forms Previewer doesn’t render the page completely. The page content would not show up.
    Can any body see the same rendered page in the Previewer?

Leave A Comment?