.NET MAUI Chat Message Styling

Updated on Nov 13, 2025

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 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