Introducing the New .NET MAUI Chat Management

In Syncfusion’s Important Studio 2024 Quantity 1 launch, we launched a ground-breaking new Chat management in our .NET MAUI platform.

The .NET MAUI Chat (SfChat) is a conversational UI management. It offers a contemporary, conversational chatbot expertise. It’s a versatile management that reveals the dialog between two or extra customers in a completely customizable format. The messages could be a completely different mixture of textual content, pictures, hyperlinks, playing cards, and extra.

Let’s discover this new astonishing .NET MAUI Chat management!

Key options

The important thing options of .NET MAUI Chat management are as follows:

Information binding

The .NET MAUI Chat management permits you to bind any present assortment of information objects as a message assortment utilizing the ItemsSource and ItemsSourceConverter properties.

Message sorts

The .NET MAUI Chat management lets customers show messages in numerous codecs, similar to textual content, pictures, hyperlinks, playing cards, calendars, and time pickers. By enabling the Creator.Title and Creator.Avatar properties, we will present the writer’s title and picture in all messages.

Totally different message sorts supported within the .NET MAUI Chat management

Time break

We are able to group messages primarily based on the date and time they’re created. This helps us to find messages from completely different durations shortly. To show the time break view in Chat management, set the ShowTimeBreak property to True.

Typing indicator

The chat management helps typing indicators that present an interactive consumer expertise. To allow the typing indicator view, set the ShowTypingIndicator property as True.  You may simply customise the avatar and textual content for the indicator by creating a brand new ChatTypingIndicator class occasion, setting the Authors and Textual content properties, and assigning the typing indicator occasion to the TypingIndicator property of SfChat.

Ideas

We are able to show the response strategies under a message or on the Chat management’s backside. To indicate strategies in a message, create a ChatSuggestions occasion and assign it to the specified message’s Ideas property. You can too embody pictures with strategies and prepare them vertically or horizontally.

Load extra

The Chat management lets customers load or fetch outdated messages on demand by scrolling to the highest of the message listing robotically or manually (by tapping the load extra button) by setting the LoadMoreBehavior as LoadMoreOption.Auto or LoadMoreOption.Handbook, respectively, and utilizing the LoadMoreCommand property.

Styling

You may customise the looks of the weather of the Chat management by making a useful resource dictionary and assigning values to the built-in keys assigned for every ingredient.

Notice: For extra particulars, discuss with the .NET MAUI Chat management documentation.

Getting began with the .NET MAUI Chat management

We’ve got seen the highest options of the .NET MAUI Chat management. Let’s see the way to add it to your software.

Step 1: Create a .NET MAUI undertaking

Start by making a .NET MAUI undertaking.

Step 2: Add the .NET MAUI Chat NuGet bundle

Syncfusion .NET MAUI controls can be found within the NuGet Gallery. To incorporate the .NET MAUI Chat management in your undertaking, entry the NuGet bundle supervisor in Visible Studio and seek for Syncfusion.Maui.Chat and set up it.

Step 3: Register the handler

Within the MauiProgram.cs file, register the Syncfusion core handler.

utilizing Syncfusion.Maui.Core.Internet hosting;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.ConfigureSyncfusionCore()
			
		return builder.Construct();
	}
}

Step 4: Add the namespace

Subsequent, add the Syncfusion.Maui.Chat namespace into your XAML web page.

<xmlns:syncfusion ="clr-namespace:Syncfusion.Maui.Chat;meeting=Syncfusion.Maui.Chat"/>

Step 5: Initialize the .NET MAUI Chat management

Then, initialize the .NET MAUI Chat management. Confer with the next code instance.

<syncfusion:SfChat x:Title="sfChat" />

Step 6: Bind the present consumer

The CurrentUser property helps distinguish between the message senders and receivers. In every chat window, the CurrentUser property represents the sender (writer of the outgoing message).

Create the CurrentUser property of kind Creator within the ViewModel class and bind it to the SfChat management by referring to the next code instance.

public class GettingStartedViewModel : INotifyPropertyChanged
{

        public Creator CurrentUser
        {
            get
            {
                return this.currentUser;
            }
            set
            {
                this.currentUser = worth;
                RaisePropertyChanged("CurrentUser");
            }
        }

        public GettingStartedViewModel()
        {
            . . .
            this.currentUser = new Creator() { Title = "Nancy"};
            . . .
        }
        . . .
        . . .
}

XAML

<sfchat:SfChat x:Title="sfChat" CurrentUser="{Binding CurrentUser}"/>

We are able to populate the information within the .NET MAUI Chart management utilizing the Messages or ItemSource property. Let’s see the way to obtain it with separate code examples.

Step 7: Information inhabitants utilizing Messages property

Generate the messages

Start by making a TextMessage occasion. Set the values for the Message.Creator and Message.Textual content properties, and add them to the ViewModel.Messages assortment.

For different messages like hyperlinks, pictures, playing cards, calendars, and time pickers, create cases for HyperlinkMessage, ImageMessage, CardMessage, CalendarMessage, and TimePickerMessage, respectively. Add these cases to the ViewModel.Messages assortment as nicely.

Confer with the next code instance.

public class GettingStartedViewModel : INotifyPropertyChanged
{
        . . .
        . . .
        public ObservableCollection<object> Messages
        {
            get
            {
                return this.messages;
            }

            set
            {
                this.messages = worth;
                RaisePropertyChanged(nameof(this.messages));    
            }
        }

        . . . 
        . . .

