Reusable Views in .NET MAUI

This blog is part of the .NET MAUI UI July 2025 series with a new post every day of the month. See the full schedule for more.

Don’t Repeat Yourself (DRY): Why Reusable Views Matter in .NET MAUI

As developers, one of the core principles we aim to follow is DRY—“Don’t Repeat Yourself.” The idea is simple: avoid writing the same code more than once. If you’ve ever copied and pasted the same UI elements across multiple pages in your app, you’ve already bumped into the reason why DRY matters.

In .NET MAUI, reusable views help us stick to DRY by letting us package UI elements into components—like custom buttons, headers, or toolbars—that we can reuse across pages. Instead of rewriting the same layout every time you need a bottom toolbar, you can define it once in a ContentView and just drop it into your pages.

This makes your code easier to maintain, more readable, and much faster to build. Need to change how your toolbar looks or behaves? Update it in one place and the change appears everywhere it’s used.

In this tutorial, I’ll show you how to build a reusable bottom toolbar using a ContentView in .NET MAUI, complete with bindable properties for Height and ActiveTab.

Let's start writing code! I will be using Visual Studio 2022 for this example. All the code will be available in Github.

Create the Reusable BottomToolbarView

<?xml version="1.0" encoding="utf-8" ?>
<ContentView 
    x:Class="MauiJuly2025.Views.BottomToolbarView"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Name="ToolbarRoot">

    <Grid BackgroundColor="#EEEEEE"
          HeightRequest="{Binding HeightRequest, Source={x:Reference ToolbarRoot}}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Text="Home"
                Grid.Column="0"
                BackgroundColor="{Binding ActiveTab, Source={x:Reference ToolbarRoot}, Converter={StaticResource TabToColorConverter}, ConverterParameter=Home}"
                Clicked="OnHomeClicked" />

        <Button Text="Page 1"
                Grid.Column="1"
                BackgroundColor="{Binding ActiveTab, Source={x:Reference ToolbarRoot}, Converter={StaticResource TabToColorConverter}, ConverterParameter=Page1}"
                Clicked="OnPage1Clicked" />

        <Button Text="Page 2"
                Grid.Column="2"
                BackgroundColor="{Binding ActiveTab, Source={x:Reference ToolbarRoot}, Converter={StaticResource TabToColorConverter}, ConverterParameter=Page2}"
                Clicked="OnPage2Clicked" />
    </Grid>
</ContentView>

BottomToolbarView Code Behind

using Microsoft.Maui.Controls;
using MauiJuly2025.Pages;

namespace MauiJuly2025.Views;

public partial class BottomToolbarView : ContentView
{
    public BottomToolbarView()
    {
        InitializeComponent();
    }

    public static readonly BindableProperty ActiveTabProperty =
        BindableProperty.Create(nameof(ActiveTab), typeof(string), typeof(BottomToolbarView), default(string));

    public string ActiveTab
    {
        get => (string)GetValue(ActiveTabProperty);
        set => SetValue(ActiveTabProperty, value);
    }

    public new static readonly BindableProperty HeightRequestProperty =
        BindableProperty.Create(nameof(HeightRequest), typeof(double), typeof(BottomToolbarView), 60.0);

    public new double HeightRequest
    {
        get => (double)GetValue(HeightRequestProperty);
        set => SetValue(HeightRequestProperty, value);
    }

    private void OnHomeClicked(object sender, EventArgs e)
    {
        ActiveTab = "Home";
        Application.Current.MainPage = new HomePage();
    }

    private void OnPage1Clicked(object sender, EventArgs e)
    {
        ActiveTab = "Page1";
        Application.Current.MainPage = new PageOne();
    }

    private void OnPage2Clicked(object sender, EventArgs e)
    {
        ActiveTab = "Page2";
        Application.Current.MainPage = new PageTwo();
    }
}

Add the Converter (for button highlighting)

Add this converter in your Converters folder or wherever you store helper classes. A Converter is a small helper class used in data binding to transform a value before it shows up in the UI. For example, we used a converter to change the toolbar button color depending on which tab is active. Without changing the actual data, a converter lets us customize how that data appears visually.

It’s like a middleman between your data and the UI: “If the active tab is this, show it in blue—otherwise, gray.”

using System.Globalization;

namespace MauiJuly2025.Converters;

public class TabToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var activeTab = value as string;
        var thisTab = parameter as string;

        return activeTab == thisTab ? Colors.LightBlue : Colors.LightGray;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) =>
        throw new NotImplementedException();
}

Use the BottomToolbarView in your pages

Whenever you want to add the toolbar to a page, you simply add the ContentView like this:

<ContentPage 
    x:Class="MauiJuly2025.Pages.HomePage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:views="clr-namespace:YourApp.Views"
    Title="Home">

    <Grid RowDefinitions="*, Auto">
        <Label Text="Welcome to the Home Page!"
               HorizontalOptions="Center"
               VerticalOptions="Center" />

        <views:BottomToolbarView Grid.Row="1" 
                                 HeightRequest="60"
                                 ActiveTab="Home" />
    </Grid>
</ContentPage>

Let's talk about Bindable Properties... A BindableProperty is a special type of property used in .NET MAUI that supports data binding. It lets your UI automatically update when the underlying data changes—and vice versa. You use it in custom controls (like our BottomToolbarView) when you want properties like ActiveTab or Height to be bindable from outside the control.

In our example, we use a Bindable Property to set what tab is active, so we can highlight it. And another Bindable Property to set the toolbar height.

That's all there is to it! As you start building your project you will create several reusable controls, and in some cases be able to use those controls in other apps.

Thanks for reading, I hope you enjoyed this article and stay tuned for more.