Accessing and Customizing Elements
RadChat is virtualized and the displayed messages can be accessed in the RadChat.ItemFormatting event.
The structure articles provides detailed information about the element hierarchy building the visual tree of the control.
RadChat is working with the following elements visually representing a message:
-
TextMessageItemElement: Represents a single message item consisting of text.
-
MediaMessageItemElement: Represents a single message item consisting of an image.
-
CardMessageItemElement: A single message item presented in a card. The card item can have:
-
ChatImageCardElement: A card element with an image.
-
ChatFlightCardElement: Predefined card element providing flight information.
-
ChatProductCardElement: Predefined card element providing product information.
-
ChatWeatherCardElement: Predefined card element providing weather information.
-
-
CarouselMessageItemElement: Item element consisting of a horizontal stack which can be populated with Image, Flight, Product, and Weather cards.
-
AIChatMessageItemElement: Represents an AI-generated message item that can display reply bubbles and streaming content.
The chat toolbar, input text box, prompt input element, and reply preview element are exposed as properties and they can be accessed through the RadChatElement object:
- RadChat.ChatElement.InputTextBox — the text entry element.
- RadChat.ChatElement.ToolbarElement — the toolbar element.
- RadChat.ChatElement.PromptInputElement — the prompt input element providing text entry, attached files, speech-to-text, and send capabilities.
- RadChat.ChatElement.ReplyPreviewElement — the reply preview element shown above the input area when replying to a message.
ItemFormatting Event
The ItemFormatting event can be used to access and change the styling of the message item elements.
Due to the UI virtualization, the event needs to be handled with an if-else statement so that the applied settings are reset for elements which will not be customized.
Customizing The Main Item Elements
private void RadChat1_ItemFormatting(object sender, ChatItemElementEventArgs e)
{
if (e.ItemElement is TextMessageItemElement)
{
e.ItemElement.DrawBorder = true;
e.ItemElement.BorderBoxStyle = Telerik.WinControls.BorderBoxStyle.FourBorders;
e.ItemElement.BorderLeftColor = Color.Transparent;
e.ItemElement.BorderTopColor = Color.Transparent;
e.ItemElement.BorderRightColor = Color.Transparent;
e.ItemElement.BorderBottomColor = Color.LightBlue;
}
else if (e.ItemElement is MediaMessageItemElement)
{
e.ItemElement.DrawFill = true;
e.ItemElement.BackColor = Color.LightGreen;
}
else if (e.ItemElement is CardMessageItemElement)
{
e.ItemElement.DrawFill = true;
e.ItemElement.BackColor = Color.LightBlue;
}
else if (e.ItemElement is CarouselMessageItemElement)
{
e.ItemElement.DrawFill = true;
e.ItemElement.BackColor = Color.LightCoral;
}
else
{
e.ItemElement.ResetValue(LightVisualElement.DrawBorderProperty, Telerik.WinControls.ValueResetFlags.Local);
e.ItemElement.ResetValue(LightVisualElement.BorderBoxStyleProperty, Telerik.WinControls.ValueResetFlags.Local);
e.ItemElement.ResetValue(LightVisualElement.BorderLeftColorProperty, Telerik.WinControls.ValueResetFlags.Local);
e.ItemElement.ResetValue(LightVisualElement.BorderRightColorProperty, Telerik.WinControls.ValueResetFlags.Local);
e.ItemElement.ResetValue(LightVisualElement.BorderTopColorProperty, Telerik.WinControls.ValueResetFlags.Local);
e.ItemElement.ResetValue(LightVisualElement.BorderBottomColorProperty, Telerik.WinControls.ValueResetFlags.Local);
e.ItemElement.ResetValue(LightVisualElement.DrawFillProperty, Telerik.WinControls.ValueResetFlags.Local);
e.ItemElement.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
}
}
Figure 1: Text and Media Items
Figure 2: Card Items
Figure 3: Carousel Item
Customizing the Child Items
Font f = new Font("Calibri", 12f, FontStyle.Bold);
private void RadChat1_ItemFormattingCildren(object sender, ChatItemElementEventArgs e)
{
ChatMessageAvatarElement avatar = e.ItemElement.AvatarPictureElement;
ChatMessageNameElement name = e.ItemElement.NameLabelElement;
ChatMessageStatusElement status = e.ItemElement.StatusLabelElement;
LightVisualElement bubble = e.ItemElement.MainMessageElement;
if (!e.ItemElement.IsOwnMessage && e.ItemElement is TextMessageItemElement)
{
avatar.DrawImage = false;
name.Font = f;
bubble.DrawFill = true;
bubble.BackColor = Color.LightGreen;
bubble.ShadowDepth = 3;
bubble.ShadowColor = Color.Green;
}
else
{
avatar.ResetValue(LightVisualElement.ImageProperty, Telerik.WinControls.ValueResetFlags.Local);
name.ResetValue(LightVisualElement.FontProperty, Telerik.WinControls.ValueResetFlags.All);
status.ResetValue(LightVisualElement.VisibilityProperty, Telerik.WinControls.ValueResetFlags.Local);
bubble.ResetValue(LightVisualElement.DrawFillProperty, Telerik.WinControls.ValueResetFlags.Local);
bubble.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
bubble.ResetValue(LightVisualElement.ShadowDepthProperty, Telerik.WinControls.ValueResetFlags.Local);
bubble.ResetValue(LightVisualElement.ShadowColorProperty, Telerik.WinControls.ValueResetFlags.Local);
}
}
Figure 4: Customizing the Child Elements
