Dynamic Status Bar in .NET MAUI

Introduction

.NET MAUI, a cross-platform framework, empowers developers to build native mobile and desktop applications using C# and XAML. It enables the creation of apps that seamlessly operate on Android, iOS, macOS, and Windows, all from a unified codebase. This open-source platform is an advancement of Xamarin Forms, expanding its reach to desktop scenarios while enhancing UI controls for improved performance and extensibility.

In this article, we will see how we can implement Dynamic Status Bar in the .NET MAUI project.

Quick Links

• Project Setup
• Implementation
• Demo
• Full Code
• Download Code

Project Setup

• Launch Visual Studio 2022, and in the start window, click Create a new project to create a new project.

• In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button.

• Configure your new project window, name your project, choose a suitable location, and click the Next button.

• In the Additional Information window, click the Create button.

• Once the project is created, we can able to see the Android, iOS, Windows, and other running options in the toolbar. Press the emulator or run button to build and run the app.

Screen Design

First, we need to implement the screen design as per our requirements. We will use 3 buttons in this code example, like in the following code block.

<?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="MauiStatusBarBehaviour.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                Text="Blue"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnBlueClicked"
                HorizontalOptions="Center" />

            <Button
                Text="Green"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnGreenClicked"
                HorizontalOptions="Center" />

            <Button
                Text="Default"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnDefaultClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Methods

To implement this, we can implement the following methodologies.

• Applying Behaviour in XAML.
• Applying Behaviour in Code Behind.
• Applying without behavior in code behind.

In this article, we are going to see "Applying without behavior in Code behind.".

• Just install the .NET MAUI community toolkit to your project.

  Install-Package CommunityToolkit.Maui -Version 3.1.0

• Add it to the MauiProgram.cs.

  var builder = MauiApp.CreateBuilder();
  builder
  .UseMauiApp<App>()
  .UseMauiCommunityToolkit()
  .ConfigureFonts(fonts => {
      fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
      fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
  });

• Add an event in the code behind each button. Click and apply the below code.

  CommunityToolkit.Maui.Core.Platform.StatusBar.SetColor(statusBarColor);
  CommunityToolkit.Maui.Core.Platform.StatusBar.SetStyle(StatusBarStyle.LightContent);

Full Code

<?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="MauiStatusBarBehaviour.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                Text="Blue"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnBlueClicked"
                HorizontalOptions="Center" />

            <Button
                Text="Green"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnGreenClicked"
                HorizontalOptions="Center" />

            <Button
                Text="Default"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnDefaultClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

using CommunityToolkit.Maui.Core;

namespace MauiStatusBarBehaviour;
public partial class MainPage : ContentPage
{
	int count = 0;

	public MainPage()
	{
		InitializeComponent();
	}

    private void OnBlueClicked(object sender, EventArgs e)
    {
        CommunityToolkit.Maui.Core.Platform.StatusBar.SetColor(Colors.Blue);
        CommunityToolkit.Maui.Core.Platform.StatusBar.SetStyle(StatusBarStyle.LightContent);
    }
    private void OnGreenClicked(object sender, EventArgs e)
    {
        CommunityToolkit.Maui.Core.Platform.StatusBar.SetColor(Colors.Green);
        CommunityToolkit.Maui.Core.Platform.StatusBar.SetStyle(StatusBarStyle.LightContent);
    }
    private void OnDefaultClicked(object sender, EventArgs e)
    {
        CommunityToolkit.Maui.Core.Platform.StatusBar.SetColor(Color.FromHex("#2B0B98"));
        CommunityToolkit.Maui.Core.Platform.StatusBar.SetStyle(StatusBarStyle.LightContent);
    }
}

Demo

Download Code

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article and it is useful to you, do like, share the article & star the repository on GitHub.

References

• https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/behaviors/statusbar-behavior