.NET MAUI Customizing Controls with Control Templates Step by step Implementation and Top 10 Questions and Answers
 Last Update: April 01, 2025      16 mins read      Difficulty-Level: beginner

Customizing Controls with Control Templates in .NET MAUI

In .NET Multi-platform App UI (.NET MAUI), one of the key features that enhances the flexibility and maintainability of applications is the ability to customize controls using Control Templates. Control Templates allow you to define the visual structure and behavior of controls in a declarative way, enabling you to create consistent and reusable UI components across different platforms. This article delves into the details of customizing controls with Control Templates in .NET MAUI, including important concepts and practical examples.

What are Control Templates?

Control Templates in .NET MAUI are XAML-based templates that define the visual representation of a control. They allow you to separate the look and feel of a control from its behavior, promoting a clean separation of concerns. Control Templates can be applied to any control that derives from the TemplatedView class, which is the base class for many built-in controls like Button, Switch, Slider, etc.

Defining a Control Template

Control Templates are defined using the ControlTemplate element and are typically placed in a Resource Dictionary, making them reusable across multiple views. Here is a simple example of a Control Template that customized the appearance of a Button:

<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ControlTemplate x:Key="CustomButtonControlTemplate">
        <Border Padding="10" BackgroundColor="LightBlue" 
                BorderColor="Navy" BorderWidth="2">
            <Label Text="{TemplateBinding Content}" 
                   TextColor="Black" 
                   HorizontalOptions="Center" 
                   VerticalOptions="Center"/>
        </Border>
    </ControlTemplate>
</ResourceDictionary>

In this example, a Border control is used to create a blue rectangle with a navy border. Inside this border, a Label displays the content of the button. The TemplateBinding mechanism binds the Content property of the button to the Label’s Text property.

Applying a Control Template

Once you have defined a Control Template, you can apply it to a control by setting its ControlTemplate property. Here is how you can apply the above-defined Control Template to a Button:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="CustomButtonControlTemplate">
                <Border Padding="10" BackgroundColor="LightBlue" 
                        BorderColor="Navy" BorderWidth="2">
                    <Label Text="{TemplateBinding Content}" 
                           TextColor="Black" 
                           HorizontalOptions="Center" 
                           VerticalOptions="Center"/>
                </Border>
            </ControlTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout>
        <Button Text="Click Me" ControlTemplate="{StaticResource CustomButtonControlTemplate}"/>
    </StackLayout>
</ContentPage>

Key Concepts and Features

  1. Template Binding: This feature allows controls within the Template to bind to properties of the templated control. In the example above, the Label inside the Template is bound to the Content property of the Button.

  2. Reusability: Control Templates can be defined once and reused across multiple controls or even multiple pages, ensuring consistency in the UI style.

  3. Flexibility: You can modify the visual appearance of controls without affecting their behavior. This is particularly useful when building complex UI elements that need to maintain consistent styling.

  4. Scoping: Templates can be scoped at different levels, including at the application level, page level, or even control level. This flexibility allows developers to manage resources efficiently.

  5. Integration with Styles: Control Templates can be combined with Styles to provide even more control over the appearance of controls. Styles can be used to define common properties that apply to multiple controls, while Control Templates handle the unique visual structure of individual controls.

Advanced Features

  1. Triggers and Behaviors: Control Templates can include Triggers and Behaviors to change the appearance of controls in response to certain conditions or user interactions. For example, you can change the background color of a button when it is pressed.

  2. Part Definitions: In more complex scenarios, Part Definitions can be used to define named parts within the template that can be accessed and manipulated programmatically from the code-behind file.

  3. Content Presenters: The ContentPresenter element can be used in Control Templates to render the content of the control. This is particularly useful when you want to customize only parts of the control and keep the original content intact.

Practical Example

Here is a more advanced example that demonstrates how to use Control Templates to create a custom-styled Entry control with a placeholder and validation feedback:

