Content Types in WinUI AvatarView

27 Mar 20238 minutes to read

The SfAvatarView control supports five types of content: Default, Initials, CustomImage, AvatarCharacter, and GroupView.

Default

The default content type displays the Avatar1 character image when initializing the control without the initials, custom image, or group source.

XAML

<syncfusion:SfAvatarView />

C#

SfAvatarView avatarView = new SfAvatarView();

Initials

The Initials content type displays initials in the AvatarView. To use this content type, you must provide a value for the AvatarName property, which sets the initials to be displayed in the avatar view. The initials will be formatted accordingly depending on the specified InitialsType property.

InitialsType

The InitialsType property includes two types:

SingleCharacter - Used to display a single character in the avatar.
DoubleCharacter - Used to display two characters in the avatar.

Single character

The single character initials type displays the first character of the AvatarName property value as the avatar.

XAML

<syncfusion:SfAvatarView ContentType="Initials"
                         AvatarSize="ExtraLarge"
                         AvatarName="Alex"
                         Background="Bisque">
</syncfusion:SfAvatarView>

C#

SfAvatarView avatarView = new SfAvatarView();
avatarView.AvatarName = "Alex";
avatarView.ContentType = AvatarContentType.Initials;
avatarView.AvatarSize = AvatarSize.ExtraLarge;
avatarView.Background = new SolidColorBrush(Colors.Bisque);

Double character

The double character initials type displays a two-character text as an avatar set in the AvatarName property. If the AvatarName consists of a single word, that word’s first and last letters will be displayed. However, if the AvatarName contains two or more words, the first letter of the first word and the first letter of the second word will be displayed.

XAML

<syncfusion:SfAvatarView ContentType="Initials"
                         AvatarSize="ExtraLarge"
                         AvatarName="Alex"
                         InitialsType="DoubleCharacter"
                         Background="Bisque">
</syncfusion:SfAvatarView>

C#

SfAvatarView avatarView = new SfAvatarView();
avatarView.AvatarName = "Alex";
avatarView.ContentType = AvatarContentType.Initials;
avatarView.AvatarSize = AvatarSize.ExtraLarge;
avatarView.InitialsType = AvatarInitialsType.DoubleCharacter;
avatarView.Background = new SolidColorBrush(Colors.Bisque);

Custom image

Add any custom image as the avatar by 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"));

Avatar character

Set the pre-defined avatar character images as avatar by using the AvatarCharacter property.

XAML

<syncfusion:SfAvatarView ContentType="AvatarCharacter"
                         AvatarSize="ExtraLarge"
                         AvatarCharacter="Avatar15">
</syncfusion:SfAvatarView>

C#

SfAvatarView avatarView = new SfAvatarView();
avatarView.ContentType = AvatarContentType.AvatarCharacter;
avatarView.AvatarSize = AvatarSize.ExtraLarge;
avatarView.AvatarCharacter = AvatarCharacter.Avatar15;

Group view

The Group content type allows you to display up to three images or initials within a single avatar view. To use this content type, you must set the following properties.

GroupSource: Used to set the ItemsSource for the group view.
InitialsMemberPath: Used to set the initials for the group view.
InitialsColorMemberPath: Used to set the initials color for the group view.
BackgroundColorMemberPath: Used to set the background color for the group view.
ImageSourceMemberPath: Used to set the image source for the group view.

The following code example illustrates how to create an ItemsSource for a group avatar view.

C#

public class Employee
{
   public string Name { get; set; }

   public string ImageSource { get; set; }

   public Color Background { get; set; }

   public Color InitialsColor { get; set; }
}

public class EmployeeViewModel
{
   public ObservableCollection<Employee> CollectionImage { get; set; }

   public EmployeeViewModel()
   {
      CollectionImage = new ObservableCollection<Employee>();
      CollectionImage.Add(new Employee { ImageSource="mike.png" });
      CollectionImage.Add(new Employee {  Name="Alex", Background=ColorHelper.FromArgb(0xFF, 0xD6, 0xE8, 0xD7), InitialsColor=ColorHelper.FromArgb(0xFF, 0x24, 0x4F, 0x23) });
      CollectionImage.Add(new Employee { ImageSource="ellanaa.png" });
   }    
}

The following code example illustrates how to set the group source and member paths for the avatar view.

XAML

<Page.DataContext>
    <local:EmployeeViewModel/>
</Page.DataContext>

<syncfusion:SfAvatarView ContentType="Group"   
                         GroupSource="{Binding CollectionImage}"
                         InitialsMemberPath="Name"
                         BackgroundColorMemberPath="Background"
                         ImageSourceMemberPath="ImageSource"
                         InitialsColorMemberPath="InitialsColor"
                         AvatarSize="ExtraLarge">
</syncfusion:SfAvatarView>

C#

public partial class MainWindow : Window
{
   public MainPage()
   {
      Grid grid = new Grid();
      EmployeeViewModel employeeViewModel = new EmployeeViewModel();
      grid.DataContext = employeeViewModel;
      SfAvatarView avatarView = new SfAvatarView();
      avatarView.ContentType = AvatarContentType.Group;
      avatarView.GroupSource = employee.CollectionImage;
      avatarView.ImageSourceMemberPath = "ImageSource";
      avatarView.InitialsMemberPath = "Name";
      avatarView.BackgroundColorMemberPath = "Background";
      avatarView.InitialsColorMemberPath = "InitialsColor";
      avatarView.AvatarSize = AvatarSize.ExtraLarge;
      grid.Children.Add(avatarView);
   }
}