Getting Started With .NET MAUI Avatar View (SfAvatarView)

25 Jan 20244 minutes to read

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 Nuget.org. 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();
		builder
		.UseMauiApp<App>()
		.ConfigureSyncfusionCore()
		.ConfigureFonts(fonts =>
		{
			fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
		});

		return builder.Build();
	 }
   
  }

}

Adding a namespace

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

XAML

xmlns:sfavatar="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"

C#

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.

XAML

<ContentPage.Content>
<Grid>
    <sfavatar:SfAvatarView ContentType="Custom"
                           ImageSource="alex.png"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"   
                           HeightRequest="50"
                           CornerRadius="25"
                           WidthRequest="50" />
</Grid>
</ContentPage.Content>

C#

using Syncfusion.Maui.Core;

namespace AvatarViewGettingStarted
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            
	        //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;
            mainGrid.Children.Add(avatarview);
            this.Content = mainGrid;
        }
    }
}

The following screenshot illustrates the result of the above code.

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

NOTE

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.