MVVM Support

With RadChat control you could easily utilize the Model-View-ViewModel (MVVM) pattern. This could be achieved through the ItemsSource property that can be bound/set to a collection of any data items that should be then converted into chat items.

This help article will demonstrate how to use RadChat in MVVM scenarios.

First, create a sample class used to hold the needed information for the chat items:

public class SimpleChatItem
{
    public Author Author { get; set; }
    public string Text { get; set; }
}

Create a ViewModel containing a collection of your SimpleChatItem items. You could also bind the Chat's Author property that represents the end user typing in the input field.

public class ViewModel : NotifyPropertyChangedBase
{
    private Author me;
    public ViewModel()
    {
        string suffix = Device.RuntimePlatform == Device.UWP ? "Assets/" : null;

        this.Me = new Author() { Name = "human", Avatar = suffix + "sampleAvatar.png"};
        this.Bot = new Author() { Name = "Bot", Avatar = suffix + "sampleBot.png"};

        this.Items = new ObservableCollection<SimpleChatItem>();

        // Simulate async data loading
        Device.StartTimer(TimeSpan.FromMilliseconds(500), () =>
        {
            this.Items.Add(new SimpleChatItem { Author = this.Bot, Text = "Hi." });
            this.Items.Add(new SimpleChatItem { Author = this.Bot, Text = "How can I help you?" });
            return false;
        });
    }
    public Author Me
    {
        get
        {
            return this.me;
        }
        set
        {
            if (this.me != value)
            {
                this.me = value;
                this.OnPropertyChanged(nameof(this.Me));
            }
        }
    }
    public Author Bot { get; set; }
    public IList<SimpleChatItem> Items { get; set; }
}

The next step is to create a Converter class of type IChatItemConverter in order to convert the data items into chat messages and vice versa:

public class SimpleChatItemConverter : IChatItemConverter
{
    public ChatItem ConvertToChatItem(object dataItem, ChatItemConverterContext context)
    {
        SimpleChatItem item = (SimpleChatItem)dataItem;
        TextMessage textMessage = new TextMessage()
        {
            Data = dataItem,
            Author = item.Author,
            Text = item.Text
        };
        return textMessage;
    }
    public object ConvertToDataItem(object message, ChatItemConverterContext context)
    {
        ViewModel vm = (ViewModel)context.Chat.BindingContext;
        return new SimpleChatItem { Author = vm.Me, Text = (string)message, };
    }
}

And finally, all that is left is to add the RadChat control to your page with previously defined ItemsSource and ItemConverter properties:

<ContentView.Resources>
    <ResourceDictionary>
        <local:SimpleChatItemConverter x:Key="SimpleChatItemConverter" />
    </ResourceDictionary>
</ContentView.Resources>
<telerikConversationalUI:RadChat x:Name="chat" 
                             Author="{Binding Me}"
                             ItemsSource="{Binding Items}" 
                             ItemConverter="{StaticResource SimpleChatItemConverter}">
    <telerikConversationalUI:RadChat.BindingContext>
        <local:ViewModel />
    </telerikConversationalUI:RadChat.BindingContext>
</telerikConversationalUI:RadChat>

Figure 1: RadChat in MVVM setup

MVVM Support

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy