.NET MAUI Chat Message Styling

Updated on Jun 25, 2026

Any change in the appearance of the RadChat components depends on the referenced styles.

The default templates contain a RadBorder control (used to achieve the rounded edges), an Image control (used for the avatar of the single and first message), and a Label for the text message itself.

To style the item container that holds each generated chat message, use the ChatListViewItemStyle (Style with target type Telerik.Maui.Controls.RadCollectionViewItemView) property of RadChat.

To customize the different parts of the control, you can use the following implicit styles:

• Image—Represents the avatar image of the message.

XAML

<Style TargetType="Image">

</Style>

• ChatIncomingSingleTextMessageView—Represents a view that visualizes a single incoming text message, i.e. when the number of consecutive messages from the same author is one.
• ChatIncomingFirstTextMessageView—Represents a view that visualizes an incoming text message that is the first in a series of messages from the same author.
• ChatIncomingMiddleTextMessageView—Represents a view that visualizes an incoming text message that is in the middle of a series of messages from the same author.
• ChatIncomingLastTextMessageView—Represents a view that visualizes an incoming text message that is the last in a series of messages from the same author.

XAML

<Style TargetType="telerik:ChatIncomingSingleTextMessageView">
    <Setter Property="BorderStyle">
        <Setter.Value>
            <Style TargetType="telerik:RadBorder">
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="LabelStyle">
		<Setter.Value>
			<Style TargetType="Label">
			</Style>
		</Setter.Value>
	</Setter>
</Style>

• ChatOutgoingSingleTextMessageView—Represents a view that visualizes a single outgoing text message, i.e. when the number of consecutive messages from the same author is one.
• ChatOutgoingFirstTextMessageView—Represents a view that visualizes an outgoing text message that is the first in a series of messages from the same author.
• ChatOutgoingMiddleTextMessageView—Represents a view that visualizes an outgoing text message that is in the middle of a series of messages from the same author.
• ChatOutgoingLastTextMessageView—Represents a view that visualizes an outgoing text message that is the last in a series of messages from the same author.

XAML

<Style TargetType="telerik:ChatOutgoingSingleTextMessageView">
    <Setter Property="BorderStyle">
        <Setter.Value>
            <Style TargetType="telerik:RadBorder">
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="LabelStyle">
		<Setter.Value>
			<Style TargetType="Label">
			</Style>
		</Setter.Value>
	</Setter>
</Style>

To define background color of the Chat set the BackgroundColor(Color) property.

See Also

• Commands
• Chat Items
• MVVM Support