--- title: "Introducing the New WinUI AvatarView Control" published_at: "2023-04-12T11:57:46+00:00" modified_at: "2026-01-19T09:34:12+00:00" url: "https://www.syncfusion.com/blogs/post/winui-avatarview-control" excerpt: "This blog explains the features of the new WinUI AvatarView control introduced in the 2023 Vol 1 release and the steps to get started with it." taxonomy_category: - "Desktop" - "Syncfusion" - "UI" - "What's new" - "WinUI" taxonomy_post_tag: - "desktop" - "Syncfusion" - "UI" - "What's New" - "WinUI" --- # Introducing the New WinUI AvatarView Control [Manivannan Elangovan](https://www.syncfusion.com/blogs/author/manivannan-elangovan) ![Introducing the New WinUI AvatarView Control](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Introducing-the-New-WinUI-AvatarView-Control.png) We at [Syncfusion](https://www.syncfusion.com/) are excited to introduce the new [WinUI AvatarView control](https://www.syncfusion.com/winui-controls/avatar-view) 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) 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) ### Content types 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. ![WinUI AvatarView shows a custom image](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/WinUI-AvatarView-showing-a-custom-image-1.png) WinUI AvatarView showing a custom image #### Avatar characters The WinUI AvatarView control supports 25 predefined avatar character images users can set as their avatars. ![WinUI AvatarView control showing avatar character image](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/WinUI-AvatarView-control-showing-avatar-character-image-1.png) WinUI AvatarView control showing avatar character image #### Group view The group content type allows you to display up to three images or initials within a single avatar view. ![Group view in WinUI AvatarView control](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Group-view-in-WinUI-AvatarView-control-1.png) Group view in WinUI AvatarView contro ### Visual styles 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. ![WinUI AvatarView with pre-defined circle visual styles](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/WinUI-AvatarView-with-pre-defined-circle-visual-styles-1.png) WinUI AvatarView with pre-defined circle visual styles ![WinUI AvatarView with pre-defined square visual styles](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/WinUI-AvatarView-with-pre-defined-square-visual-styles-1.png) WinUI AvatarView with pre-defined square visual styles ### Customization We can easily customize AvatarView’s border, background, gradient background, font, and more. ![WinUI AvatarView Border customization](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/AvatarView-Border-customization.png) Border customization ![Solid and gradient background customization](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Solid-and-gradient-background-customization-2.png) Solid and gradient background customization ![WinUI AvatarView Control Font customization](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/AvatarView-Font-customization.png) Font customization ## 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) 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/) NuGet package in the application from [NuGet Gallery](https://www.nuget.org/) 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. ``` 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. ``` ``` After executing the code example, we will get the double-character initials avatar like in the following image. ![Integrating the AvatarView control in WinUI application](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Integrating-the-AvatarView-control-in-WinUI-application-1.png) Integrating the AvatarView control in a WinUI application ## 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) 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) release. Check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v21.1.35) and [What’s New](https://www.syncfusion.com/products/whatsnew) 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) page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads) 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) . For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/winui) . 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) - [Experience Seamless Excel-Like Filtering in WinUI DataGrid](https://www.syncfusion.com/blogs/post/excel-like-filtering-in-winui-datagrid.aspx) - [Implement Fuzzy Search in Syncfusion WinUI AutoComplete](https://www.syncfusion.com/blogs/post/fuzzy-search-in-winui-autocomplete.aspx) - [Synchronize Outlook Calendar Events with Syncfusion WinUI Scheduler](https://www.syncfusion.com/blogs/post/synchronize-outlook-calendar-events-with-syncfusion-winui-scheduler.aspx)