How to show badges in .NET MAUI Avatar View (SfAvatarView)?

In .NET MAUI AvatarView, you can enhance the visual appeal of your control by adding badges using the BadgeView control. Badges can be used to display additional information or notifications related to the avatar. This guide will walk you through integrating badges with the AvatarView control.

Step 1: Update XAML to include BadgeView

Modify your XAML code to include the BadgeView control and configure its properties, such as BadgeText, and Position. The following example demonstrates how to integrate the BadgeView with AvatarView. This integration enhances both the visual appeal and functionality of your AvatarView control.

XAML

<Grid>
    <core:SfBadgeView BadgeText="" HeightRequest="65" WidthRequest="65" 
                      HorizontalOptions="Center" VerticalOptions="Center">
        <core:SfBadgeView.Content>
            <Grid>
                <core:SfAvatarView AvatarName="Alex" ContentType="Initials" 
                                   CornerRadius="25" HeightRequest="50" WidthRequest="50" 
                                   HorizontalOptions="Center" VerticalOptions="Center">
                </core:SfAvatarView>
            </Grid>
        </core:SfBadgeView.Content>
        <core:SfBadgeView.BadgeSettings>
            <core:BadgeSettings Position="BottomRight" FontFamily="SegmentIcon" Offset="-5,-5">
            </core:BadgeSettings>
        </core:SfBadgeView.BadgeSettings>
    </core:SfBadgeView>
</Grid> 

Output

Download the complete sample on GitHub

Conclusion
I hope you enjoyed learning how to show badges in .NET MAUI Avatar View (SfAvatarView).

Refer to our .NET MAUI Avatar View’s feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Avatar View documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Avatar View and other .NET MAUI components.

Please let us know in the following comments section 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!