Loading...
Loading...
Implements Syncfusion .NET MAUI Chat (SfChat) control in .NET MAUI applications. Use when working with chat interfaces, messaging UI, conversational interfaces, chat bubbles, or message threads. Covers message types (text, image, calendar, card), data binding, events, suggestions, typing indicators, time breaks, and swiping actions.
npx skill4agent add syncfusion/maui-ui-components-skills syncfusion-maui-chatSfChatSyncfusion.Maui.ChatMauiProgram.csSfChatMessagesCurrentUserTextMessageDatePickerMessageTimePickerMessageCalendarMessageHyperlinkMessageImageMessageCardMessageShowDeliveryStateDeliveryStateAllowPinningPinnedMessagesChatMessageTemplateSelectorObservableCollection<object>MessagesCurrentUserIMessageITextMessageItemsSourceConverterSfChat.SuggestionsTextMessage.SuggestionsSuggestionItemSelectedShowTypingIndicatorTypingIndicatorLoadMoreBehaviorLoadMoreLoadMoreCommandIsLazyLoadingSendMessageSendMessageCommandImageTappedImageTappedCommandCardTappedCardCommandSuggestionItemSelectedMessagePinnedMessageUnpinnedLoadMoreLoadMoreCommandMessageShapeAutomationId.resxScrollToMessageCanAutoScrollToBottomShowScrollToBottomButtonScrollToBottomButtonTemplateScrolledChatScrolledEventArgsIsBottomReachedIsTopReachedScrollOffsetSwipeStartedSwipeEndedAttachmentButtonViewMessageSpacingShowMessageInputViewdotnet add package Syncfusion.Maui.ChatMauiProgram.csusing Syncfusion.Maui.Core.Hosting;
builder.ConfigureSyncfusionCore();SfChat<ContentPage xmlns:sfChat="clr-namespace:Syncfusion.Maui.Chat;assembly=Syncfusion.Maui.Chat"
xmlns:local="clr-namespace:MyApp">
<ContentPage.BindingContext>
<local:ChatViewModel/>
</ContentPage.BindingContext>
<sfChat:SfChat Messages="{Binding Messages}"
CurrentUser="{Binding CurrentUser}" />
</ContentPage>using Syncfusion.Maui.Chat;
public class ChatViewModel : INotifyPropertyChanged
{
public ObservableCollection<object> Messages { get; set; }
public Author CurrentUser { get; set; }
public ChatViewModel()
{
CurrentUser = new Author { Name = "Nancy" };
Messages = new ObservableCollection<object>
{
new TextMessage
{
Author = CurrentUser,
Text = "Hello! How can I help you today?"
},
new TextMessage
{
Author = new Author { Name = "Bot", Avatar = "bot.png" },
Text = "Hi Nancy! I am here to assist you."
}
};
}
public event PropertyChangedEventHandler PropertyChanged;
}// In ViewModel
public ICommand SendMessageCommand => new Command<object>(OnSendMessage);
private void OnSendMessage(object args)
{
var e = args as SendMessageEventArgs;
// ⚠️ IMPORTANT: By default, SfChat automatically adds the user's message to the
// Messages collection. Do NOT manually add it unless you set e.Handled = true
// Add bot response after user sends message
MainThread.BeginInvokeOnMainThread(async () =>
{
await Task.Delay(500); // Simulate processing
Messages.Add(new TextMessage
{
Author = new Author { Name = "Bot", Avatar = "bot.png" },
Text = $"You said: {e.Message.Text}"
});
});
}Handled = trueprivate void OnSendMessage(object args)
{
var e = args as SendMessageEventArgs;
e.Handled = true; // Prevent SfChat from auto-adding the message
// Now you must manually add the message
if (e.Message is TextMessage textMessage)
{
Messages.Add(textMessage); // You add it
// Then handle response...
}
}Messages.Add(new TextMessage
{
Author = new Author { Name = "Bot" },
Text = "How would you like to proceed?",
Suggestions = new ObservableCollection<ISuggestion>
{
new Suggestion { Text = "Option A" },
new Suggestion { Text = "Option B" }
}
});sfChat.ShowTypingIndicator = true;
sfChat.TypingIndicator = new TypingIndicator
{
Authors = new ObservableCollection<Author>
{
new Author { Name = "Bot", Avatar = "bot.png" }
},
Text = "Bot is typing..."
};| Property | Type | Purpose |
|---|---|---|
| | Collection of all messages |
| | Identifies the local user (outgoing messages) |
| | Toggle typing indicator |
| | Set who is typing |
| | Show sent/delivered/read/failed icons |
| | Enable message pinning |
| | Message bubble shape |
| | Vertical gap between messages |
| | Show/hide the message editor |
| | Enable load-more on scroll |
| | Allow multi-line message entry |
| | Keep keyboard open after send |