Getting Started with WinUI AvatarView

13 Aug 20263 minutes to read

This section explains how to get started with the WinUI SfAvatarView control and configure its basic features.

Creating an application with WinUI AvatarView

1. Create a WinUI 3 desktop application in C#.
2. Install the Syncfusion.Core.WinUI NuGet package.
3. Import the Syncfusion.UI.Xaml.Core namespace in XAML or C#.
4. Add and initialize the SfAvatarView control.

Initialize AvatarView

By default, SfAvatarView displays the Avatar1 character image with an AvatarShape value of Circle and an AvatarSize value 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:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Core"
    mc:Ignorable="d"
    Title="AvatarView Getting Started">
    <Grid>
      <syncfusion:SfAvatarView />
    </Grid>
</Window>

C#

using Microsoft.UI.Xaml;
using Syncfusion.UI.Xaml.Core;

namespace GettingStarted;

/// <summary>
/// A window that hosts the default WinUI AvatarView (SfAvatarView) control.
/// </summary>
public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();

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

Initialize AvatarView with ImageSource

You can display a custom image in the SfAvatarView control by setting its ImageSource property.

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:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Core"
    mc:Ignorable="d"
    Title="AvatarView with ImageSource">
    <Grid>
        <syncfusion:SfAvatarView ContentType="CustomImage"
                                 AvatarSize="ExtraLarge"
                                 ImageSource="ms-appx:///Assets/Images/person.png">
        </syncfusion:SfAvatarView>
    </Grid>
</Window>

C#

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Media.Imaging;
using Syncfusion.UI.Xaml.Core;

namespace GettingStarted;

/// <summary>
/// A window that hosts the WinUI AvatarView (SfAvatarView) control with a custom image source.
/// </summary>
public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();

        // Creating an instance of the AvatarView control with a custom image.
        SfAvatarView avatarView = new SfAvatarView();
        avatarView.ContentType = AvatarContentType.CustomImage;
        avatarView.AvatarSize = AvatarSize.ExtraLarge;
        avatarView.ImageSource = new BitmapImage(new Uri("ms-appx:///Assets/Images/person.png"));
        this.Content = avatarView;
    }
}