Creating page templates for Xamarin Forms

3 min readAug 19, 2019

The problem

Templates are a good solution for reusing pages’ design. In fact, when designing pages, we have a specific code dedicated for the design. Think of the page layout, colors, font sizes, title style, margins, etc… In a traditional approach, we need to rewrite this design’s code for every component that uses it. This results in code duplication, thus less maintainable code!

The solution

Fortunately, as we could refactor and reuse code for business logic, we could apply the same principal for UI code. This what is known under the name Application or Page Template. This approach could be used in almost all UI frameworks and platforms. In this article, we’ll be focusing on Xamarin Forms.

The implementation

In Xamarin Forms, the code consists of a UI component that defines the design of a page or any kind of view. This is the template. Then, we need to apply this template into our pages or views through a specific syntax.

Let’s first create a sample template. We’ll define one for page layout. We want to have title label at the top of the page with font size 22. Then we want to have a body section that defines the main content for the page. Finally, at the bottom, we want to have a footer section where we can put views like action buttons.

In Visual Studio, create/open a new project, add a new page or component, call it MainTemplate and copy paste the following XAML code in MainTemplate.xaml. Note here the three sections. Note also that the title section is a Label so we can only change its text property. While the body and footer are ContentView so we can change their content to put Grid, StackLayout, Button...

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppTemplate.MainTemplate">
    <ContentView.Content>
        <StackLayout Padding="20" Spacing="20">
            <Label x:Name="HeaderLabel" FontSize="22" />
            <ContentView x:Name="BodyContent"     
                         VerticalOptions="FillAndExpand"/>
            <ContentView x:Name="FooterContent"/>      
         </StackLayout>
    </ContentView.Content>
</ContentView>

To be able to access and change the content of title, body and footer, we need to expose these UI components through public properties in code behind. We create three public properties in MainTemplate.xaml.cs as following:

[ContentProperty("Child")]
public partial class MainTemplate : ContentView
{
    public MainTemplate()
    {
        InitializeComponent();
    }
    public string PageTitle
    {
        get => HeaderLabel.Text;
        set => HeaderLabel.Text = value;
    }
    public View Body
    {
        get => BodyContent.Content;
        set => BodyContent.Content = value;
    }
    public View Footer
    {
        get => FooterContent.Content;
        set => FooterContent.Content = value;
    }
}

Now, we have created the template and we can start applying it to a page. To do that, we’ll apply it to the MainPage.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:appTemplate="clr-namespace:AppTemplate"
             x:Class="AppTemplate.MainPage"
    <appTemplate:MainTemplate PageTitle="Login page">   
        <appTemplate:MainTemplate.Body>
            <StackLayout>
                <Entry Placeholder="email" />
                <Entry Placeholder="password" />
            </StackLayout>
        </appTemplate:MainTemplate.Body>
        <appTemplate:MainTemplate.Footer>
            <StackLayout Orientation="Horizontal">
                <Button Text="Cancel" />
                <Button Text="Login" />
            </StackLayout>
        </appTemplate:MainTemplate.Footer>
    </appTemplate:MainTemplate>
</ContentPage>

Note here how we are setting the title Label with text, body and footer content with StackLayout.

Application source code is available on Github.

Conclusion

Now, we can re-use the same template design for multiple pages without redefining the title, body and footer. This makes it really easy to have a unique design and unique ‘look and feel’ for the entire application.

More resources

If you are looking for more resources about Xamarin or anything Cloud, DevOps and Kubernetes, I’m pretty sure you will find useful content on my youtube channel: https://youtube.com/houssemdellai