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.
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>
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 inSyncfusion.Xamarin.SfBadgeView
fromnuget.org
. To know more aboutSfBadgeView
view, refer to this documentation.