How to show online status using the .NET MAUI status badge view (SfBadgeView)?

The .NET MAUI Badge View is a notification control that is used to notify users of new or unread messages, notifications, or status information. It can easily be integrated with ListView, Tab View, and other container controls.

This section explains how to show the online status using Syncfusion .NET MAUI Badge View.

Step 1: Create a .NET MAUI application project in Visual Studio 2022.

Step 2: Add the Syncfusion.Maui.Core Nuget to the project from nuget.org.

Step 3: In the MauiProgram.cs file, register the Syncfusion.Maui.Core handler as shown in the following code.

Using C#

using Syncfusion.Maui.Core.Hosting;
 
namespace BadgeCustomizationSample;
 
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore();
 
        return builder.Build();
    }
}

Step 4: Add the .NET MAUI Core namespace to the MainPage.xaml.

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabBarCustomizationSample.MainPage"
             xmlns:badgeView="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
             BackgroundColor="{DynamicResource SecondaryColor}">

Step 5: Define the .NET MAUI Badge View (SfBadgeView) in the XAML and set the Icon property to “Available” and Type property to “Success”.

XAML

<badgeView:SfBadgeView HorizontalOptions="Center" VerticalOptions="Center" >
    <badgeView:SfBadgeView.Content>
        <Image Source="badge_image.png" HeightRequest="70" WidthRequest="60"/>
    </badgeView:SfBadgeView.Content>
    <badgeView:SfBadgeView.BadgeSettings>
        <badgeView:BadgeSettings Type="Success" Offset="-8,-12" Position="BottomRight" Icon="Available" />
    </badgeView:SfBadgeView.BadgeSettings>
</badgeView:SfBadgeView>

Download the complete sample on GitHub

Output

Conclusion

I hope you enjoyed learning how to show online status on your profile picture using in .NET MAUI status badge view  (SfBadgeView)

You can refer to our .NET MAUI Badge View's feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Badge View documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our .NET MAUI Badge View and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!