.NET MAUI Chat Input Area Styling
The Telerik UI for .NET MAUI Chat control allows you to customize the appearance of its input area, by setting the InputAreaStyle (Style with target type Telerik.Maui.Controls.Chat.ChatInputArea) property.
The available properties for customizing the input area are:
BackgroundColor(Color)—Defines the background color of the input area.BorderColor(Color)—Defines the border color of the input area.BorderThickness(Thickness)—Defines the border thickness of the input area.CornerRadius(Thickness)—Defines the corner radius of the input area.ContentPadding(Thickness)—Defines the padding inside the input area.AttachedFilesViewStyle(Stylewith target typeTelerik.Maui.Controls.Chat.ChatInputAreaAttachedFilesView)—Defines the style of view of the currently attached files hat have not yet been sent.
Style the Chat Entry
You can style the ChatEntry using an implicit style.
The example below shows how to customize the chat entry in your Chat control. The Telerik.Maui.Controls.Chat.ChatEntry represents the entry used for writing messages in the Telerik UI for .NET MAUI Chat control.
<Style TargetType="telerik:ChatEntry">
<Setter Property="BorderBrush" Value="{StaticResource ChatInputAreaStrokeColor}" />
<Setter Property="FocusedBorderBrush" Value="{StaticResource ChatInputAreaStrokeColor}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="8" />
</Style>
Customize the Send Button
The Telerik UI for .NET MAUI Chat allows you to customize the icon of the send button by setting the SendMessageButtonImage (ImageSource) property.
The example below shows how to customize the Send button in your Chat control.
<FontImageSource x:Key="SendIconSource"
FontFamily="Your font family name"
Glyph="icon code"
Color="Black"
Size="16" />
<telerik:RadChat x:Name="chat"
SendMessageButtonImage="{StaticResource SendIconSource}"/>