Getting Started with .NET MAUI BadgeView control

This guide provides the information you need to start using the Telerik UI for .NET MAUI BadgeView by adding the control to your project.

At the end, you will be able to achieve the following result.

Prerequisites

Before adding the BadgeView, you need to:

1. Set up your .NET MAUI application.

2. Download Telerik UI for .NET MAUI.

3. Install Telerik UI for .NET MAUI.

Define the Control

1. When the your .NET MAUI application is set up, you are ready to add a BadgeView control to your page.

   <telerik:RadBadgeView/>
   

   var badge = new RadBadgeView();
   

2. Add the following namespace:

   xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
   

3. Set Content and BadgeText properties. Note that the Badge marker (indicator), which is part of the BadgeView, will be visualized only if the Content property of the BadgeView is set.

   <telerik:RadBadgeView BadgeText="1" AutomationId="badgeView">
     <telerik:RadBadgeView.Content>
         <telerik:RadBorder WidthRequest="80"
                            HeightRequest="80"
                            BorderThickness="1"
                            BorderColor="LightGray">
             <Label Text="Telerik Badge View for MAUI" 
                    FontSize="14"
                    VerticalTextAlignment="Center"
                    HorizontalTextAlignment="Center"/>
         </telerik:RadBorder>
     </telerik:RadBadgeView.Content>
   </telerik:RadBadgeView>
   

   var badgeView = new RadBadgeView();
   badgeView.BadgeText = "1";
   badgeView.Content = new RadBorder
   {
   WidthRequest = 80,
   HeightRequest = 80,
   BorderThickness = 1,
   BorderColor = Colors.LightGray,
   Content = new Label
   {
       Text = "Telerik Badge View for MAUI",
       FontSize = 14,
       VerticalTextAlignment = TextAlignment.Center,
       HorizontalTextAlignment = TextAlignment.Center,
   },
   };
   

   For the BadgeView Getting Started example refer to the SDKBrowser Demo Application.

Additional Resources

• .NET MAUI BadgeView product page
• .NET MAUI BadgeView forum page
• Telerik .NET MAUI blogs
• Telerik .NET MAUI roadmap

See Also

• Configuration
• Badge Position and Alignment
• Badge Animation
• Badge Types