Introducing the Xamarin.Forms Chat Control (Conversational UI)

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 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 and Amazon 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
• Hyperlink
• Time picker
• Date picker
• Calendar

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 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,
        });
    }
}

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.

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 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>

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,
        });   
    }

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 and customize the avatar of indicator by using the 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;

    }
}

Conclusion

In this post, we walked you through working with our Xamarin.Forms Chat control and its features. You can find complete documentation online for all these features on our website.

For existing customers, the new version is available for download from the license and downloads page. If you are not yet a customer, you can try our 30-day free trial to check out these new features. You can explore samples in our GitHub repository. You can also explore our Android, iOS and UWP demo apps.

If you have any questions, please let us know in the comments section. You can also contact us through our support forum, Direct-Trac, or feedback portal. 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
• [Blog] Introducing Xamarin.Forms Time Picker
• [Ebook] Xamarin.Forms Succinctly