Customizing Chat Item Styles in .NET MAUI

Updated over 6 months ago

Environment

Version	Product	Author
7.0.0	Telerik UI for .NET MAUI Conversational UI	Dobrinka Yordanova

Description

This KB article answers the following questions:

• How can I change the text color of chat items in .NET MAUI?
• Is there a way to apply custom styles to chat items in .NET MAUI?
• How to use item template selectors for styling chat messages?

Solution

To customize the style of the chat items in the Chat control for .NET MAUI, choose one of the approaches described in this KB article.

Approach 1: Using Item Template Selector

Refer to the Item Template Selector documentation. You can change the text color by adding a style targeting the Label and setting its TextColor property. For example, use a style named DefaultLabelStyle. See the example code in the Telerik MAUI Controls Samples Chat Examples

Approach 2: Using Implicit Style

Use an implicit style targeting TextMessageView or its derived types like IncomingTextMessageView and OutgoingTextMessageView.

xml

<Style x:Key="LabelStyle" TargetType="Label">
    <Setter Property="TextColor" Value="Red" />
</Style>
<Style TargetType="telerik:TextMessageView" ApplyToDerivedTypes="True">
    <Setter Property="LabelStyle" Value="{StaticResource LabelStyle}" />
</Style>

For further examples, refer to the Telerik MAUI Controls Samples Chat Customization example

Notes

• The TextMessageView and its derived types (IncomingTextMessageView, OutgoingTextMessageView) are crucial for applying text styles.
• The LabelStyle is an example of how to directly modify the TextColor property, but you can customize other properties similarly.

See Also

• Chat Overview
• Item Template Selector Documentation