---
title: "Introducing the New .NET MAUI Chat Control"
published_at: "2024-03-28T15:20:53+00:00"
modified_at: "2026-02-10T08:36:08+00:00"
url: "https://www.syncfusion.com/blogs/post/dotnet-maui-chat-control"
excerpt: "This blog explains the features of the new Syncfusion .NET MAUI Chat control added in the 2024 Volume 1 release and the steps to get started."
taxonomy_category:
  - ".NET MAUI"
  - "Desktop"
  - "Mobile"
  - "Syncfusion"
  - "UI"
  - "What's new"
taxonomy_post_tag:
  - ".NET MAUI"
  - "desktop"
  - "MAUI"
  - "Mobile"
  - "What's New"
---

# Introducing the New .NET MAUI Chat Control

[Piruthiviraj Malaimelraj](https://www.syncfusion.com/blogs/author/piruthiviraj-malaimelraj)

![Introducing the New .NET MAUI Chat control](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/NET-MAUI-Chat-Control-1.png)


**TLDR:** Exploring the robust features of the new Syncfusion .NET MAUI Chat control, highlighting its modern UI, data binding, message types, and customization options for dynamic conversations. You can also find the steps to integrate it into your .NET MAUI app.

In Syncfusion’s [Essential Studio® 2024 Volume 1](https://www.syncfusion.com/forums/187257/essential-studio-2024-volume-1-main-release-v25-1-35-is-available-for-download)
release, we introduced a ground-breaking new Chat control in our [.NET MAUI](https://www.syncfusion.com/maui-controls/)
 platform.

The [.NET MAUI Chat](https://www.syncfusion.com/maui-controls/maui-chat)
 (SfChat) is a conversational UI control. It provides a modern, conversational chatbot experience. It is a flexible control that shows the conversation between two or more users in a fully customizable layout. The messages can be a different combination of text, images, hyperlinks, cards, and more.

Let’s explore this new astonishing .NET MAUI Chat control!

## Key features

The key features of .NET MAUI Chat control are as follows:

- [Data binding](#Data)
- [Message types](#Message)
- [Time break](#Time)
- [Typing indicator](#Typing)
- [Suggestions](#Suggestions)
- [Load more](#Load)
- [Styling](#Styling)

### Data binding

The .NET MAUI Chat control allows you to bind any existing collection of data objects as a message collection using the [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_ItemsSource)
 and [ItemsSourceConverter](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_ItemsSourceConverter)
 properties.

### Message types

The .NET MAUI Chat control lets users display messages in different formats, such as text, images, hyperlinks, cards, calendars, and time pickers. By enabling the [Author.Name](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.Author.html#Syncfusion_Maui_Chat_Author_Name)
 and [Author.Avatar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.Author.html#Syncfusion_Maui_Chat_Author_Avatar)
 properties, we can show the author’s name and image in all messages.

| Calendar message | Image message |
| --- | --- |
| Text message | Cards message |

**Different message types supported in the .NET MAUI Chat control**

### Time break

We can group messages based on the date and time they are created. This helps us to locate messages from different periods quickly. To display the time break view in Chat control, set the [ShowTimeBreak](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_ShowTimeBreak)
 property to **True**.

![Time break view in the .NET MAUI Chat control](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Time-break-view-in-the-.NET-MAUI-Chat-control.png)

Time break view in the .NET MAUI Chat control

### Typing indicator

The chat control supports typing indicators that provide an interactive user experience. To enable the typing indicator view, set the [ShowTypingIndicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_ShowTypingIndicator)
 property as **True**. You can easily customize the avatar and text for the indicator by creating a new [ChatTypingIndicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.ChatTypingIndicator.html)
 class instance, setting the [Authors](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.ChatTypingIndicator.html#Syncfusion_Maui_Chat_ChatTypingIndicator_Authors)
 and [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.ChatTypingIndicator.html#Syncfusion_Maui_Chat_ChatTypingIndicator_Text)
 properties, and assigning the typing indicator instance to the [TypingIndicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_TypingIndicator)
 property of **SfChat**.

![Typing indicator in the .NET MAUI Chat control](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Typing-indicator-in-the-.NET-MAUI-Chat-control.png)

Typing indicator in the .NET MAUI Chat control

### Suggestions

We can display the response suggestions below a message or at the Chat control’s bottom. To show suggestions in a message, create a [ChatSuggestions](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.ChatSuggestions.html)
 instance and assign it to the desired message’s [Suggestions](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.MessageBase.html#Syncfusion_Maui_Chat_MessageBase_Suggestions)
 property. You can also include images with suggestions and arrange them vertically or horizontally.

![Message suggestions in the .NET MAUI Chat control](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Message-suggestions-in-the-.NET-MAUI-Chat-control.png)

Message suggestions in the .NET MAUI Chat control

### Load more

The Chat control lets users load or fetch old messages on demand by scrolling to the top of the message list automatically or manually (by tapping the load more button) by setting the [LoadMoreBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_LoadMoreBehavior)
 as [LoadMoreOption.Auto](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.LoadMoreOption.html#Syncfusion_Maui_ListView_LoadMoreOption_Auto)
 or [LoadMoreOption.Manual](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.LoadMoreOption.html#Syncfusion_Maui_ListView_LoadMoreOption_Manual)
, respectively, and using the [LoadMoreCommand](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_LoadMoreCommand)
 property.

![Load more feature in the .NET MAUI Chat control](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Load-more-feature-in-the-.NET-MAUI-Chat-control.gif)

Load more feature in the .NET MAUI Chat control

### Styling

You can customize the appearance of the elements of the Chat control by creating a resource dictionary and assigning values to the built-in keys assigned for each element.

![Customizing the styles in the .NET MAUI Chart control](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Styling-in-the-.NET-MAUI-Chart-control.png)

Customizing the styles in the .NET MAUI Chart control

**Note:** For more details, refer to the [.NET MAUI Chat control documentation](https://help.syncfusion.com/maui/chat/overview)
.

## Getting started with the .NET MAUI Chat control

We have seen the top features of the .NET MAUI Chat control. Let’s see how to add it to your application.

### Step 1: Create a .NET MAUI project

Begin by [creating a .NET MAUI project](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android)
.

### Step 2: Add the .NET MAUI Chat NuGet package

Syncfusion .NET MAUI controls are available in the [NuGet Gallery](https://www.nuget.org/)
. To include the .NET MAUI Chat control in your project, access the **NuGet package manager** in [Visual Studio](https://visualstudio.microsoft.com/)
 and search for [Syncfusion.Maui.Chat](https://www.nuget.org/packages/Syncfusion.Maui.Chat)
 and install it.

### Step 3: Register the handler

In the **MauiProgram.cs** file, register the Syncfusion core handler.

```
using Syncfusion.Maui.Core.Hosting;

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

### Step 4: Add the namespace

Next, add the **Syncfusion.Maui.Chat** namespace into your XAML page.

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

### Step 5: Initialize the .NET MAUI Chat control

Then, initialize the .NET MAUI Chat control. Refer to the following code example.

```
<syncfusion:SfChat x:Name="sfChat" />
```

### Step 6: Bind the current user

The [CurrentUser](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_CurrentUser)
 property helps distinguish between the message senders and receivers. In each chat window, the **CurrentUser** property represents the sender (author of the outgoing message).

Create the **CurrentUser** property of type ** Author** in the ** ViewModel** class and bind it to the SfChat control by referring to the following code example.

```
public class GettingStartedViewModel : INotifyPropertyChanged
{

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

        public GettingStartedViewModel()
        {
            . . .
            this.currentUser = new Author() { Name = "Nancy"};
            . . .
        }
        . . .
        . . .
}
```

**XAML**

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

We can populate the data in the .NET MAUI Chart control using the **Messages** or ** ItemSource** property. Let’s see how to achieve it with separate code examples.

### Step 7: Data population using Messages property

#### Generate the messages

Begin by creating a [TextMessage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.TextMessage.html)
 instance. Set the values for the **Message.Author** and ** Message.Text** properties, and add them to the ** ViewModel.Messages** collection.

For other messages like hyperlinks, images, cards, calendars, and time pickers, create instances for [HyperlinkMessage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.HyperlinkMessage.html)
, [ImageMessage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.ImageMessage.html)
, [CardMessage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.CardMessage.html)
, [CalendarMessage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.CalendarMessage.html)
, and [TimePickerMessage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.TimePickerMessage.html)
, respectively. Add these instances to the **ViewModel.Messages** collection as well.

Refer to the following code example.

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

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

        . . . 
        . . .

        private void GenerateMessages()
        {
            this.messages.Add(new TextMessage()
            {
                Author = currentUser,
                Text = "Hi guys, good morning! I'm very delighted to share with you the news that our team is going to launch a new mobile application.",
            });

            this.messages.Add(new TextMessage()
            {
                Author = new Author() { Name = "Andrea", Avatar = "Andrea.png" },
                Text = "Oh! That's great.",
            });
            this.messages.Add(new TextMessage()
            {
                Author = new Author() { Name = "Margaret", Avatar = "Margaret.png" },
                Text = "I haven't heard of .NET MAUI. What's .NET MAUI?",
            });
            this.messages.Add(new TextMessage()
            {
                Author = currentUser,
                Text = ".NET MAUI is a new library that lets you build native UIs for Android, iOS, macOS, and Windows from one shared C# codebase.",
            });

            . . .
            . . .
            . . .
        }
}
```

#### Bind the SfChat.Messages property

Next, set the binding context using a **ViewModel**. Establish a connection to the SfChat’s control by configuring its ** Messages** and ** CurrentUser** properties in the ** Content** section of the XAML page.

Refer to the following code example.

```
<ContentPage.BindingContext>
 <local:ViewModel/>
</ContentPage.BindingContext>

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

### Step 7: Data population using ItemsSource property

The .NET MAUI Chat control allows us to bound data collection using the **ItemsSource** and ** ItemsSourceConverter** properties.

To do so, repeat the previous steps from 1 to 6. Then, follow the below instructions.

#### Create a data model

Create a simple data model to bind the data for SfChat, as shown in the following code example.

```
public class MessageModel
{
        public Author User { get; set; }
        public string Text { get; set; }
}
```

#### Create a View Model

Then, create a model repository class and initialize its **Messages** collection property with the required number of data objects.

```
public class ViewModel : INotifyPropertyChanged
{
        private Author currentAuthor;

        ObservableCollection<MessageModel> messages;

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

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

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

        private void GenerateMessages()
        {
            messages.Add(new MessageModel()
            {
                User = currentAuthor,
                Text = "Hi guys, good morning! I'm very delighted to share with you the news that our team is going to launch a new mobile application.",
            });

            messages.Add(new MessageModel()
            {
                User = new Author() { Name = "Andrea", Avatar = "peoplecircle16.png" },
                Text = "Oh! That's great.",
            });

            messages.Add(new MessageModel()
            {
                User = new Author() { Name = "Harrison", Avatar = "peoplecircle14.png" },
                Text = "That is good news.",
            });
        }
        . . .
        . . .
}
```

#### Define a custom message converter

Next, create a class **MessageConverter** derived from the [IChatMessageConverter](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.IChatMessageConverter.html)
 interface and add conversion logic to convert data to message and vice versa using the **ConvertToChatMessage** and ** ConvertToData** methods, respectively.

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

            message.Text = item.Text;
            message.Author = item.User;
            message.Data = item;
            return message;
        }

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

            message.Text = item.Text;
            message.User = chat.CurrentUser;
            return message;
        }
    }
```

#### Set the binding context and add a custom converter to resources

Now, set the ViewModel instance as the BindingContext to your XAML page to bind the ViewModel properties to SfChat.

Add the **MessageConverter** class to the Resources page.

```
<ContentPage.BindingContext>
 <local:ViewModel/>
</ContentPage.BindingContext>
        
<ContentPage.Resources>
 <ResourceDictionary>
  <local:MessageConverter x:Key="messageConverter"/>
 </ResourceDictionary>
</ContentPage.Resources>
```

#### Binding data collection and message converter to SfChat

Finally, connect the data collection and message converter to the SfChat, as demonstrated in the following code example.

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

After executing the above code examples, we will get the following output.

![Integrating Chat control in a .NET MAUI app](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Integrating-Chat-control-in-a-.NET-MAUI-app.png)

Integrating Chat control in a .NET MAUI app

## References

For more details, refer to [getting started with .NET MAUI Chat](https://github.com/SyncfusionExamples/getting-started-with-.net-maui-chat)
 and [converting data objects to messages in MVVM in .NET MAUI Chat GitHub demos](https://github.com/SyncfusionExamples/convert-data-objects-to-messages-in-mvvm-in-.net-maui-chat)
.


## Conclusion

Thanks for reading! We trust you found Syncfusion’s new [.NET MAUI Chat control](https://www.syncfusion.com/maui-controls/maui-chat)
 fascinating, with its modern UI, data binding, message types, and customization options. Explore more updates in our [Essential Studio®2024 Volume 1](https://www.syncfusion.com/forums/187257/essential-studio-2024-volume-1-main-release-v25-1-35-is-available-for-download)
 by visiting our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v25.1.35)
 and [What’s New](https://www.syncfusion.com/products/whatsnew)
 pages.

If you are not a Syncfusion customer, we invite you to try our [30-day free trial](https://www.syncfusion.com/downloads/maui)
 to experience these latest features. Feel free to share any feedback or questions in the comments section below.

You can also reach us through our [support forums](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback)
. We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio® 2024 Volume 1 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2024-vol-1)
- [Streamline Your Progress Navigation with the New .NET MAUI StepProgressBar](https://www.syncfusion.com/blogs/post/dotnet-maui-step-progress-bar)
- [Introducing the New .NET MAUI Rotator Control](https://www.syncfusion.com/blogs/post/dotnet-maui-rotator-control)
- [Introducing the New .NET MAUI Radial Menu Control](https://www.syncfusion.com/blogs/post/dotnet-maui-radial-menu-control)