Tuesday, July 23, 2024
HomeC#Create Group Chat Profile View in .NET MAUI App

Create Group Chat Profile View in .NET MAUI App


One of the crucial typical person interfaces in chat functions is the group view. Virtually all chat software program permits for group chat, which calls for the standard group photograph to function the group’s illustration. A helpful function of the .NET MAUI Avatar View management is group view assist. If you give the Avatar View a bunch supply, it can remodel it into a bunch view routinely. Let’s see how straightforward it’s to attain this in a .NET MAUI utility.

.NET MAUI Avatar View

Virtually all cell apps have a person interface that exhibits the customers’ initials or an avatar picture (like involved lists, photographs in tokens, and chat person shows). We at Syncfusion acknowledge the necessity for this simple however essential management, and we at the moment are providing the feature-rich .NET MAUI Avatar View management. The .NET MAUI Avatar View management provides customers a graphic illustration that may be custom-made by together with photographs, background colours, icons, textual content, and extra.

.NET MAUI avatar group chat profile view

The .NET MAUI Avatar View (SfAvatarView) management means that you can show the view in 5 other ways:

  • Default: Shows the default picture when initializing with out every other supply reminiscent of picture or group.
  • Initials: Shows initials within the view.
  • AvatarCharacter: Shows a default picture within the view.
  • Customized: Shows a customized picture within the view.
  • Group: Shows a most of three photographs or initials in a single view.

The group content material sort gives a bunch chat profile view in a .NET MAUI utility.

Steps to combine a bunch chat profile view

Step 1: Get the category that incorporates the gathering of members of the chat view. I’ve ready a easy class that incorporates a group of customers.

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

Step 2: Create an object for the earlier class and set it as binding content material to the web page the place you could show the group chat profile view.

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

Step 3: Embrace the .NET MAUI Avatar View reference. The NuGet packages for Syncfusion .NET MAUI controls can be found on Nuget.org. So as to add the .NET MAUI Avatar View to your mission, open the NuGet bundle supervisor in Visible Studio, seek for Syncfusion.Maui.Core, after which set up it.

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

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

Step 5: Add the next XML namespace and embody .NET MAUI Avatar View.

<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;meeting=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 Image.

.NET MAUI Group Chat Profile View
.NET MAUI Group Chat Profile View

Customization

Within the earlier group chat profile view, you may customise the next properties.

Nook radius

You may set the nook radius to be round. Check with the next code.

<Syncfusion:SfAvatarView WidthRequest="250"
                         HeightRequest="250"
                         CornerRadius="125"
                         BackgroundColor="Black"
                         ContentType="Group"
                         GroupSource="{Binding GroupMembers}"
ImageSourceMemberPath="Image"/>
.NET MAUI Group Chat Profile View⁠—Circular Image
.NET MAUI Group Chat Profile View⁠—Round Picture

 Initials view

To point out solely the initials, set the InitialsMemberPath property to Title. To set completely different background colours to the initials, retailer the colours in a group and assign it to the BackgroundColorMemberPath property. Check with the next code.

<Syncfusion:SfAvatarView
    ContentType="Group"
    GroupSource="{Binding GroupMembers}"
    InitialsMemberPath="Title"
    BackgroundColorMemberPath="Coloration"/>
.NET MAUI Group Chat Profile View⁠—Initials View
.NET MAUI Group Chat Profile View⁠—Initials View

Word: If we assign values to each ImageSourceMemberPath and InitialsMemberPath, ImageSourceMemberPath will likely be given the primary desire.

Displaying each picture and preliminary view

If the objects within the assortment wouldn’t have the picture supply set, then the initials will show.

GroupMembers.Add(new Individual() { Title = "Selva Ganapathy", Image = "selvaganapathy.png", Coloration = Colours.LightBlue });
GroupMembers.Add(new Individual() { Title = "Clara", Image = "clara.png", Coloration = Colours.LightPink });
GroupMembers.Add(new Individual() { Title = "Alexandar", Coloration = Colours.LightGreen });

For instance, within the earlier code, the third merchandise is just not assigned a picture, so the outcome will likely be much like the next screenshot.

.NET MAUI Group Chat Profile View⁠—Image and Initials View
.NET MAUI Group Chat Profile View⁠—Picture and Initials View

Group chat profile view⁠—cascading view

You may merely bind the Avatar View to a HorizonalStackLayout to current it as a cascading view for the group profile view. Check with the next code instance.

<HorizontalStackLayout BindableLayout.ItemsSource="{Binding GroupMembers}" >
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Syncfusion:SfAvatarView Margin="-45,0,0,0"
                                     HeightRequest="100"
                                     WidthRequest="100"
                                     CornerRadius="50"
                                     ContentType="Customized"
                                     ImageSource="{Binding Image}"/>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</HorizontalStackLayout>
.NET MAUI Group Chat Profile View⁠—Cascading View
.NET MAUI Group Chat Profile View⁠—Cascading View

Conclusion

Thanks for studying! On this weblog submit, we’ve got gone via the group chat profile view function of the .NET MAUI Avatar View management. You may obtain Important Studio for .NET MAUI to guage this management.

Please tell us within the feedback under when you have any questions or require clarification about this management. You may as well contact us via our assist discussion boardassist portal, or suggestions portal. We’re completely satisfied to help you!

Associated blogs

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments