Getting Started with WPF AvatarView

24 Mar 20252 minutes to read

This section explains the steps required to add the WPF SfAvatarView control with its basic features.

Creating an application with WPF AvatarView

Follow these steps to integrate the SfAvatarView control into your WPF application:

1. Create a new WPF application.
2. Add the Syncfusion.Shared.WPF NuGet package to your project.
3. Import the Syncfusion WPF schema in your XAML file: xmlns:syncfusion="http://schemas.syncfusion.com/wpf".
4. Initialize the SfAvatarView control in your XAML file.

Initialize AvatarView

By default, AvatarView control is displayed with the Avatar1 character image, AvatarShape of Circle, and AvatarSize of Small.

XAML

<Window x:Class="GettingStarted.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GettingStarted"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <syncfusion:SfAvatarView />
    </Grid>
</Window>

C#

// Creating an instance of the AvatarView control.
SfAvatarView avatarView = new SfAvatarView();

Initialize AvatarView with ImageSource

Add any custom image as an avatar in WPF AvatarView control using the ImageSource property.

XAML

<syncfusion:SfAvatarView ContentType="CustomImage"
                         AvatarSize="ExtraLarge"
                         ImageSource="Images\person.png">
</syncfusion:SfAvatarView>

C#

SfAvatarView avatarView = new SfAvatarView();
avatarView.ContentType = AvatarContentType.CustomImage;
avatarView.AvatarSize = AvatarSize.ExtraLarge;
avatarView.ImageSource = new BitmapImage(new Uri("ms-appx:///Images\\person.png"));