--- title: "Load Custom Badge UI in Your .NET MAUI App: An Overview" published_at: "2023-08-17T11:41:07+00:00" modified_at: "2026-02-10T09:48:28+00:00" url: "https://www.syncfusion.com/blogs/post/load-custom-badge-ui-dotnet-maui" excerpt: "This blog explains the process of incorporating custom symbol badges into your app using the Syncfusion .NET MAUI Badge View control." taxonomy_category: - ".NET MAUI" - "Desktop" - "Development" - "Mobile" - "Syncfusion" - "UI" taxonomy_post_tag: - ".NET MAUI" - "desktop" - "development" - "MAUI" - "Mobile" --- # Load Custom Badge UI in Your .NET MAUI App: An Overview [Selva Ganapathy Kathiresan](https://www.syncfusion.com/blogs/author/selva-ganapathy-k) ![Load Custom Badge UI in Your .NET MAUI App: An Overview](https://www.syncfusion.com/blogs/wp-content/uploads/2023/08/Load-Custom-Badge-UI-in-Your-NET-MAUI-App-An-Overview.png) If you’re developing a social networking or an e-commerce app, it’s essential to consider the significance of UI alert notifications. They serve as a vital means of notifying users that the app requires attention. While these notifications, or badges, are traditionally used to display popular symbols or text in an alert UI, custom symbols relevant to your app can also be incorporated. The Syncfusion [.NET MAUI Badge View](https://www.syncfusion.com/maui-controls/maui-badge-view) (SfBadgeView) is a notification control. It is used to notify users about new or unread messages, status information, and more. It can easily be integrated with controls like ListView, Tab View, and other container controls. You can position the badge text around the badge content, customize the badge background with predefined colors using predefined styles, and add animations to the badge text. In this blog, we’ll see how to integrate custom symbol badges into your app using the Syncfusion .NET MAUI Badge View control. ## .NET MAUI Badge View’s predefined symbols You can customize the badge icon in the .NET MAUI Badge View using the **Icon** property, which offers various [predefined symbols](https://help.syncfusion.com/maui/badge-view/predefined-symbols) , including Add, Available, Away, Busy, Delete, Dot, None, Prohibit1, and Prohibit2. If you don’t set the badge text, the badge icon will be displayed by default. ## Load custom symbols in the .NET MAUI Badge View The .NET MAUI Badge View control not only supports predefined symbols but also allows you to load custom symbols from**FontIcons**. Preparing your desired symbols as ** FontIcons** and setting the ** FontFamily** property of the .NET MAUI Badge View with the font file is the best way to do it. This feature enables you to load your required symbols in the badge easily. With custom font support in the Badge View, you can choose the font containing the custom icon you want to display, then set the font family to that font. Once you set the font family, you can use the **BadgeText** property to display the custom icon in the badge. With this feature, you can make your badges look more professional and tailored to your app’s specific needs. Follow these steps to load custom symbols in the Syncfusion [.NET MAUI Badge View](https://help.syncfusion.com/maui/badge-view/getting-started) control: **Step 1****:** [Create a new .NET MAUI app](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app) using [Visual Studio](https://visualstudio.microsoft.com/) . **Step 2**: The Syncfusion [.NET MAUI controls](https://www.syncfusion.com/maui-controls) are available on the [NuGet Gallery](https://www.nuget.org/) . To add [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) to your project, open the NuGet Package Manager in Visual Studio, and search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) , and then install it. **Step 3****:** In the ** MauiProgram.cs**file, register the handler for Syncfusion Core. ``` Using Microsoft.Extensions.Logging; using Syncfusion.Maui.Core.Hosting; namespace CustomSymbolBadgeView; public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp(); builder.ConfigureSyncfusionCore(); #if DEBUG builder.Logging.AddDebug(); #endif return builder.Build(); } } ``` **Step 4****:** Add the Syncfusion.Maui.Core namespace in your XAML page. ``` xmlns:syncfusion=”clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core” ``` **Step 5****:** Initialize the **.NET MAUI Badge View** control. ``` ``` **Step 6****:** Add the FontIcon file in**.ttf** format in the ** Solution Explorer** window under the ** Resource** > ** Fonts**folder. Refer to the following image.![Resource Manager File](https://www.syncfusion.com/blogs/wp-content/uploads/2023/08/Resource-Manager-File.png) **Step 7****:** Register the font using the ** ConfigureFonts** method in the ** MauiProgram.cs**file**.** ``` Using Microsoft.Extensions.Logging; using Syncfusion.Maui.Core.Hosting; namespace CustomSymbolBadgeView; public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp() .ConfigureFonts(fonts => { fonts.AddFont(“badgeview.ttf”, “badgeview”); }); builder.ConfigureSyncfusionCore(); #if DEBUG builder.Logging.AddDebug(); #endif return builder.Build(); } } ``` **Step 8****:** We can add text to the badges using the [BadgeText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1#Syncfusion_Maui_Core_SfBadgeView_BadgeText) property. To do so, we need to apply the **Unicode** or ** Glyph**value assigned in the ** FontIcon** file to the ** BadgeText** property. Here, I have two icons, ** Thumbs Up** and ** Thumbs Down**, that are assigned to glyph values ** A** and ** B**, respectively. ``` ``` **Step 9****:** Apply the required font in the Badge View using the ** FontFamily**property through [BadgeSettings](https://help.syncfusion.com/maui/badge-view/badge-customization) . **Step 10****:** Add the content. An image, button, ContentView, label, or any view can be added to the Badge View using the [Content](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_Content) property. ``` ``` Refer to the following output image. ![Adding Custom Symbol in .NET MAUI Badge View](https://www.syncfusion.com/blogs/wp-content/uploads/2023/08/Adding-Custom-Symbol-in-.NET-MAUI-Badge-View.png) Adding Custom Symbol in .NET MAUI Badge View ## Changing the custom symbols dynamically We have seen how to add custom symbols in the .NET MAUI Badge View control. Now let’s see how to create a UI that contains a list of items with dynamic badges that can be either like or dislike symbols. The like and dislike symbols will change to the other badge when its corresponding list item is tapped. To achieve this UI, follow these steps: **Note:** To design the list of items, we have used the [Syncfusion .NET MAUI ListView](https://help.syncfusion.com/maui/listview/getting-started) control. **Step 1****:** Set the [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_ItemsSource) property of the ListView to a collection of items from the view model, which will be displayed as a list. ``` ``` **Step 2****:** Set the [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_ItemTemplate) property of the ListView to a **DataTemplate**, which defines the layout of each item in the list. ``` ``` **Step 3****:** Add the ** ViewCell**, which is a container for a single item in the list. ``` ``` **Step 4****:** Let’s add the [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) control as a child to the **ViewCell**. This control displays a badge view that contains a badge with the text “A” and a custom green background. The ** WidthRequest** and ** HeightRequest** properties are used to specify the size of the badge view. ``` ``` **Step 5****:** Add the [TapGestureRecognizer](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.tapgesturerecognizer?view=net-maui-7.0) , which allows users to tap on the badge view, to the [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) control. ``` ``` **Step 6****:** Set the [BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html?tabs=tabid-1%2Ctabid-2) property of the [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) control to the **BadgeSettings** object, which specifies the font family, badge type, position, and background color of the badge. We’ll set the ** Type** property value as ** None** to allow the custom background color to be set via the [Background](https://help.syncfusion.com/cr/maui/Syncfusion.Presentation.IBackground.html) property. ``` ``` **Step 7****:** Add a ** Grid** as a child of the ** SfBadgeView** control. The ** Grid** contains a ** ContentView** with a green background color and another ** Grid** with a white background color. The ** Label** displays the text of each item in the list. ``` ``` **Step 8****:** In the code, declare an ** ObservableCollection** of strings called ** items** that is initialized with an empty collection. Then, declare a property called ** Items** to return the ** items** collection. ``` private ObservableCollection items = new ObservableCollection(); public ObservableCollection Items { get { return items; } set { items = value; } } public MainPage() { InitializeComponent(); } ``` **Step 9****:** In the ** MainPage**** constructor,** we’ve used a loop to add 100 items to the ** items** collection, with each item being a string that consists of ** Item** text with the current index converted to a string. The MainPage’s binding context is set to “** this**,” which is the MainPage itself. ``` private ObservableCollection items = new ObservableCollection(); public ObservableCollection Items { get { return items; } set { items = value; } } public MainPage() { for (int i = 0; i < 100; i++) { Items.Add("Item " + i.ToString()); } InitializeComponent(); this.BindingContext = this; } ``` **Step 10****:** When the user taps on the [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) control, the [TapGestureRecognizer.Tapped](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.tapgesturerecognizer.tapped?view=net-maui-7.0) event handler method will be called. This method checks if the event’s sender is an instance of the **SfBadgeView** control. If it is, then the method updates the badge by obtaining a reference to the border element within the SfBadgeView control, which contains the badge’s content. If the **BadgeText** property of the **SfBadgeView** control is set to “A,” the method changes it to “B” and sets the background color of both the border and badge to **red**. Otherwise, if the ** BadgeText**property is set to anything other than “A,” the method changes it back to “A” and sets the background color of both the border and badge to ** green**. Refer to the following code example. ``` private ObservableCollection items = new ObservableCollection(); public ObservableCollection Items { get { return items; } set { items = value; } } public MainPage() { for (int i = 0; i < 100; i++) { Items.Add("Item " + i.ToString()); } InitializeComponent(); this.BindingContext = this; } private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e) { if( sender is SfBadgeView badgeView) { var border = (badgeView.Content as Grid).Children[0] as ContentView; if (badgeView.BadgeText == "A") { badgeView.BadgeText = "B"; border.Background = Colors.Red; badgeView.BadgeSettings.Background = Colors.Red; } else { badgeView.BadgeText = "A"; border.Background = Colors.Green; badgeView.BadgeSettings.Background = Colors.Green; } } } ``` After executing the previous code examples, our output will look like the following image. ![Dynamically Updating Custom Badges in .NET MAUI App](https://www.syncfusion.com/blogs/wp-content/uploads/2023/08/Dynamically-Updating-Custom-Badges-in-.NET-MAUI-App.gif) Dynamically Updating Custom Badges in .NET MAUI App ## Conclusion Thanks for reading! In this blog, we’ve seen how to load custom symbol badges into your application using the Syncfusion [.NET MAUI Badge View control](https://www.syncfusion.com/maui-controls/maui-badge-view) . Try out the steps provided and leave your feedback in the comments section below! You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms) . We are always happy to assist you! ## Related blogs - [Using Microsoft Project Files with Syncfusion JavaScript Gantt Chart: A Beginner’s Guide](https://www.syncfusion.com/blogs/post/microsoft-project-files-in-javascript-gantt-chart.aspx) - [Convert Word Documents to Markdown and Vice Versa in C#](https://www.syncfusion.com/blogs/post/convert-word-to-markdown-csharp.aspx) - [Creating a .NET MAUI Hospital Appointment Booking App](https://www.syncfusion.com/blogs/post/dotnet-maui-hospital-appointment-booking-app.aspx) - [Implementing Data Validation in Excel Cells Using C#](https://www.syncfusion.com/blogs/post/data-validation-excel-csharp.aspx)