Introducing the New WinUI AvatarView Control
Tags: winui, ui, whatsnew, desktop
Published: 2023-04-12 16:20:59

---
title: Introducing the New WinUI AvatarView Control
published: true
date: 2023-04-12 11:57:46 UTC
tags: winui, ui, whatsnew, desktop
canonical_url: https://www.syncfusion.com/blogs/post/winui-avatarview-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9fi7k6lj8s76h0tpny5.png
---
We at [Syncfusion](https://www.syncfusion.com/ "Syncfusion UI components") are excited to introduce the new [WinUI AvatarView control](https://www.syncfusion.com/winui-controls/avatar-view "WinUI AvatarView control") in our [2023 Volume 1](https://www.syncfusion.com/forums/181344/essential-studio-2023-volume-1-main-release-v21-1-35-is-available-for-download "Essential Studio 2023 Volume 1") release.

The WinUI AvatarView control provides a graphical representation of a user’s image. This versatile control offers a wide range of customization options, including adding images, background colors, icons, and text, allowing you to create personalized and visually engaging user views.

In this blog, we will explore the features of this new WinUI AvatarView control and the steps to get started with it.

## Key features

The key features of the WinUI AvatarView control are:

- [Content types](#contenttypes)
- [Visual styles](#visualstyles)
- [Customization](#customization)

### <a name="contenttypes">Content types</a>

With the WinUI AvatarView control, you can show various content types, including initials, custom images, avatar characters, and group views.

#### Initials

The initials content type displays the first letter of the user’s name or names in the AvatarView. The initials will be formatted depending on the following InitialsType:

- **Single character** : Used to display a single character in the avatar. ![WinUI AvatarView showing single character](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/WinUI-AvatarView-showing-single-character-1.png)

- **Double character** : Used to display two characters in the avatar. ![WinUI AvatarView showing double character](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/WinUI-AvatarView-showing-double-character-1.png)

#### Custom image

You can set any custom image as the avatar for a user in the WinUI AvatarView control.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/WinUI-AvatarView-showing-a-custom-image-1.png" alt="WinUI AvatarView shows a custom image" style="width:100%">

  <figcaption>WinUI AvatarView shows a custom image</figcaption>

</figure>

#### Avatar characters

The WinUI AvatarView control supports 25 predefined avatar character images users can set as their avatars.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/WinUI-AvatarView-control-showing-avatar-character-image-1.png" alt="WinUI AvatarView control showing avatar character image" style="width:100%">

  <figcaption>WinUI AvatarView control showing avatar character image</figcaption>

</figure>

#### Group view

The group content type allows you to display up to three images or initials within a single avatar view.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Group-view-in-WinUI-AvatarView-control-1.png" alt="Group view in WinUI AvatarView control" style="width:100%">

  <figcaption>Group view in WinUI AvatarView control</figcaption>

</figure>

### <a name="visualstyles">Visual styles</a>

The WinUI AvatarView control comes with various predefined styles following modern design guidelines. It offers a range of sizing specifications for both square- and circle-shaped avatars: extra-large, large, medium, small, and extra-small.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/WinUI-AvatarView-with-pre-defined-circle-visual-styles-1.png" alt="WinUI AvatarView with pre-defined circle visual styles" style="width:100%">

  <figcaption>WinUI AvatarView with pre-defined circle visual styles</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/WinUI-AvatarView-with-pre-defined-square-visual-styles-1.png" alt="WinUI AvatarView with pre-defined square visual styles" style="width:100%">

  <figcaption>WinUI AvatarView with pre-defined square visual styles</figcaption>

</figure>

### <a name="customization">Customization</a>

We can easily customize AvatarView’s border, background, gradient background, font, and more.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/AvatarView-Border-customization.png" alt="WinUI AvatarView Border customization" style="width:100%">

  <figcaption>Border customization</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Solid-and-gradient-background-customization-2.png" alt="Solid and gradient background customization" style="width:100%">

  <figcaption>Solid and gradient background customization</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/AvatarView-Font-customization.png" alt="WinUI AvatarView Control Font customization" style="width:100%">

  <figcaption>Font customization</figcaption>

</figure>

## Getting started with the WinUI AvatarView control

We have explored the key features of the WinUI AvatarView control. Let’s see how to seamlessly integrate the double-character initial type avatar into your application.

### Step 1: Create a WinUI application.

First, create a simple WinUI project using the instructions in the [Create an App with the Windows App SDK](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/create-your-first-winui3-app?tabs=desktop-csharp "Creating your first WinUI 3 project") documentation.

### Step 2: Add the Syncfusion.Core.WinUI NuGet package.

Then, install the latest [Syncfusion.Core.WinUI ](https://www.nuget.org/packages/Syncfusion.Core.WinUI/ "Syncfusion.Core.WinUI NuGet Package")NuGet package in the application from [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery") or the installed location, **C:\Program Files (x86)\Syncfusion\Essential Studio\WinUI\xx.x.x.xx\NuGetPackages**.

**Note:** The **xx.x.xx** denotes the version of the installed Syncfusion WinUI Core package.

### Step 3: Add the namespace.

Include the **Syncfusion.UI.Xaml.Core** namespace in your XAML file. Refer to the following code.

```csharp
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Core"
```

### Step 4: Initialize the AvatarView control.

Now, initialize the WinUI AvatarView control with the double-character initial type. Refer to the following code example.

```xml
<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 AvatarSize="ExtraLarge"
                           AvatarName="Glenn McGrath"
                           Background="#FFF2E9C8"
                           InitialsType="DoubleCharacter"
                           Foreground="#FF69531C"/>
 </Grid>
 
</Page>
```

After executing the code example, we will get the double-character initials avatar like in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Integrating-the-AvatarView-control-in-WinUI-application-1.png" alt="Integrating the AvatarView control in WinUI application" style="width:100%">

  <figcaption>Integrating the AvatarView control in WinUI application</figcaption>

</figure>

## Conclusion

Thanks for reading! In this blog, we explored the features of the new Syncfusion [WinUI AvatarView](https://www.syncfusion.com/winui-controls/avatar-view "WinUI AvatarView control") control. This control is available in our [2023 Volume 1](https://www.syncfusion.com/forums/181344/essential-studio-2023-volume-1-main-release-v21-1-35-is-available-for-download "Essential Studio 2023 Volume 1") release. Check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v21.1.35 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New page") pages to see all the new updates in this release.

The new version of Essential Studio is available for the current customers from the [license and downloads](https://www.syncfusion.com/account/downloads "License and downloads page of Essential Studio")page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio products") to check out our newest features. Try them out and leave your feedback in the comments section below!

You can also download and check out our demo app in the [Microsoft Store](https://install.appcenter.ms/orgs/syncfusion-demos/apps/winui-demos/distribution_groups/release "Syncfusion WinUI demos on Microsoft Store").

For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/winui "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 1 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-1.aspx "Blog: Syncfusion Essential Studio 2023 Volume 1 Is Here!")
- [Experience Seamless Excel-Like Filtering in WinUI DataGrid ](https://www.syncfusion.com/blogs/post/excel-like-filtering-in-winui-datagrid.aspx "Blog: Experience Seamless Excel-Like Filtering in WinUI DataGrid")
- [Implement Fuzzy Search in Syncfusion WinUI AutoComplete](https://www.syncfusion.com/blogs/post/fuzzy-search-in-winui-autocomplete.aspx "Blog: Implement Fuzzy Search in Syncfusion WinUI AutoComplete")
- [Synchronize Outlook Calendar Events with Syncfusion WinUI Scheduler](https://www.syncfusion.com/blogs/post/synchronize-outlook-calendar-events-with-syncfusion-winui-scheduler.aspx "Blog: Synchronize Outlook Calendar Events with Syncfusion WinUI Scheduler")