        personal void GenerateMessages()
        {
            this.messages.Add(new TextMessage()
            {
                Creator = currentUser,
                Textual content = "Hello guys, good morning! I am very delighted to share with you the information that our crew goes to launch a brand new cell software.",
            });

            this.messages.Add(new TextMessage()
            {
                Creator = new Creator() { Title = "Andrea", Avatar = "Andrea.png" },
                Textual content = "Oh! That is nice.",
            });
            this.messages.Add(new TextMessage()
            {
                Creator = new Creator() { Title = "Margaret", Avatar = "Margaret.png" },
                Textual content = "I have never heard of .NET MAUI. What's .NET MAUI?",
            });
            this.messages.Add(new TextMessage()
            {
                Creator = currentUser,
                Textual content = ".NET MAUI is a brand new library that allows you to construct native UIs for Android, iOS, macOS, and Home windows from one shared C# codebase.",
            });

            . . .
            . . .
            . . .
        }
}

Bind the SfChat.Messages property

Subsequent, set the binding context utilizing a ViewModel. Set up a connection to the SfChat’s management by configuring its Messages and CurrentUser properties within the Content material part of the XAML web page.

Confer with the next code instance.

<ContentPage.BindingContext>
 <native:ViewModel/>
</ContentPage.BindingContext>

<ContentPage.Content material>
       
 <sfchat:SfChat x:Title="sfChat"
                Messages="{Binding Messages}"
                CurrentUser="{Binding CurrentUser}"/>
</ContentPage.Content material>

Step 7: Information inhabitants utilizing ItemsSource property

The .NET MAUI Chat management permits us to certain information assortment utilizing the ItemsSource and ItemsSourceConverter properties.

To take action, repeat the earlier steps from 1 to six. Then, observe the under directions.

Create an information mannequin

Create a easy information mannequin to bind the information for SfChat, as proven within the following code instance.

public class MessageModel
{
        public Creator Person { get; set; }
        public string Textual content { get; set; }
}

Create a View Mannequin

Then, create a mannequin repository class and initialize its Messages assortment property with the required variety of information objects.

public class ViewModel : INotifyPropertyChanged
{
        personal Creator currentAuthor;

        ObservableCollection<MessageModel> messages;

        public ViewModel()
        {
            messages = new ObservableCollection<MessageModel>();
            currentAuthor = new Creator() { Title = "Stevan" };
            GenerateMessages();
        }

        public ObservableCollection<MessageModel> Messages
        {
            get
            {
                return messages;
            }

            set
            {
                messages = worth;
                RaisePropertyChanged("Messages");
            }
        }
        . . .
        . . .

        personal void GenerateMessages()
        {
            messages.Add(new MessageModel()
            {
                Person = currentAuthor,
                Textual content = "Hello guys, good morning! I am very delighted to share with you the information that our crew goes to launch a brand new cell software.",
            });

            messages.Add(new MessageModel()
            {
                Person = new Creator() { Title = "Andrea", Avatar = "peoplecircle16.png" },
                Textual content = "Oh! That is nice.",
            });

            messages.Add(new MessageModel()
            {
                Person = new Creator() { Title = "Harrison", Avatar = "peoplecircle14.png" },
                Textual content = "That's excellent news.",
            });
        }
        . . .
        . . .
}

Outline a customized message converter

Subsequent, create a category MessageConverter derived from the IChatMessageConverter interface and add conversion logic to transform information to message and vice versa utilizing the ConvertToChatMessage and ConvertToData strategies, respectively.

public class MessageConverter : IChatMessageConverter
    {
        public IMessage ConvertToChatMessage(object information, SfChat chat)
        {
            var message = new TextMessage();
            var merchandise = information as MessageModel;

            message.Textual content = merchandise.Textual content;
            message.Creator = merchandise.Person;
            message.Information = merchandise;
            return message;
        }

        public object ConvertToData(object chatMessage, SfChat chat)
        {
            var message = new MessageModel();
            var merchandise = chatMessage as TextMessage;

            message.Textual content = merchandise.Textual content;
            message.Person = chat.CurrentUser;
            return message;
        }
    }

Set the binding context and add a customized converter to assets

Now, set the ViewModel occasion because the BindingContext to your XAML web page to bind the ViewModel properties to SfChat.

Add the MessageConverter class to the Sources web page.

<ContentPage.BindingContext>
 <native:ViewModel/>
</ContentPage.BindingContext>
        
<ContentPage.Sources>
 <ResourceDictionary>
  <native:MessageConverter x:Key="messageConverter"/>
 </ResourceDictionary>
</ContentPage.Sources>

Binding information assortment and message converter to SfChat

Lastly, join the information assortment and message converter to the SfChat, as demonstrated within the following code instance.

<ContentPage.Content material>
 <sfChat:SfChat x:Title="sfChat"
                CurrentUser="{Binding CurrentUser}"
                ItemsSource="{Binding Messages}"
                ItemsSourceConverter="{StaticResource messageConverter}"/>
</ContentPage.Content material>

After executing the above code examples, we’ll get the next output.

References

For extra particulars, discuss with getting began with .NET MAUI Chat and changing information objects to messages in MVVM in .NET MAUI Chat GitHub demos.

Supercharge your cross-platform apps with Syncfusion’s sturdy .NET MAUI controls.

Strive It Free

Conclusion

Thanks for studying! We belief you discovered Syncfusion’s new .NET MAUI Chat management fascinating, with its trendy UI, information binding, message sorts, and customization choices. Discover extra updates in our Important Studio 2024 Quantity 1 by visiting our Launch Notes and What’s New pages.

If you’re not a Syncfusion buyer, we invite you to strive our 30-day free trial to expertise these newest options. Be at liberty to share any suggestions or questions within the feedback part under.

You can too attain us by way of our assist boards, assist portal, or suggestions portal. We’re at all times joyful to help you!

Associated blogs