Share on twitter
Share on facebook
Share on linkedin

Introducing the Xamarin.Forms Chat Control (Conversational UI)

We are happy to announce that a new Chat control (conversation 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:

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

Different message types - Xamarin Chat control

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

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>

Time break mode - Xamarin Chat control

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

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;

    }
}

Typing indicator - Xamarin Chat Control

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 also explore samples in our GitHub repository.

If you have any questions, please let us know in the comments section. You can also contact us through our support forumDirect-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

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Comments (4)

Is there a image message type or a image and message type? Sending images is a big part of chat. Additionally, is there a message selected command?

Hi Christopher,
Thanks for your feedback.
We have already considered image message type and sending the images via a custom button in the editor area by attaching the required images. We keep improving chat control. This feature will be available in our 2020 Volume 2 release which is scheduled to be rolled out in the mid of July 2020. You can refer the below feedback links for tracking the status of implementation of this feature,
https://www.syncfusion.com/feedback/11806/support-to-add-an-image-message
https://www.syncfusion.com/feedback/11811/support-to-load-the-custom-buttons-in-editor-area

Regarding the message selected command, we have already provided the required commands to listen to the message being sent. For example, if you tap the date in a calendar message, datepicker, timepicker, SendMessageCommand or SendMessage event will be triggered, follow our UG documentation for further details,
https://help.syncfusion.com/xamarin/chat/messages#sending-message

At present we do not support selecting messages, are you expecting something like to select the messages and perform the delete operations, like in social media chat apps? Please clarify on this requirement.

Hi Neelakandan,
Thank you for your quick reply. I look forward to the image message. Once it is released my team can use this control for our in app chat. At present our users send images so we can’t switch to this control until that functionality is availible.

Currently, we allow the users to select a chat message that has an image, to see the image in a popup area, so that they can see the image larger and in more detail. We do this by listening to the select command. That is why I asked.

Hi Christopher,
Thanks for your update.
While providing the image message support, we will consider to provide the built-in support to listen the selected command for image message to view the image larger.

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top