Controls / Chat UI / Customizing Appearance

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

Custom Items

By using the ChatFactory, it is possible to customize all visual elements and data items in the Chat UI. It is just necessary to create your own factory, override the relevant method where the element/item you want to replace is created and create your custom class.

Each BaseChatItemElement can be customized according to any specific requirements. There are different methods which can be overridden according to inner element you want to modify:

  • CreateAvatarElement - it creates the ChatMessageAvatarElement.
  • CreateNameLabel - it creates the ChatMessageNameElement.
  • CreateStatusLabel - it creates the ChatMessageStatusElement.
  • CreateMainMessageElement - it creates the ChatMessageBubbleElement.
  • CreateChildElements - it calls all of the above methods to create all internal elements of the message.

The following example demonstrates a sample code snippet how to add a button element next to the message indicating whether you like a certain message:

Figure 1. Custom message

WinForms RadChat Custom Message

Creating a custom message

private void CustomMessage()
{
    this.radChat1.ChatElement.ChatFactory = new MyChatFactory();
    this.radChat1.Author = new Author(Properties.Resources.nancy1, "Nancy");
    Author author2 = new Author(Properties.Resources.andrew1,"Andrew");
    ChatTextMessage message1 = new ChatTextMessage("Hello", author2,DateTime.Now.AddHours(1));
    this.radChat1.AddMessage(message1);
    ChatTextMessage message2 = new ChatTextMessage("Hi",  this.radChat1.Author,DateTime.Now.AddHours(1).AddMinutes(10));
    this.radChat1.AddMessage(message2);
    ChatTextMessage message3 = new ChatTextMessage("We would like to announce that in the R2 2018 release we introduced Conversational UI", author2,DateTime.Now.AddHours(3));
    this.radChat1.AddMessage(message3);
}
public class MyChatFactory : ChatFactory
{
    public override BaseChatItemElement CreateItemElement(BaseChatDataItem item)
    {
        if (item.GetType() == typeof(TextMessageDataItem))
        {
            return new MyTextMessageItemElement();
        }
        return base.CreateItemElement(item);
    }
}
public class MyTextMessageItemElement : TextMessageItemElement
{
    LightVisualButtonElement likeButton = new LightVisualButtonElement();
    protected override void CreateChildElements()
    {
        base.CreateChildElements();
        likeButton.NotifyParentOnMouseInput = true;
        likeButton.Image = Properties.Resources.heart_empty;
        likeButton.Click += likeButton_Click;
        likeButton.EnableElementShadow = false;
        likeButton.Margin = new Padding(10, 0, 10, 0);
        this.Children.Add(likeButton);
    }
    private void likeButton_Click(object sender, EventArgs e)
    {
        if (this.Data.Tag == null)
        {
            this.Data.Tag = true;
        }
        else
        {
            bool isLiked = (bool)this.Data.Tag;
            this.Data.Tag = !isLiked;
        } 
    }
    public override void Synchronize()
    {
        base.Synchronize();
        if (this.Data.Tag != null && (bool)this.Data.Tag == true)
        {
            this.likeButton.Image = Properties.Resources.heart_filled;
        }
        else
        {
            this.likeButton.Image = Properties.Resources.heart_empty;
        }
    }
    protected override SizeF ArrangeOverride(SizeF finalSize)
    {
         SizeF baseSize = base.ArrangeOverride(finalSize);
        RectangleF likeButtonRect;
        RectangleF clientRect = this.GetClientRectangle(finalSize);
        if (this.Data.ChatMessagesViewElement.ShowAvatars)
        {
            if (this.Data.ChatMessagesViewElement.ShowMessagesOnOneSide || !this.Data.IsOwnMessage)
            {
                likeButtonRect = new RectangleF(clientRect.X+this.AvatarPictureElement.DesiredSize.Width + this.MainMessageElement.DesiredSize.Width,
                    clientRect.Y + this.NameLabelElement.DesiredSize.Height+this.MainMessageElement.DesiredSize.Height/3,
                    this.likeButton.Image.Width, this.likeButton.Image.Height);
            }
            else
            {
                likeButtonRect = new RectangleF(clientRect.Right - likeButton.DesiredSize.Width - this.AvatarPictureElement.DesiredSize.Width - this.MainMessageElement.DesiredSize.Width,
                    clientRect.Y + this.NameLabelElement.DesiredSize.Height+this.MainMessageElement.DesiredSize.Height/3,
                    this.likeButton.Image.Width, this.likeButton.Image.Height);
            }
        }
        else
        { 
         if (this.Data.ChatMessagesViewElement.ShowMessagesOnOneSide || !this.Data.IsOwnMessage)
            {
                likeButtonRect = new RectangleF(clientRect.X+ this.MainMessageElement.DesiredSize.Width,
                    clientRect.Y + this.NameLabelElement.DesiredSize.Height+this.MainMessageElement.DesiredSize.Height/3,
                   this.likeButton.Image.Width, this.likeButton.Image.Height);
            }
            else
            {
                 likeButtonRect = new RectangleF(clientRect.Right - likeButton.DesiredSize.Width -  this.MainMessageElement.DesiredSize.Width,
                     clientRect.Y + this.NameLabelElement.DesiredSize.Height+this.MainMessageElement.DesiredSize.Height/3,
                     this.likeButton.Image.Width, this.likeButton.Image.Height);
            }
        }
        this.likeButton.Arrange(likeButtonRect);
         return baseSize;
    } 
}
In this article
Related articles
Not finding the help you need? Improve this article