DEV Community: Nick Alonge

Reusable Views in .NET MAUI

Nick Alonge — Wed, 16 Jul 2025 01:27:33 +0000

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.

Using Local Browser Storage in .NET MAUI Blazor Hybrid

Nick Alonge — Thu, 18 Jul 2024 03:11:11 +0000

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

This article explores how to leverage local browser storage in a .NET MAUI Blazor Hybrid application to enhance data management and user experience. By utilizing this powerful combination, developers can create robust and efficient apps that maintain state and persist data across sessions, providing users with a smooth and responsive interface.

I don't think I have written an application where I didn't need some kind of data persistence. Whether it be SQLite or a larger MS SQL database. A lot of apps only require storing small amounts of data, and using a RDBMS can be a lot of overhead and add unnecessary libraries that inflate the size of your app. Sometimes you have too much data for saving key/value pairs to Preferences, and not enough to warrant setting up a full blown database.

Since .NET 8, I have adopted MAUI Blazor Hybrid as my tool of choice for writing mobile applications. For the apps I write, having a consistent UI across iOS and Android is important, but also having access to the native platform is desirable as well. I have found the ease of storing data locally helps me speed up development of small to medium sized apps.

There are 3 types of browser storage:

Session Storage
Useful for storing data until that browser session is closed.

Local Storage
Local storage will persist even when the user quits the app and comes back.

Both Local and Session storage use key/value pairs and are limited to the amount of data (and type) you can store.

IndexedDB
For more complex data, without the storage limits of local and session storage, IndexedDB should be used. The IndexedDB API stores structured data, including files and blobs. You can also create indexes for high speed searches. Because IndexedDB is a little moved involved, I will create a dedicated post for it.

Examples

Let's get to the code. I will be using VS Code on the Mac with the .NET MAUI extension for this example. All the code will be available in Github.

We'll start with Local storage. Create a new MAUI-Blazor project. We will be using the sample pages the template creates. For local and session storage, we will be using the Blazored LocalStorage nugget. Add this to your project:

dotnet add package Blazored.LocalStorage

After the nugget installs, open up MauiProgram.cs and register the service:

using Blazored.LocalStorage;
using Microsoft.Extensions.Logging;

namespace MAUIHybridBrowserStorage;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        builder.Services.AddMauiBlazorWebView();

                // Add the Blazored.LocalStorage service
        builder.Services.AddBlazoredLocalStorage();



#if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
        builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

That's it for setup. Now let's put it to use. Open up Home.razor. We are going to use this page to manage our shopping list.

Start by injecting the Blazored.LocalStorage service into our Home.razor page:

@inject Blazored.LocalStorage.ILocalStorageService localStorage

We will use the variable localStorage to access the injected service. Next, add the @code directive, and override OnInitializedAsync(). Our Home.razor file should now look like this:

@page "/"

@inject Blazored.LocalStorage.ILocalStorageService localStorage

<h3 class="text-center">Shopping List</h3>

@code 
{
    protected override async Task OnInitializedAsync()
    {

    }
}

I removed the code and HTML generated by the template, and centered the page title using Bootstrap classes.

Now we will add a simple List to store our items, and read/write from that list to display the items on the page. In the OnInitializedAsync() method, we will check for any items saved to local storage, and if not NULL, set the ShoppingListItems to the value:

@code 
{
    List<string>? ShoppingListItems;

    protected override async Task OnInitializedAsync()
    {
        // Check local storage for any items
        ShoppingListItems = await localStorage.GetItemAsync<List<string>>("list-items");
    }
}

Let's also add methods for adding and deleting the local storage items:

    private async Task AddItems()
    {
        string[] items = {"Lettuce", "Roasted Turkey Lunch Meat", "Nutty Buddy", "Iced Tea", "Frozen Pizza", "Dog Food"};

        ShoppingListItems = items.ToList();

        // Save to local storage
        await localStorage.SetItemAsync("list-items", items);
    }

    private async Task DeleteAllItems()
    {
        // Remove the key
        await localStorage.RemoveItemAsync("list-items");

        // Reset the Shopping List
        ShoppingListItems = await localStorage.GetItemAsync<List<string>>("list-items");
    }

In Part 2 of this article, we will add and delete individual items, but for now we are just hard coding some values.

Here is the completed Home.razor file:

@page "/"

@inject Blazored.LocalStorage.ILocalStorageService localStorage

<h3 class="text-center">Shopping List</h3>

@if(ShoppingListItems != null)
{
    <div class="container">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Item</th>
                </tr>
            </thead>
            <tbody>
                @foreach(var item in ShoppingListItems)
                {
                    <tr>
                        <td>@item</td>
                    </tr>
                }
            </tbody>
        </table>
        <br />
        <div class="text-center">
            <button class="btn btn-danger" @onclick="DeleteAllItems">Delete List</button>
        </div>
    </div>
} else 
{
    <p class="text-center mt-3">No items in the list.  Click the Add Items button</p>
    <div class="text-center">
        <button @onclick="AddItems" class="btn btn-primary">Add Items</button>
    </div>
}

@code 
{
    List<string>? ShoppingListItems;
    protected override async Task OnInitializedAsync()
    {
        // Check local storage for any items
        ShoppingListItems = await localStorage.GetItemAsync<List<string>>("list-items");
    }

    private async Task AddItems()
    {
        string[] items = {"Lettuce", "Roasted Turkey Lunch Meat", "Nutty Buddy", "Iced Tea", "Frozen Pizza", "Dog Fooo"};

        ShoppingListItems = items.ToList();

        // Save to local storage
        await localStorage.SetItemAsync("list-items", items);
    }

    private async Task DeleteAllItems()
    {
        // Remove the key
        await localStorage.RemoveItemAsync("list-items");

        // Reset the Shopping List
        ShoppingListItems = await localStorage.GetItemAsync<List<string>>("list-items");
    }
}

When you run the app add the items, they will persist until you delete them (or the app is removed). In Part 2 we will take a look at how to use the web browser development tools in Chrome, Edge or Safari to view our local storage data.

Using Local Storage is an easy way to persist data in your application without needed any knowledge of a relational database system. And .NET MAUI Blazor Hybrid gives you all the conveniences of a web application in a native app.

In Part 2 we will focus on IndexedDB to store complex data types. We will also use JS Interop to access some simple Javascript for user interaction.

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