Category / Section
How to change Chat Editor corner radius in Xamarin.Forms (SfChat)
1 min read
Xamarin Chat does not have any direct support for changing the corner radius of the editor. However, it can be changed by getting the editor from the FooterView of the SfChat and setting a corner radius for the same.
XAML
Define a behavior for the SfChat.
<ContentPage.Content>
<sfChat:SfChat x:Name="sfChat"
Messages="{Binding Messages}"
CurrentUser="{Binding CurrentUser}"
ShowOutgoingMessageAvatar="True">
<sfChat:SfChat.Behaviors>
<local:SfchatBehaviors/>
</sfChat:SfChat.Behaviors>
</sfChat:SfChat>
</ContentPage.Content>
C#
Define the CornerRadius thickness in ChatListView Loaded event.
public class SfchatBehaviors : Behavior<ContentPage>
{
private SfChat sfChat = null;
private SfListView ChatListView = null;
protected override void OnAttachedTo(ContentPage bindable)
{
sfChat = bindable.FindByName<SfChat>("sfChat");
if (sfChat != null)
{
ChatListView = (sfChat.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name.Equals("ChatListView")).GetValue(sfChat) as SfListView);
if (ChatListView != null)
{
ChatListView.Loaded += ChatPage_Loaded;
}
}
base.OnAttachedTo(bindable);
}
private void ChatPage_Loaded(object sender, ListViewLoadedEventArgs e)
{
var footerView = (sfChat.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name == "FooterView").GetValue(this.sfChat) as Grid);
((footerView.Children[1] as MessageInputView).Content as Syncfusion.XForms.Border.SfBorder).CornerRadius = new Thickness(10, 10, 10, 10);
}
}
Take a moment to peruse the documentation, where you can find more about SfChat with code examples.
