---
title: "Introducing the Xamarin.Forms Chat Control (Conversational UI)"
published_at: "2020-02-04T12:00:33+00:00"
modified_at: "2025-03-20T09:18:05+00:00"
url: "https://www.syncfusion.com/blogs/post/xamarin-forms-chat-control-conversational-ui"
excerpt: "We are happy to announce that a new Chat control (conversational UI) has been introduced to Syncfusion’s Xamarin.Forms suite in the 2019 Volume 4 release. The Chat control provides a modern, conversational chat experience. It is a flexible control that..."
taxonomy_category:
  - "Desktop"
  - "Xamarin"
taxonomy_post_tag:
  - "Chat"
  - "Chatbot"
  - "New Controls"
  - "Xamarin"
  - "Xamarin.Forms"
---

# Introducing the Xamarin.Forms Chat Control (Conversational UI)

[Neelakandan Kannan](https://www.syncfusion.com/blogs/author/neelakandan-kannan)

![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Xamarin-Forms-Chat-control.png)


We are happy to announce that a new [Chat control](https://www.syncfusion.com/xamarin-ui-controls/xamarin-chat)
 (conversational UI) has been introduced to Syncfusion’s Xamarin.Forms suite in the [2019 Volume 4](https://www.syncfusion.com/forums/150001/essential-studio-2019-volume-4-release-v17-4-0-39-is-available-for-download)
 release. The Chat control provides a modern, conversational chat experience. It is a flexible control that shows a conversation between two or more users in a fully customizable layout.

The Chat control provides compatibility with popular chatbot development frameworks such as [Microsoft’s Bot Framework](https://azure.microsoft.com/en-in/services/bot-service/)
 and [Amazon Lex](https://aws.amazon.com/lex/)
.

Let’s walk through the features available in the new Chat control.

## Different message types

The Chat control supports different message types in which users can display different controls as part of their messages. The following message types are supported:

- [Text](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Chat.TextMessage.html)
- [Hyperlink](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Chat.HyperlinkMessage.html)
- [Time picker](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Chat.TimePickerMessage.html)
- [Date picker](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Chat.DatePickerMessage.html)
- [Calendar](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Chat.CalendarMessage.html)

Each message also includes an avatar view showing the image of the author, the author’s name, and the created date. You can add a message using the [Messages](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Chat.SfChat.html#Syncfusion_XForms_Chat_SfChat_Messages)
 property.

Let’s see how to add simple text messages.

**XAML**

```
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sfChat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">

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

**ViewModel**

```
public class ViewModel : INotifyPropertyChanged
{

…………………………..

    public ViewModel()
    {
        this.Messages = new ObservableCollection<object>();
        this.CurrentUser = new Author() { Name = "Nancy",Avatar = "Nancy.png" };
        this.GenerateMessages();
    }

   public ObservableCollection<object> Messages
    {
        get
        {
            return this.messages;
        }
        set
        {
            this.messages = value;
        }
    }

…………………………….
    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.",
            ShowAvatar = true,
        });
        this.Messages.Add(new TextMessage()
        {
            Author = new Author() { Name = "Andrea",Avatar = "Andrea.png" },
            Text = "Oh! That's great.",
            ShowAvatar = true,
        });
        this.Messages.Add(new TextMessage()
        {
            Author = new Author() { Name = "Harrison",Avatar = "Harrison.png" },
            Text = "That is good news.",
            ShowAvatar = true,
        });
        this.Messages.Add(new TextMessage()
        {
            Author = new Author() { Name = "Margaret",Avatar = "Margaret.png" },
            Text = "What kind of application is it and when are we going to launch?",
            ShowAvatar = true,
        });
    }
}
```

![Different message types - Xamarin Chat control](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Different-message-types-Xamarin-Chat-control.png)

## Sending messages to users

You can easily send a message to another user by using the editor available at the bottom of the Chat control.![Sending message to users - Xamarin Chat Control](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Sending-message-to-users-Xamarin-Chat-Control.gif)

## Time break mode

The Chat control provides a convenient way to group messages based on the date and time the messages were created. So, users can easily identify the messages in the order they were created. You can use the [ShowTimeBreak](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Chat.SfChat.html#Syncfusion_XForms_Chat_SfChat_ShowTimeBreak)
 property to enable the time break mode.

```
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sfChat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">

    <ContentPage.BindingContext>
        <local:GettingStartedViewModel/>
    </ContentPage.BindingContext>
    
    <ContentPage.Content>
        <sfChat:SfChat x:Name="sfChat"
                       ShowTimeBreak="True"
                       Messages="{Binding Messages}"
                       CurrentUser="{Binding CurrentUser}" />
    </ContentPage.Content>

</ContentPage>
```

![Time break mode - Xamarin Chat control](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Time-break-mode-Xamarin-Chat-control.png)

## Suggestions

Most chatbot applications will need to display a list of suggestions or options to ensure users choose from the available responses to a question. You can show the suggestions to choose from in a message or at the bottom of the Chat control.

The **Suggestions** property is available in every message and Chat control.

```
…………………………………………..
private void GenerateMessages()
    {
………………………………………….
ChatSuggestions chatSuggestions =  new ChatSuggestions();
ObservableCollection<ISuggestion> suggestions = new ObservableCollection<ISuggestion>();
        suggestions.Add(new Suggestion("Airways 1", "Flight1.png"));
        suggestions.Add(new Suggestion("Airways 2", "Flight2.png"));
        suggestions.Add(new Suggestion("Airways 3", "Flight3.png"));
        suggestions.Add(new Suggestion("Airways 4", "Flight4.png"));
        suggestions.Add(new Suggestion("Airways 5", "Flight5.png"));
        suggestions.Add(new Suggestion("Airways 6", "Flight6.png"));
        chatSuggestions.Items = suggestions;

        this.messages.Add(new TextMessage()
        {
            Author = new Author() { Avatar ="Aeroplane.png", Name = "Travel Bot" },
            Text = "Here's my suggestion",
            Suggestions = suggestions,
            ShowAvatar = true,
        });   
    }
```

![Suggestions - Xamarin Chat control](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Suggestions-Xamarin-Chat-control.png)

## Typing indicator

You can easily set a typing indicator to show when users are currently typing for an interactive user experience. You can show the indicator by using [ShowTypingIndicator](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Chat.SfChat.html#Syncfusion_XForms_Chat_SfChat_ShowTypingIndicator)
 and customize the avatar of indicator by using the [TypingIndicator](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Chat.SfChat.html#Syncfusion_XForms_Chat_SfChat_TypingIndicator)
 property.

**XAML**

```
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sfChat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">

    <ContentPage.BindingContext>
        <local:GettingStartedViewModel/>
    </ContentPage.BindingContext>
    
    <ContentPage.Content>
        <sfChat:SfChat x:Name="sfChat"
                       Messages="{Binding Messages}"
                       TypingIndicator="{Binding TypingIndicator}"
                       ShowTypingIndicator="{Binding ShowTypingIndicator}"
                       CurrentUser="{Binding CurrentUser}" />
    </ContentPage.Content>
</ContentPage>
```

**ViewModel**

```
public class ViewModel : INotifyPropertyChanged
{

…………………………..

    public ViewModel()
    {
        this.TypingIndicator = new ChatTypingIndicator();        
        this.CurrentUser = new Author() { Name = "Nancy", Avatar = "Nancy.png" };
        this.GenerateMessages();
    }

…………………………….
    private void GenerateMessages()
    {
………….

        this.Messages.Add(new TextMessage()
        {
            Author = new Author() { Name = "Michale", Avatar = " Michale.png" },
            Text = "Can you please elaborate?",
        });

        this.TypingIndicator.Authors.Add(new Author() { Name = "Andrea", Avatar = "Andrea.png" }        
        this.TypingIndicator.AvatarViewType = AvatarViewType.Image;
        this.TypingIndicator.Text = "Andrea is typing...";
        ShowTypingIndicator = true;

    }
}
```

![Typing indicator - Xamarin Chat Control](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Typing-indicator-Xamarin-Chat-Control.png)

## Conclusion

In this post, we walked you through working with our Xamarin.Forms [Chat control](https://www.syncfusion.com/xamarin-ui-controls/xamarin-chat)
 and its features. You can find complete documentation online for all these features [on our website](https://help.syncfusion.com/xamarin/chat/overview)
.

For existing customers, the new version is available for download from the [license and downloads](https://www.syncfusion.com/account/downloads)
 page. If you are not yet a customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads)
 to check out these new features. You can explore samples in our [GitHub](https://github.com/syncfusion/xamarin-demos)
 repository. You can also explore our [Android](https://play.google.com/store/apps/details?id=com.syncfusion.samplebrowser)
, [iOS](https://testflight.apple.com/join/y2ionTef)
 and [UWP](https://www.microsoft.com/en-us/p/syncfusion-essential-studio-for-xamarin/9nn069tldzf4)
 demo apps.

If you have any questions, please let us know in the comments section. You can also contact us through our [support forum](https://www.syncfusion.com/forums)
, [Direct-Trac](https://www.syncfusion.com/support/directtrac/)
, or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms)
. As always, we are happy to assist you!

If you liked this article, we think you would also enjoy the following free ebook and blogs:

- [Blog] [Introducing Xamarin.Forms Date Picker](https://www.syncfusion.com/blogs/post/introducing-xamarin-forms-date-picker.aspx)
- [Blog] [Introducing Xamarin.Forms Time Picker](https://www.syncfusion.com/blogs/post/introducing-xamarin-forms-time-picker.aspx)
- [Ebook] [Xamarin.Forms Succinctly](https://www.syncfusion.com/ebooks/xamarin-forms-succinctly)