Styling

The BadgeView exposes a number of properties which allow you to style the appearance of the Badge indicator.

To style the Badge, use the following options:

• BadgeText(string)—Defines the Badge text.
• BadgeTextColor(Microsoft.Maui.Graphics.Color)—Defines the Badge text color.
• BadgeTextMargin(Microsoft.Maui.Thickness)—Defines the margin of the Badge text.
• BadgeFontSize(double)—Defines the font size of the Badge text.
• BadgeFontFamily(string)—Defines the font family of the Badge text.
• BadgeFontAttributes(Microsoft.Maui.Controls.FontAttributes)—Defines the font attributes of the Badge text.
• BadgeBackgroundColor(Microsoft.Maui.Graphics.Color)—Defines the background color of the Badge.
• BadgeBorderColor(Microsoft.Maui.Graphics.Color)—Defines the Badge border color.
• BadgeBorderThickness(Microsoft.Maui.Thickness)—Defines the thickness of the Badge border.
• BadgeCornerRadius(Microsoft.Maui.Thickness)—Defines the corner radius of the Badge border.
• BadgeMinimumWidth(double)—Defines the minimum width of the Badge.
• BadgeMinimumHeight(double)—Defines the minimum height of the Badge.

To configure the predefined types of the Badge, use the BadgeType property. Setting the BadgeText will override the predefined icon for the Badge type.

The following example demonstrates how to style the Badge indicator.

1. Define the BadgeView with some of the above properties.

   <telerik:RadBadgeView BadgeText="&#xE80D;"
                                 BadgeFontFamily="TelerikFont"
                                 BadgeTextColor="White"
                                 BadgeBorderThickness="2"
                                 BadgeCornerRadius="3"
                                 BadgeMinimumHeight="25"
                                 BadgeMinimumWidth="25"
                                 BadgeFontSize="18"
                                 BadgeBorderColor="#0DA6FF"
                                 HorizontalOptions="Center"
                                 BadgeBackgroundColor="#FF6F00"
                                 x:Name="badgeView">
     <telerik:RadBadgeView.Content>
         <Image WidthRequest="100"
                HeightRequest="100"
                Source="avatar.png"/>
     </telerik:RadBadgeView.Content>
   </telerik:RadBadgeView>
   

2. Add the telerik namespace:

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

   The following image shows the final result.

For the BadgeView Styling example, go to the SDKBrowser Demo Application and navigate to BadgeView -> Features category.

See Also

• Configuration
• Badge Position and Alignment
• Badge Animation
• Customization