# .NET MAUI Chat MVVM Support

With the `RadChat` control, you can use the Model-View-ViewModel (MVVM) pattern. You can achieve this through the `ItemsSource` property that can be bound or set to a collection of data items that will be converted into Chat items.

The following example shows how to use `RadChat` in MVVM scenarios.

**1.** Create a sample class used to hold the needed information for the Chat items:

```C#
public class SimpleChatItem
{
    public Author Author { get; set; }
    public string Text { get; set; }
}
```

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

```C#
public class ViewModel : NotifyPropertyChangedBase
{
    private Author me;
    public ViewModel()
    {
        this.Me = new Author() { Name = "human", Avatar = "sampleavatar.png" };
        this.Bot = new Author() { Name = "Bot", Avatar = "samplebot.png" };

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

        // Simulate async data loading
        Application.Current.Windows[0].Page.Dispatcher.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; }
}
```

**3.** Create a `Converter` class of type `IChatItemConverter` to convert the data items into Chat messages and the other way around:

```C#
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, };
    }
}
```

**4.** Add the `RadChat` control to your page with previously defined `ItemsSource` and `ItemConverter` properties:

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

## See Also

* [Commands](https://www.telerik.com/maui-ui/documentation/controls/chat/commands)
* [ItemTemplateSelector](https://www.telerik.com/maui-ui/documentation/controls/chat/templates/item-template-selector)