How to use badge for WPF AvatarView

25 Apr 20252 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>