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.

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>

Use the following namespace:

xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.Maui.Controls.Compatibility"

The following image shows the final result.

For the Badge Styling Example go to the FeaturesCategory folder in the SDKBrowser Demo Application.

Styling

See Also

Community