Getting Started With .NET MAUI Avatar View (SfAvatarView)

Creating an application using the .NET MAUI Avatar View

This section explains the steps required to work with the SfAvatarView control for .NET MAUI.

Adding .NET MAUI Avatar View reference

The Syncfusion .NET MAUI controls are available in To add .NET MAUI Avatar View to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Core and then install it.

Handler registration

In the MauiProgram.cs file, register the handler for Syncfusion core.

  • C#
  • using Microsoft.Maui;
    using Microsoft.Maui.Hosting;
    using Microsoft.Maui.Controls.Compatibility;
    using Microsoft.Maui.Controls.Hosting;
    using Microsoft.Maui.Controls.Xaml;
    using Syncfusion.Maui.Core.Hosting;
    namespace AvatarViewSample
      public static class MauiProgram
    	public static MauiApp CreateMauiApp()
    		var builder = MauiApp.CreateBuilder();
    		.ConfigureFonts(fonts =>
    			fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    		return builder.Build();

    Adding a namespace

    Add the following namespace to add .NET MAUI Avatar View.

    using Syncfusion.Maui.Core;

    Adding the .NET MAUI Avatar View control

    You can add a custom image for displaying in .NET MAUI Avatar View using the ImageSource property.

        <sfavatar:SfAvatarView ContentType="Custom"
                               WidthRequest="50" />
    using Syncfusion.Maui.Core;
    namespace AvatarViewGettingStarted
        public partial class MainPage : ContentPage
            public MainPage()
    	        //main grid
                Grid mainGrid = new Grid();
                // Create an SfAvatarView control.
                SfAvatarView avatarview = new SfAvatarView();
                avatarview.VerticalOptions = LayoutOptions.Center;
                avatarview.HorizontalOptions = LayoutOptions.Center;
                avatarview.BackgroundColor = Color.FromRgba("#ffb6c1");
                avatarview.ContentType = ContentType.Custom;
                avatarview.ImageSource = "alex.png";
                avatarview.WidthRequest = 50;
                avatarview.HeightRequest = 50;
                avatarview.CornerRadius = 25;
                this.Content = mainGrid;

    The following screenshot illustrates the result of the above code.

    .NET MAUI Avatar View Getting Started

    The Getting Started sample of .NET MAUI Avatar View is available in this following link: Getting Started.


    You can refer to our .NET MAUI Avatar View feature tour page for its groundbreaking feature representations. You can also explore our .NET MAUI Avatar View Example that shows you how to render the Avatar View in .NET MAUI.