How to use badge for WPF AvatarView

25 Apr 20253 minutes to read

The SfAvatarView control supports various SfBadge states to notify users of new or unread messages, notifications, or status updates.

The following code explains how to set SfBadge for SfAvatarView.

XAML

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <syncfusion:SfAvatarView 
         x:Name="avatarView"
         ContentType="AvatarCharacter"
         AvatarCharacter="Avatar1"       
         AvatarShape="Circle"
         AvatarSize="Large" >
        <syncfusion:SfBadge.Badge>
            <syncfusion:SfBadge x:Name="badge" Shape="None" HorizontalPosition="0.83" VerticalPosition="0.85">
                <syncfusion:SfBadge.Content>
                    <Viewbox x:Name="badgeViewBox">
                        <Grid Height="13" Width="13">
                            <Ellipse x:Name="ellipse" Fill="LimeGreen" Stroke="White" StrokeThickness="1"/>   
                            <TextBlock x:Name="badgeTextBlock"
                                FontFamily="Segoe MDL2 Assets"
                                Text="&#xE930;"
                                Foreground="White"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"/>
                        </Grid>
                    </Viewbox>
                </syncfusion:SfBadge.Content>
            </syncfusion:SfBadge>
        </syncfusion:SfBadge.Badge>
    </syncfusion:SfAvatarView>
</Grid>