Introducing the New WinUI AvatarView Control
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (168).NET Core  (29).NET MAUI  (154)Angular  (95)ASP.NET  (51)ASP.NET Core  (81)ASP.NET MVC  (89)Azure  (40)Blazor  (186)BoldSign  (11)DocIO  (24)Essential JS 2  (101)Essential Studio  (194)File Formats  (51)Flutter  (127)JavaScript  (214)Microsoft  (118)PDF  (77)Python  (1)React  (87)Streamlit  (1)Succinctly series  (130)Syncfusion  (761)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (46)Windows Forms  (59)WinUI  (64)WPF  (147)Xamarin  (160)XlsIO  (29)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (135)Chart  (93)Cloud  (14)Company  (445)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (61)Development  (536)Doc  (7)DockingManager  (1)eBook  (98)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (30)Extensions  (21)File Manager  (6)Gantt  (17)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (426)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (36)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (11)Scheduler  (48)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (29)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (110)UI  (294)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (26)Visual Studio Code  (17)Web  (492)What's new  (276)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the New WinUI AvatarView Control

Introducing the New WinUI AvatarView Control

We at Syncfusion are excited to introduce the new WinUI AvatarView control in our 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

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
  • Double character: Used to display two characters in the avatar.WinUI AvatarView showing double character

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
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
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
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
WinUI AvatarView with pre-defined circle visual styles
WinUI AvatarView with pre-defined square visual styles
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
Border customization
Solid and gradient background customization
Solid and gradient background customization
WinUI AvatarView Control Font customization
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 documentation.

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

Then, install the latest Syncfusion.Core.WinUI NuGet package in the application from 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.

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.

<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.

Integrating the AvatarView control in WinUI application
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 control. This control is available in our 2023 Volume 1 release. Check out our Release Notes and What’s New 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 page. If you are not a Syncfusion customer, try our 30-day free trial 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.

For questions, you can contact us through our support forumssupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top