How to apply style to the .NET MAUI Badge View control (SfBadgeView)?

In .NET MAUI, you can enhance the visual appearance of the BadgeView control by applying a custom style. This section explains how to apply a style to the .NET MAUI Badge View control.

Step 1: Define Style in XAML

Define a Style resource within your XAML file’s ContentPage.Resources section. This style sets the BadgeText and customizes various properties of the BadgeSettings for the BadgeView.

XAML

 <contentpage.resources>
     <Style TargetType="core:SfBadgeView" x:Key="badgeView" >
         <Setter Property="BadgeText">New User</Setter>
         <Setter Property="BadgeSettings">
             <Setter.Value>
                 <core:BadgeSettings Position="TopRight"                                      
                                      CornerRadius="5"
                                      Offset="-15,-8"
                                      Type="None" 
                                      BadgeAlignment="Start" />
             </Setter.Value>
         </Setter>
     </Style>
 </contentpage.resources>

Step 2: Apply Style to BadgeView
Within your layout, apply the defined style to the BadgeView control. Here’s an example of using the style within a Grid:

XAML

<grid>
    <core:sfbadgeview horizontaloptions="Center" verticaloptions="Center" style="{StaticResource badgeView}">
        <core:sfbadgeview.content>
            <img source="People_Circle1.png" verticaloptions="Center" horizontaloptions="Center" heightrequest="100" widthrequest="100">
        </core:sfbadgeview.content>
    </core:sfbadgeview>
</grid>

Output

Download the complete sample on GitHub

Conclusion

I hope you enjoyed learning how to apply a style to the .NET MAUI Badge View control (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.

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