How to create a contact list with initials using .NET MAUI Avatar View (SfAvatarView)?
The .NET Multi-platform App UI (MAUI) .NET MAUI Avatar View (Initials View) provides a graphical representation of the user image. You can customize the view by adding an image, background color, icon, text, and more.
The .NET MAUI Initials View can be achieved using the ContentType property, which should be set to Initials.
Type of .NET MAUI Initials View
There are two types of .NET MAUI Initials View available in the SfAvatarView:
- Single-character initial view.
- Double-character initial view.
.NET MAUI Single Character Initial View
The .NET MAUI single-character initial view can be achieved using the SingleCharacter option of the InitialsType property of the SfAvatarView.
The following code sample is an example for .NET MAUI Initials View with a single character.
XAML:
<sfAvatar:SfAvatarView ContentType="Initials" InitialsType="SingleCharacter" > </sfAvatar:SfAvatarView>
.NET MAUI Double Character Initials View
The .NET MAUI double-character initial view can be achieved using the DoubleCharacter option of the InitialsType property of the SfAvatarView.
The following code sample is an example for .NET MAUI Initials View with double characters.
XAML:
<sfAvatar:SfAvatarView ContentType="Initials" InitialsType="DoubleCharacter" > </sfAvatar:SfAvatarView>
Steps to add .NET MAUI Initials View
This section explains how to create a contact list with an initials view with a double character in a .NET MAUI application.
Step 1: Create a .NET MAUI application project in Visual Studio 2022.
Step 2: Add the Syncfusion.Maui.Core Nuget to the project from nuget.org.
Step 3: In the MauiProgram.cs file, register the Syncfusion.Maui.Core handler is as follows.
C#:
using Syncfusion.Maui.Core.Hosting;
namespace AvatarView_ContactList;
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();
}
}
Step 4: Add the .NET MAUI Avatar View control namespace to the MainPage.xaml.
XAML:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AvatarView_ContactList.MainPage" xmlns:sfAvatar="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" xmlns:local="clr-namespace:AvatarView_ContactList">
Step 5: Create a list of contact details in the view model. Have a property Name that holds the value to be shown as in the .NET MAUI Initials View.
C#:
public class Contact
{
public string Name { get; set; }
}
public class ContactsViewModel
{
public List<Contact> ListOfContacts { get; set; }
public ContactsViewModel()
{
ListOfContacts = new List<Contact>();
ListOfContacts.Add(new Contact() { Name = "Tucker Davis" });
ListOfContacts.Add(new Contact() { Name = "Elizabeth Ann" });
ListOfContacts.Add(new Contact() { Name = "Lily Sue" });
ListOfContacts.Add(new Contact() { Name = "Mary Margaret" });
ListOfContacts.Add(new Contact() { Name = "Sophia Grace" });
ListOfContacts.Add(new Contact() { Name = "Andrew James" });
ListOfContacts.Add(new Contact() { Name = "George Frances" });
ListOfContacts.Add(new Contact() { Name = "James Richard" });
ListOfContacts.Add(new Contact() { Name = "John Peter" });
ListOfContacts.Add(new Contact() { Name = "Logan James" });
}
}
Step 6: Define the Avatar View (SfAvatarView) in the XAML and set the ContentType as Initials and set the InitialType property as DoubleCharacter. To create initials for the contact in the .NET MAUI Avatar View, populate the contact list in the collection view, and bind the contact’s name to the AvatarName property.
This will display the Avatar View as Initials View in a circle shape.
XAML:
<ContentPage.BindingContext>
<local:ContactsViewModel/>
</ContentPage.BindingContext>
<Grid>
<CollectionView ItemsSource="{Binding ListOfContacts}">
<CollectionView.ItemTemplate>
<DataTemplate>
<HorizontalStackLayout Spacing="10" Margin="10">
<sfAvatar:SfAvatarView ContentType="Initials"
InitialsType="DoubleCharacter"
AvatarName="{Binding Name}"
WidthRequest="50"
AvatarColorMode="LightBackground"
HeightRequest="50"
CornerRadius="25">
</sfAvatar:SfAvatarView>
<Label Text="{Binding Name}"
HorizontalOptions="Center"
VerticalOptions="Center"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"/>
</HorizontalStackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
Download the complete sample on GitHub
Output:
Conclusion
I hope you enjoyed learning how to create a contact list with initials using .NET MAUI Avatar View (SfAvatarView).
You can refer to our .NET MAUI Avatar View’s feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Avatar View documentation to understand how to present and manipulate data.
For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our .NET MAUI Avatar View and other .NET MAUI components.
If you have any queries or require clarification, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
