Getting Started with .NET MAUI Busy Indicator (SfBusyIndicator)

16 May 20235 minutes to read

Getting started with .NET MAUI Busy Indicator

This section explains the steps to configure the .NET MAUI Busy Indicator control in a real-time scenario and provides a walk-through on some of the customization features available in the control.

To get start quickly with our .NET MAUI Busy Indicator, you can check the below video.

Adding a .NET MAUI Busy Indicator reference

Syncfusion .NET MAUI controls are available in Nuget.org. To add .NET MAUI Busy Indicator to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Core and then install it.

Handler registration

In the MauiProgram.cs file, register the handler for Syncfusion core.

C#

using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;

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

        return builder.Build();
        }      
    }
}

Create a Simple .NET MAUI Busy Indicator

The .NET MAUI Busy Indicator control is configured entirely in C# code or by using XAML markup. The following steps explain how to create a .NET MAUI Busy Indicator (SfBusyIndicator) and configure its elements.

Adding the .NET MAUI Busy Indicator control

Step 1: Add the NuGet to the project as discussed in the above reference section.

Step 2: Add the namespace as shown in the following code sample.

XAML

xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"

C#

using Syncfusion.Maui.Core;

Step 3: Set the control to content in ContentPage.

XAML

<ContentPage.Content>    
    <core:SfBusyIndicator x:Name="busyIndicator"
                          IsRunning = "True" />
</ContentPage.Content>

C#

SfBusyIndicator busyIndicator = new SfBusyIndicator(){IsRunning = true}; 
Content = busyIndicator;

Setting Animation Type in .NET MAUI Busy Indicator

.NET MAUI Busy Indicator provides some predefined animation types like Cupertino, LinearMaterial, and CircularMaterial. Users can select any one of the animation types using the AnimationType property.

The following example depicts the CircularMaterial type animation of .NET MAUI Busy Indicator.

XAML

<?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"
        xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
        x:Class="BusyIndicatorSample.MainPage">

    <ContentPage.Content>
        <core:SfBusyIndicator x:Name="busyIndicator"
                              IsRunning="True"
                              AnimationType="CircularMaterial" />
    </ContentPage.Content>
</ContentPage>

C#

using Syncfusion.Maui.Core;
using Microsoft.Maui;
using Microsoft.Maui.Controls;

namespace BusyIndicatorSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            SfBusyIndicator busyIndicator = new SfBusyIndicator()
            {
                IsRunning = true,
                AnimationType = AnimationType.CircularMaterial;
            };
        this.Content = busyIndicator;
        }
    }
}

The following gif image illustrates the result of the above code.

You can find the complete getting started sample of .NET MAUI Busy Indicator from this link.