How to show badges in Xamarin.Forms Avatar View (SfAvatarView)

4 mins read

The following section explains how to show the badges on SfAvatarView.

Refer SfAvatarView and SfBadgeView getting started documentation to create a simple sample and its configuration.

Initialize the SfBadgeView and SfAvatarView in XAML or code behind with the properties required and add SfAvatarView as SfBadgeView content.

XAML

<badge:SfBadgeView x:Name="StatusBadge" 
                               VerticalOptions="Center"
                               HorizontalOptions="Center"
                               BadgeText=""
                               HeightRequest="65"
                               WidthRequest="65">
                <badge:SfBadgeView.Content>
                    <Grid>
                    <sfavatar:SfAvatarView ContentType="Initials" AvatarName="Alex"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"   
                           HeightRequest="50"
                           CornerRadius="25"
                           WidthRequest="50" />
                    </Grid>
                </badge:SfBadgeView.Content>
                <badge:SfBadgeView.BadgeSettings>
                    <badge:BadgeSetting Offset="-5,-5" BadgePosition="BottomRight" FontFamily="{StaticResource fontFamily}"
                                        BadgeAnimation="Scale"
                                      />
                </badge:SfBadgeView.BadgeSettings>
            </badge:SfBadgeView>

Output
SfBadges on SfAvatarView

Please find the sample from this link

Did you find this information helpful?

Yes

Comments (0)

How to show badges in Xamarin.Forms Avatar View (SfAvatarView)

Access denied