<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ControlTemplate x:Key="CustomEntryControlTemplate">
        <AbsoluteLayout Padding="10">
            <Border BackgroundColor="White" 
                    BorderColor="LightGray" 
                    BorderWidth="1" 
                    AbsoluteLayout.LayoutBounds="0, 0, 1, 1" 
                    AbsoluteLayout.LayoutFlags="All">
                <Entry Placeholder="{TemplateBinding Placeholder}" 
                       PlaceholderColor="Gray" 
                       TextColor="Black" 
                       BackgroundColor="Transparent" 
                       x:Name="EntryControl" 
                       Text="{TemplateBinding Text}" />
            </Border>
            <Label Text="{Binding ValidationMessage, Source={x:Reference EntryControl}}" 
                   TextColor="Red" 
                   FontAttributes="Bold" 
                   AbsoluteLayout.LayoutBounds="0, 1, 1, 15" 
                   AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional" 
                   Margin="5,0,0,0"
                   VerticalTextAlignment="Center"
                   IsVisible="{Binding IsInvalid, Source={x:Reference EntryControl}}" />
        </AbsoluteLayout>
    </ControlTemplate>
</ResourceDictionary>

In this example, the Entry control includes a Placeholder and an optional ValidationMessage. The ValidationMessage is displayed if the IsInvalid property of the Entry is set to true.

Conclusion

Customizing controls with Control Templates in .NET MAUI provides developers with a powerful way to define and reuse complex UI structures across different platforms. By leveraging this feature, you can create applications with consistent styling, improved maintainability, and enhanced user experiences. Whether you are building simple or advanced UI components, Control Templates are an essential tool in your .NET MAUI development toolkit.

Examples, Set Route and Run the Application: Step-by-Step Guide for Customizing Controls with Control Templates in .NET MAUI

Customizing controls in .NET MAUI is a powerful way to tailor the UI to fit your application's theme and functionality. One common approach to customize controls in .NET MAUI is by using Control Templates. Control Templates allow you to define a custom layout for a control without affecting its behavior. This guide will walk you through a step-by-step process to create a custom control template, set up routes in your application, and run it to see the data flow.

Prerequisites

  • Basic familiarity with C#, XAML, and .NET MAUI.
  • Visual Studio 2022 (or later) installed with the .NET MAUI workload.
  • A running instance of the .NET MAUI project.

Step 1: Create a New .NET MAUI Project

  1. Open Visual Studio and create a new project.
  2. Select the "MAUI App" template.
  3. Name your project and choose a location.
  4. Click on "Create" to generate the project.

Step 2: Define a Control Template in XAML

You will define a Control Template for a Button to customize its appearance.

  1. Open MainPage.xaml in your project.
  2. Add a ResourceDictionary to contain your Control Template.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppWithControlTemplates.MainPage">

    <ContentPage.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="CustomButtonTemplate">
                <Frame CornerRadius="10"
                       Margin="10"
                       BackgroundColor="SkyBlue">
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <ContentPresenter HorizontalOptions="Center"
                                          VerticalOptions="Center"/>
                    </Grid>
                </Frame>
            </ControlTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ScrollView>
        <StackLayout>
            <Button Text="Custom Button"
                    Template="{StaticResource CustomButtonTemplate}"
                    HorizontalOptions="Center"
                    VerticalOptions="CenterAndExpand"
                    Clicked="OnButtonClicked"/>
        </StackLayout>
    </ScrollView>
</ContentPage>

Step 3: Set Up Navigation and Routes

For demonstration purposes, let's set up a simple navigation flow using a Shell to handle routes.

  1. Modify AppShell.xaml to include routing.
<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:MauiAppWithControlTemplates"
       x:Class="MauiAppWithControlTemplates.AppShell">
    
    <ShellContent Title="Main"
                  ContentTemplate="{DataTemplate local:MainPage}"
                  Route="MainPage"/>
    
    <!-- You can add more pages and routes here if needed -->
</Shell>
  1. Update App.xaml.cs to ensure the AppShell is instantiated.
using Microsoft.Maui.Controls;

namespace MauiAppWithControlTemplates
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            MainPage = new AppShell();   
        }
    }
}

Step 4: Implement Button Click Handler

Add an event handler in the code-behind file to demonstrate data flow when the button is clicked.

  1. Open MainPage.xaml.cs and add the following code:
using Microsoft.Maui.Controls;

namespace MauiAppWithControlTemplates
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnButtonClicked(object sender, EventArgs e)
        {
            // Simple data flow example: Show a message
            DisplayAlert("Button Clicked", "You clicked the custom templated button!", "OK");
        }
    }
}

