New to Telerik UI for Xamarin? Download free 30-day trial

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
            if ( != value)
       = value;
    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:

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

Figure 1: RadChat in MVVM setup

MVVM Support

See Also

In this article