How to

22 Jan 20205 minutes to read

Set badge view to avatar

The SfAvatarView control provides support for BadgeView to notify users of new or unread messages, notifications, or the status of something.

XAML

xmlns:badge="clr-namespace:Syncfusion.XForms.BadgeView;assembly=Syncfusion.SfBadgeView.XForms"
.......

        <badge:SfBadgeView VerticalOptions="Center"
                           HorizontalOptions="Center">
            <badge:SfBadgeView.Content>
                <sfavatar:SfAvatarView  HorizontalOptions="Center"
                                        ContentType="Custom"
                                        ImageSource="alex.png"
                                        VerticalOptions="Center"
                                        WidthRequest="60"
                                        HeightRequest="60"
                                        CornerRadius="30">
                </sfavatar:SfAvatarView>
            </badge:SfBadgeView.Content>
            <badge:SfBadgeView.BadgeSettings>
                <badge:BadgeSetting Offset="-10,-10"
                                    BadgeAnimation="Scale"
                                    BadgePosition="BottomRight" 
                                    BadgeType="Success"
                                    BadgeIcon="Away"/>
            </badge:SfBadgeView.BadgeSettings>
        </badge:SfBadgeView>

C#

using Syncfusion.XForms.BadgeView;
    .................

            SfBadgeView badge = new SfBadgeView();
            badge.HorizontalOptions = LayoutOptions.Center;
            badge.VerticalOptions = LayoutOptions.Center;
            badge.BadgeSettings = new BadgeSetting();
            BadgeSetting badgeSetting = new BadgeSetting();
            badgeSetting.BadgeType = BadgeType.Success;
            badgeSetting.BadgeIcon = BadgeIcon.Away;
            badgeSetting.BadgePosition = BadgePosition.BottomRight;
            badgeSetting.BadgeAnimation = BadgeAnimation.Scale;
            badgeSetting.Offset = new Point(-10, -10);
            badge.BadgeSettings = badgeSetting;

            Grid mainGrid = new Grid();
            SfAvatarView avatarview = new SfAvatarView();
            avatarview.HorizontalOptions = LayoutOptions.Center;
            avatarview.VerticalOptions = LayoutOptions.Center;
            avatarview.WidthRequest = 60;
            avatarview.HeightRequest = 60;
            avatarview.CornerRadius = 30;
            avatarview.ImageSource = "alex.png";
            avatarview.ContentType = ContentType.Custom;
            badge.Content = avatarview;
            mainGrid.Children.Add(badge);
            this.Content = mainGrid;

NOTE

The SfBadgeView is available in Syncfusion.Xamarin.SfBadgeView from nuget.org. To know more about SfBadgeView view, refer to this documentation.