Step 5: Run the Application

  1. Set the .NET MAUI project as the startup project.
  2. Select a target platform (Windows, Android, iOS, or Mac Catalyst).
  3. Click the "Start" button in Visual Studio to deploy and run your application.
  4. Once the application runs, you should see the custom-styled button.
  5. Clicking the button should invoke the data flow event, displaying an alert.

Conclusion

In this guide, you learned how to customize a control using a Control Template in .NET MAUI, set up routes using the Shell navigation system, and observed the data flow when interacting with the custom control. This approach provides developers with a flexible way to enhance UI elements while maintaining consistent behavior. Feel free to explore further customizations by adding more Control Templates and routes to expand your .NET MAUI application.

Top 10 Questions and Answers: Customizing Controls with Control Templates in .NET MAUI

1. What are Control Templates in .NET MAUI?

Answer: Control Templates in .NET MAUI are visual structures that define the appearance and layout of controls, allowing developers to create a consistent and reusable look and feel across multiple controls. These templates can be applied to controls to override their default templates, enabling customization of controls without subclassing or creating new classes.

2. How do you create a Control Template in .NET MAUI?

Answer: To create a Control Template in .NET MAUI, you typically define it in XAML. Below is an example of how to define a simple Control Template:

<ControlTemplate x:Key="RoundButtonTemplate">
    <Frame BackgroundColor="#ff9900"
           CornerRadius="20"
           HasShadow="true"
           Padding="10">
        <Label TextColor="White"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center"
               FontAttributes="Bold" />
    </Frame>
</ControlTemplate>

You can then assign this ControlTemplate to a Button or other controls by referencing it:

<Button Text="Click Me"
        ControlTemplate="{StaticResource RoundButtonTemplate}"
        WidthRequest="200"
        HeightRequest="50" />

3. Can I use Bindings within a Control Template?

Answer: Yes, you can use bindings within a Control Template in .NET MAUI. This allows you to dynamically set properties based on the data context of the control to which the template is applied. For example:

<ControlTemplate x:Key="LabelTemplateWithBinding">
    <Grid>
        <Frame BackgroundColor="LightGray"
               CornerRadius="5"
               Padding="10">
            <Label Text="{TemplateBinding Content}"
                   FontSize="16"
                   TextColor="Black" />
        </Frame>
    </Grid>
</ControlTemplate>

Here, Content is a property that can be bound to any property on the ContentControl or ContentView that uses this template.

4. How do you apply a Control Template to a Control in C# Code?

Answer: To apply a Control Template to a control in C#, you need to instantiate the template and assign it to the control's ControlTemplate property. Here's an example:

var template = new ControlTemplate(() =>
{
    var label = new Label
    {
        TextColor = Colors.White,
        HorizontalTextAlignment = TextAlignment.Center,
        VerticalTextAlignment = TextAlignment.Center,
        FontAttributes = FontAttributes.Bold
    };

    var frame = new Frame
    {
        BackgroundColor = Color.FromHex("#ff9900"),
        CornerRadius = 20,
        HasShadow = true,
        Padding = 10
    };

    frame.Content = label;
    return frame;
});

var button = new Button
{
    Text = "Click Me",
    ControlTemplate = template,
    WidthRequest = 200,
    HeightRequest = 50
};

Content = button;

5. Can you share a Control Template across different projects in a .NET MAUI solution?

Answer: Yes, you can share a Control Template across different projects in a .NET MAUI solution by defining it in a Shared Library or a Resource Dictionary in a shared project. This way, you can maintain a consistent look and feel across multiple applications. For example, define the template in a shared Resource Dictionary:

<!--SharedResourceDictionary.xaml in a shared project-->
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="YourProjectName.SharedResourceDictionary">
    <ControlTemplate x:Key="ConsistentButtonTemplate">
        <Frame BackgroundColor="#ff9900"
               CornerRadius="20"
               HasShadow="true"
               Padding="10">
            <Label TextColor="White"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center"
                   FontAttributes="Bold" />
        </Frame>
    </ControlTemplate>
</ResourceDictionary>

Then, reference it in any project:

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourProjectName.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <local:SharedResourceDictionary />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

6. What are the benefits of using Control Templates in .NET MAUI?

