This section provides a quick overview for working with the SfAvatarView for .NET MAUI. Walk through the entire process of creating a real world of this control.
- Create a new .NET MAUI application in Visual Studio.
- Syncfusion .NET MAUI components are available on nuget.org. To add SfAvatarView to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Core and then install it.
To use this control inside an application, you must register the handler for Syncfusion® core.
using Microsoft.Extensions.Logging;
using Syncfusion.Maui.Core.Hosting;
namespace AvatarViewGettingStarted
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureSyncfusionCore()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
#if DEBUG
builder.Logging.AddDebug();
#endif
return builder.Build();
}
}
}
- Import the control namespace
Syncfusion.Maui.Core
in XAML or C# code. - Initialize the SfAvatarView control.
<ContentPage
. . .
xmlns:sfavatar="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core">
<syncfusion:SfAvatarView />
</ContentPage>
using Syncfusion.Maui.Core;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
SfAvatarView avatarView = new SfAvatarView();
this.Content = avatarView;
}
}
<ContentPage.Content>
<Grid>
<sfavatar:SfAvatarView ContentType="Custom"
ImageSource="alex.png"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="100"
CornerRadius="50"
WidthRequest="100"
Stroke="Black"
StrokeThickness="2"/>
</Grid>
</ContentPage.Content>
Run the application to render the following output: