Create Group Chat Profile View in .NET MAUI App
Tags: dotnet, maui, mobile
Published: 2022-09-16 12:36:59

---
title: Create Group Chat Profile View in .NET MAUI App
published: true
date: 2022-09-16 11:30:45 UTC
tags: dotnet, maui, mobile
canonical_url: https://www.syncfusion.com/blogs/post/create-group-chat-profile-view-in-net-maui-app.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/va6qzxqlk9s8cwvj1wnj.png
---

One of the most typical user interfaces in chat applications is the group view. Almost all chat software allows for group chat, which calls for a standard group photo to serve as the group’s representation. A useful feature of the [.NET MAUI Avatar View control is group view](https://www.syncfusion.com/maui-controls/maui-avatarview ".NET MAUI Avatar View control") support. When you give the Avatar View a group source, it will transform it into a group view automatically. Let’s see how easy it is to achieve this in a .NET MAUI application.

## .NET MAUI Avatar View

Almost all mobile apps have a user interface that shows the users’ initials or an avatar image (like in contact lists, images in tokens, and chat user displays). We at Syncfusion recognize the need for this straightforward but crucial control, and we are now offering the feature-rich [.NET MAUI Avatar View control](https://www.syncfusion.com/maui-controls/maui-avatarview ".NET MAUI Avatar View control"). The .NET MAUI Avatar View control gives users a graphic representation that can be customized by including images, background colors, icons, text, and more.

## .NET MAUI avatar group chat profile view

The .NET MAUI Avatar View ([SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1 "UG documentation: SfAvatarView")) control allows you to display the view in five different ways:

- **Default** : Displays the default image when initializing without any other source such as image or group.
- **Initials** : Displays initials in the view.
- **AvatarCharacter** : Displays a default image in the view.
- **Custom** : Displays a custom image in the view.
- **Group** : Displays a maximum of three images or initials in a single view.

The group content type provides a group chat profile view in a .NET MAUI application.

## Steps to integrate a group chat profile view

**Step 1** : Get the class that contains the collection of members of the chat view. I have prepared a simple class that contains a collection of users.

```csharp
public GroupMemberViewModel()
{
    GroupMembers = new ObservableCollection();GroupMembers.Add(new Person() { Name = "Selva Ganapathy", Picture = "selvaganapathy.png" });
    GroupMembers.Add(new Person() { Name = "Clara", Picture = "clara.png" });
    GroupMembers.Add(new Person() { Name = "Alexandar", Picture = "alexandar.png" });
    GroupMembers.Add(new Person() { Name = "Gabriella", Picture = "gabriella.png" });
    GroupMembers.Add(new Person() { Name = "Lita", Picture = "lita.png" });
    GroupMembers.Add(new Person() { Name = "Nora", Picture = "nora.png" });
    GroupMembers.Add(new Person() { Name = "Sebastian", Picture = "sebastian.png" });
    GroupMembers.Add(new Person() { Name = "Tye", Picture = "tye.png" });
    GroupMembers.Add(new Person() { Name = "Jennifer", Picture = "jennifer.png" });
    GroupMembers.Add(new Person() { Name = "Jackson", Picture = "jackson.png" });
}
public class Person
{
    public String Name { get; set; }
    public String Picture { get; set; }
}
```

**Step 2** : Create an object for the previous class and set it as binding content to the page where you need to display the group chat profile view.

```csharp
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.BindingContext = new GroupMemberViewModel();
    }
}
```

**Step 3** : Include the .NET MAUI Avatar View reference. The NuGet packages for Syncfusion .NET MAUI controls are available on [Nuget.org](https://www.nuget.org/ "Link to NuGet website"). To add the [.NET MAUI Avatar View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1 "UG documentation: SfAvatarView") to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/ "Syncfusion.Maui.Core NuGet package"), and then install it.

**Step 4** : Then, in the MauiProgram.cs file, register the handler for Syncfusion core.

```csharp
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
        .UseMauiApp()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        }
        );builder.ConfigureSyncfusionCore();return builder.Build();
    }
}
```

**Step 5** : Add the following XML namespace and include .NET MAUI Avatar View.

```html
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:Syncfusion="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
           x:Class="GroupProfileView.MainPage">
    <Grid>
        <Syncfusion:SfAvatarView />
    </Grid>
</ContentPage>
```

**Step 6** : Set the **ContentTypeProperty** as **Group** , bind the **GroupSource** property to **GroupMembers** , and set the **ImageSoureMemberPath** property to **Picture**.

![.NET MAUI Group Chat Profile View](https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/NET-MAUI-Group-Chat-Profile-View.png)
<figcaption>.NET MAUI Group Chat Profile View</figcaption>

## Customization

In the previous group chat profile view, you can customize the following properties.

### Corner radius

You can set the corner radius to be circular. Refer to the following code.

```html
<Syncfusion:SfAvatarView WidthRequest="250"
                         HeightRequest="250"
                         CornerRadius="125"
                         BackgroundColor="Black"
                         ContentType="Group"
                         GroupSource="{Binding GroupMembers}"
ImageSourceMemberPath="Picture"/>
```

![.NET MAUI Group Chat Profile View⁠—Circular Image](https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/NET-MAUI-Group-Chat-Profile-View_%E2%80%94Circular-Image.png)
<figcaption>.NET MAUI Group Chat Profile View⁠—Circular Image</figcaption>

###  Initials view

To show only the initials, set the **InitialsMemberPath** property to **Name**. To set different background colors to the initials, store the colors in a collection and assign it to the **BackgroundColorMemberPath** property. Refer to the following code.

```html
<Syncfusion:SfAvatarView
    ContentType="Group"
    GroupSource="{Binding GroupMembers}"
    InitialsMemberPath="Name"
    BackgroundColorMemberPath="Color"/>
```

![.NET MAUI Group Chat Profile View⁠—Initials View](https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/NET-MAUI-Group-Chat-Profile-View_%E2%80%94Initials-View.png)
<figcaption>.NET MAUI Group Chat Profile View⁠—Initials View</figcaption>

**Note:** If we assign values to both ImageSourceMemberPath and InitialsMemberPath, ImageSourceMemberPath will be given the first preference.

### Displaying both image and initial view

If the items in the collection do not have the image source set, then the initials will display.

```csharp
GroupMembers.Add(new Person() { Name = "Selva Ganapathy", Picture = "selvaganapathy.png", Color = Colors.LightBlue });
GroupMembers.Add(new Person() { Name = "Clara", Picture = "clara.png", Color = Colors.LightPink });
GroupMembers.Add(new Person() { Name = "Alexandar", Color = Colors.LightGreen });
```

For example, in the previous code, the third item is not assigned an image, so the result will be similar to the following screenshot.

![.NET MAUI Group Chat Profile View⁠—Image and Initials View](https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/NET-MAUI-Group-Chat-Profile-View_%E2%80%94Image-and-Initials-View.png)
<figcaption>.NET MAUI Group Chat Profile View⁠—Image and Initials View</figcaption>

## Group chat profile view⁠—cascading view

You can simply bind the Avatar View to a **HorizonalStackLayout** to present it as a cascading view for the group profile view. Refer to the following code example.

```html
<HorizontalStackLayout BindableLayout.ItemsSource="{Binding GroupMembers}" >
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Syncfusion:SfAvatarView Margin="-45,0,0,0"
                                     HeightRequest="100"
                                     WidthRequest="100"
                                     CornerRadius="50"
                                     ContentType="Custom"
                                     ImageSource="{Binding Picture}"/>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</HorizontalStackLayout>
```

![.NET MAUI Group Chat Profile View⁠—Cascading View](https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/NET-MAUI-Group-Chat-Profile-View_%E2%80%94Cascading-View.png)
<figcaption>.NET MAUI Group Chat Profile View⁠—Cascading View</figcaption>

## Conclusion

Thanks for reading! In this blog post, we have gone through the group chat profile view feature of the [.NET MAUI Avatar View](https://www.syncfusion.com/maui-controls/maui-avatarview ".NET MAUI Avatar View control") control. You can download [Essential Studio for .NET MAUI](https://www.syncfusion.com/downloads/maui "Free evaluation of the Syncfusion Essential Studio") to evaluate this control.

Please let us know in the comments below if you have any questions or require clarification about this control. You can also contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms "Syncfusion feedback portal"). We are happy to assist you!

## Related blogs

- [Replicating an Immersive UI in .NET MAUI](https://www.syncfusion.com/blogs/post/replicating-an-immersive-ui-in-net-maui.aspx "Blog: Replicating an Immersive UI in .NET MAUI")
- [Learn Performing Animation in .NET MAUI: Part 1](https://www.syncfusion.com/blogs/post/learn-performing-animation-in-net-maui-part-1.aspx "Blog: Learn Performing Animation in .NET MAUI: Part 1")
- [Add Busy Notifications to Your .NET MAUI Application](https://www.syncfusion.com/blogs/post/add-busy-notifications-to-your-net-maui-application.aspx "Blog: Add Busy Notifications to Your .NET MAUI Application")
- [Introducing the New .NET MAUI Maps Control](https://www.syncfusion.com/blogs/post/introducing-the-new-net-maui-maps-control.aspx "Blog: Introducing the New .NET MAUI Maps Control")