Answer: Using Control Templates in .NET MAUI offers several benefits:

  • Consistency: You can apply the same visual styles across multiple controls to maintain a consistent look and feel.
  • Reusability: Templates can be reused across different controls and views, reducing code duplication.
  • Separation of Concerns: Control Templates help separate visual design from logic, making the codebase more maintainable.
  • Rapid Prototyping: Templates can be created and modified quickly, improving the development process.

7. How do you customize a Control's appearance using a Control Template in .NET MAUI?

Answer: Customizing a control's appearance using a Control Template in .NET MAUI involves defining the layout and styling in XAML and then applying it to the control. For example, to customize a Button to look like a segmented control:

<ControlTemplate x:Key="SegmentedControlTemplate">
    <Frame BackgroundColor="#ff9900"
           CornerRadius="10"
           HasShadow="false"
           Padding="0">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <BoxView Color="#fff0cc"
                     Grid.Column="0" />
            <BoxView Color="#ffcc99"
                     Grid.Column="1" />
            <Label Text="{TemplateBinding Content}"
                   Grid.Column="0"
                   TextColor="Black"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center" />
            <Label Text="Second Tab"
                   Grid.Column="1"
                   TextColor="Black"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center" />
        </Grid>
    </Frame>
</ControlTemplate>

<Button Text="First Tab"
        ControlTemplate="{StaticResource SegmentedControlTemplate}"
        WidthRequest="200"
        HeightRequest="50" />

8. Can you create a Control Template that dynamically changes based on the control's state?

Answer: Yes, you can create a Control Template that dynamically changes based on the control's state using triggers. Triggers allow you to change properties of a control based on certain conditions. For example, changing a button's color when it is pressed:

<ControlTemplate x:Key="InteractiveButtonTemplate">
    <Frame CornerRadius="20"
           HasShadow="true"
           Padding="10">
        <Frame.Triggers>
            <Trigger TargetType="Frame"
                     Property="IsPressed"
                     Value="True">
                <Setter Property="BackgroundColor"
                    Value="LightGray" />
            </Trigger>
        </Frame.Triggers>
        <Label Text="{TemplateBinding Content}"
               TextColor="Black"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center"
               FontAttributes="Bold" />
    </Frame>
</ControlTemplate>

<Button Text="Press Me"
        ControlTemplate="{StaticResource InteractiveButtonTemplate}"
        WidthRequest="200"
        HeightRequest="50" />

9. How can you create a more complex Control Template that includes animations?

Answer: To create a more complex Control Template that includes animations in .NET MAUI, you can use the built-in animation capabilities. These animations can be defined directly in XAML or triggered through code. For example, creating a button that scales up when the mouse pointer enters:

<ControlTemplate x:Key="AnimatedButtonTemplate">
    <Frame CornerRadius="20"
           HasShadow="true"
           Padding="10"
           Scale="1">
        <Frame.Behaviors>
            <behaviors:EventToAnimationBehavior>
                <behaviors:EventToAnimationBehavior.Triggers>
                    <animations:EventTrigger EventName="PointerEntered">
                        <animations:ScaleAnimation To="1.1"
                                                 Duration="250"
                                                 Easing="CubicInOut" />
                    </animations:EventTrigger>
                    <animations:EventTrigger EventName="PointerExited">
                        <animations:ScaleAnimation To="1"
                                                 Duration="250"
                                                 Easing="CubicInOut" />
                    </animations:EventTrigger>
                </behaviors:EventToAnimationBehavior.Triggers>
            </behaviors:EventToAnimationBehavior>
        </Frame.Behaviors>
        <Label Text="{TemplateBinding Content}"
               TextColor="Black"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center"
               FontAttributes="Bold" />
    </Frame>
</ControlTemplate>

Make sure to include necessary namespaces and libraries for behaviors and animations.

10. What are some best practices for using Control Templates in .NET MAUI?

Answer: Here are some best practices for using Control Templates in .NET MAUI:

  • Modularity: Keep templates modular and focused on one specific aspect to make them more reusable.
  • Testing: Test templates across different platforms to ensure consistent behavior and appearance.
  • Simplicity: Keep templates simple and avoid overly complex logic to enhance performance and maintainability.
  • Documentation: Document templates and any specific bindings or triggers to facilitate future updates and modifications.
  • Version Control: Store templates in version control along with the rest of your codebase to track changes and enable collaborative development.

By following these best practices, you can effectively use Control Templates in .NET MAUI to create powerful, maintainable, and visually appealing applications.