Getting Started with WinUI AvatarView

27 Mar 20231 minute to read

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

Creating an application with WinUI AvatarView

1. Create a WinUI 3 desktop app for C# and .NET 6.
2. Add reference to Syncfusion.Core.WinUI NuGet.
3. Import the control namespace Syncfusion.UI.Xaml.Core in XAML or C# code.
4. Initialize the SfAvatarView control.

Initialize AvatarView

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

XAML

<Page
    x:Class="GettingStarted.MainPage"
    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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
      <syncfusion:SfAvatarView />
    </Grid>
</Page>

C#

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

Initialize AvatarView with ImageSource

Add any custom image as an avatar in WinUI 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"));