Class SfChat

A user interface control that can create modern conversational chatbot experiences in mobile applications. It is a flexible control that shows a conversation between two or more users in a fully customizable layout.

Inheritance

System.Object

SfChat

Implements

System.IDisposable

Namespace: Syncfusion.XForms.Chat

Assembly: Syncfusion.SfChat.XForms.dll

Syntax

public class SfChat : ContentView, IDisposable, IParentThemeElement, IThemeElement

Examples

The following code example demonstrates how to create SfChat control.

using Syncfusion.XForms.Chat;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
ObservableCollection<object> messageCollection;
    public SfChatDemo()
    {
        sfChat = new SfChat();
        sfChat.CurrentUser = new Author() { Name = &quot;Andrea&quot;, Avatar = &quot;Andrea.png&quot; };

        // Creating adding message collection to the chat control.
        messageCollection = new ObservableCollection&lt;object>();
        TextMessage textMessage = new TextMessage();
        textMessage.Author = sfChat.CurrentUser;
        textMessage.Text = &quot;Hi&quot;;
        messageCollection.Add(textMessage);

        TextMessage textMessage1 = new TextMessage();
        textMessage1.Author = new Author() { Name = &quot;John&quot;, Avatar = &quot;John.png&quot; };
        textMessage1.Text = &quot;Hi, I&apos;m here to help you. How may I assist you?&quot;;
        messageCollection.Add(textMessage1);
        sfChat.Messages = messageCollection;

        Content = sfChat;
    }
}

}

<? xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat"
                       CurrentUser="{Binding Author}"
                       Messages="{Binding Collection}">
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

Constructors

SfChat()

Initializes a new instance of the SfChat class.

Declaration

public SfChat()

Fields

AllowMultilineInputProperty

Identifies the AllowMultilineInput Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty AllowMultilineInputProperty

Field Value

Type
Xamarin.Forms.BindableProperty

AllowSwipingProperty

Identifies the AllowSwiping bindable property.

Declaration

public static readonly BindableProperty AllowSwipingProperty

Field Value

Type
Xamarin.Forms.BindableProperty

AttachmentButtonCommandParameterProperty

Identifies the AttachmentButtonCommandParameter Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty AttachmentButtonCommandParameterProperty

Field Value

Type
Xamarin.Forms.BindableProperty

AttachmentButtonCommandProperty

Identifies the AttachmentButtonCommand Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty AttachmentButtonCommandProperty

Field Value

Type
Xamarin.Forms.BindableProperty

AttachmentButtonTemplateProperty

Identifies the AttachmentButtonTemplate Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty AttachmentButtonTemplateProperty

Field Value

Type
Xamarin.Forms.BindableProperty

CanAutoScrollToBottomProperty

Identifies the CanAutoScrollToBottom Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty CanAutoScrollToBottomProperty

Field Value

Type
Xamarin.Forms.BindableProperty

CardCommandProperty

Identifies the CardCommand Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty CardCommandProperty

Field Value

Type
Xamarin.Forms.BindableProperty

CurrentUserProperty

Identifies the CurrentUser Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty CurrentUserProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ImageTappedCommandProperty

Identifies the ImageTappedCommand Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty ImageTappedCommandProperty

Field Value

Type
Xamarin.Forms.BindableProperty

IncomingMessageTimestampFormatProperty

Identifies the IncomingMessageTimestampFormat Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty IncomingMessageTimestampFormatProperty

Field Value

Type
Xamarin.Forms.BindableProperty

IsBusyProperty

Identifies the IsBusy Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty IsBusyProperty

Field Value

Type
Xamarin.Forms.BindableProperty

Remarks

This bindable property is read-only.

ItemsSourceConverterProperty

Identifies the ItemsSourceConverter Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty ItemsSourceConverterProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ItemsSourceProperty

Identifies the ItemsSource Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty ItemsSourceProperty

Field Value

Type
Xamarin.Forms.BindableProperty

LeftSwipeViewTemplateProperty

Identifies the LeftSwipeViewTemplate bindable property.

Declaration

public static readonly BindableProperty LeftSwipeViewTemplateProperty

Field Value

Type
Xamarin.Forms.BindableProperty

Remarks

This bindable property is read-only.

LoadMoreBehaviorProperty

Identifies the LoadMoreBehavior Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty LoadMoreBehaviorProperty

Field Value

Type
Xamarin.Forms.BindableProperty

Remarks

This bindable property is read-only.

LoadMoreCommandParameterProperty

Identifies the LoadMoreCommandParameter Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty LoadMoreCommandParameterProperty

Field Value

Type
Xamarin.Forms.BindableProperty

Remarks

This bindable property is read-only.

LoadMoreCommandProperty

Identifies the LoadMoreCommand Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty LoadMoreCommandProperty

Field Value

Type
Xamarin.Forms.BindableProperty

Remarks

This bindable property is read-only.

LoadMoreTemplateProperty

Identifies the LoadMoreTemplate Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty LoadMoreTemplateProperty

Field Value

Type
Xamarin.Forms.BindableProperty

Remarks

This bindable property is read-only.

MaxSwipeOffsetProperty

Identifies the MaxSwipeOffset bindable property.

Declaration

public static readonly BindableProperty MaxSwipeOffsetProperty

Field Value

Type
Xamarin.Forms.BindableProperty

Remarks

This bindable property is read-only.

MessageDoubleTappedCommandProperty

Identifies the MessageDoubleTappedCommand bindable property.

Declaration

public static readonly BindableProperty MessageDoubleTappedCommandProperty

Field Value

Type
Xamarin.Forms.BindableProperty

Remarks

This bindable property is read-only.

MessageLongPressedCommandProperty

Identifies the MessageLongPressedCommand bindable property.

Declaration

public static readonly BindableProperty MessageLongPressedCommandProperty

Field Value

Type
Xamarin.Forms.BindableProperty

Remarks

This bindable property is read-only.

MessageShapeProperty

Identifies the MessageShape Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty MessageShapeProperty

Field Value

Type
Xamarin.Forms.BindableProperty

MessageSpacingProperty

Identifies the MessageSpacing Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty MessageSpacingProperty

Field Value

Type
Xamarin.Forms.BindableProperty

MessagesProperty

Identifies the Messages Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty MessagesProperty

Field Value

Type
Xamarin.Forms.BindableProperty

MessageTappedCommandProperty

Identifies the MessageTappedCommand bindable property.

Declaration

public static readonly BindableProperty MessageTappedCommandProperty

Field Value

Type
Xamarin.Forms.BindableProperty

Remarks

This bindable property is read-only.

MessageTemplateProperty

Identifies the MessageTemplate Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty MessageTemplateProperty

Field Value

Type
Xamarin.Forms.BindableProperty

OutgoingMessageTimestampFormatProperty

Identifies the OutgoingMessageTimestampFormat Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty OutgoingMessageTimestampFormatProperty

Field Value

Type
Xamarin.Forms.BindableProperty

RightSwipeViewTemplateProperty

Identifies the RightSwipeViewTemplate bindable property.

Declaration

public static readonly BindableProperty RightSwipeViewTemplateProperty

Field Value

Type
Xamarin.Forms.BindableProperty

Remarks

This bindable property is read-only.

SendMessageCommandProperty

Identifies the SendMessageCommand Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty SendMessageCommandProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ShowAttachmentButtonProperty

Identifies the ShowAttachmentButton Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty ShowAttachmentButtonProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ShowIncomingMessageAuthorNameProperty

Identifies the ShowIncomingMessageAuthorName Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty ShowIncomingMessageAuthorNameProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ShowIncomingMessageAvatarProperty

Identifies the ShowIncomingMessageAvatar Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty ShowIncomingMessageAvatarProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ShowIncomingMessageTimestampProperty

Identifies the ShowIncomingMessageTimestamp Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty ShowIncomingMessageTimestampProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ShowKeyboardAlwaysProperty

Identifies the ShowKeyboardAlways Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty ShowKeyboardAlwaysProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ShowMessageInputViewProperty

Identifies the ShowMessageInputView Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty ShowMessageInputViewProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ShowOutgoingMessageAuthorNameProperty

Identifies the ShowOutgoingMessageAuthorName Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty ShowOutgoingMessageAuthorNameProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ShowOutgoingMessageAvatarProperty

Identifies the ShowOutgoingMessageAvatar Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty ShowOutgoingMessageAvatarProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ShowOutgoingMessageTimestampProperty

Identifies the ShowOutgoingMessageTimestamp Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty ShowOutgoingMessageTimestampProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ShowTimeBreakProperty

Identifies the ShowTimeBreak Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty ShowTimeBreakProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ShowTypingIndicatorProperty

Identifies the ShowTypingIndicator Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty ShowTypingIndicatorProperty

Field Value

Type
Xamarin.Forms.BindableProperty

StickyTimeBreakProperty

Identifies the StickyTimeBreak Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty StickyTimeBreakProperty

Field Value

Type
Xamarin.Forms.BindableProperty

SuggestionItemSelectedCommandProperty

Identifies the SuggestionItemSelectedCommand Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty SuggestionItemSelectedCommandProperty

Field Value

Type
Xamarin.Forms.BindableProperty

SuggestionsProperty

Identifies the Suggestions Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty SuggestionsProperty

Field Value

Type
Xamarin.Forms.BindableProperty

TimeBreakTemplateProperty

Identifies the TimeBreakTemplate Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty TimeBreakTemplateProperty

Field Value

Type
Xamarin.Forms.BindableProperty

TypingIndicatorProperty

Identifies the TypingIndicator Xamarin.Forms.BindableProperty.

Declaration

public static readonly BindableProperty TypingIndicatorProperty

Field Value

Type
Xamarin.Forms.BindableProperty

TypingIndicatorViewHeightProperty

Identifies the TypingIndicatorViewHeight bindable property.

Declaration

public static readonly BindableProperty TypingIndicatorViewHeightProperty

Field Value

Type
Xamarin.Forms.BindableProperty

Properties

AllowMultilineInput

Gets or sets a value indicating whether the Editor should accept multiline text input or single line text input for outgoing messages. This is a bindable property.

Declaration

public bool AllowMultilineInput { get; set; }

Property Value

Type	Description
System.Boolean	true If the editor control should be Mutiple-line text input , otherwise false. The default value is true.

Examples

The following code example demonstrates how to send single line messages in SfChat control.

using Syncfusion.XForms.Chat;
using Xamarin.Forms;     
namespace Manual_Testing_Issues_Sample
{

public partial class AutoScroll_ToBottom_Sample : ContentPage
{
    public AutoScroll_ToBottom_Sample()
    {
        InitializeComponent();
        SfChat sfchat = new SfChat();
        ViewModel viewModel = new ViewModel();
        sfchat.Messages = viewModel.Messages;
        sfchat.CurrentUser = viewModel.CurrentUser;
        sfChat.AllowMultilineInput = false;
        this.Content = sfchat;
    }
}

}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:Sample.AutoScroll_ToBottom.ViewModel"
            xmlns:sfChat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            x:Class="MultilineMessages">
   <ContentPage.BindingContext>
       <local:ViewModel/>
   </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfChat:SfChat x:Name="sfChat"                    
                      Messages="{Binding Messages}"
                      CurrentUser="{Binding CurrentUser}"
                      ShowOutgoingMessageAvatar="True" 
                      AllowMultilineInput="False"/>
   </ContentPage.Content>
</ContentPage>

AllowSwiping

Gets or sets a value indicating whether to enable swiping of messages or not.

Declaration

public bool AllowSwiping { get; set; }

Property Value

Type
System.Boolean

Examples

namespace GettingStarted
{
    SfChat sfChat;
    ViewModel viewModel;
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            sfChat = new SfChat();
            viewModel = new ViewModel();
            sfChat.Messages = viewModel.Messages;
            sfChat.CurrentUser = viewModel.CurrentUser;
            sfChat.AllowSwiping = true;
            this.Content = sfChat;
        }
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">

    <ContentPage.BindingContext>
        <local:GettingStartedViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <sfchat:SfChat x:Name="sfChat"                
                       Messages="{Binding Messages}"     
                       CurrentUser="{Binding CurrentUser}"
                       AllowSwiping="True">
        </sfchat:SfChat>
    </ContentPage.Content>
</ContentPage>

AttachmentButtonCommand

Gets or sets the command that will be executed when the attachment button is tapped.

Declaration

public ICommand AttachmentButtonCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Examples

The following code example demonstrates how to add attachment button command and command parameter to the SfChat control.

using Syncfusion.XForms.Chat;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
    public SfChatDemo()
    {
        sfChat = new SfChat();
        this.sfChat.ShowAttachmentButton=true;
        this.sfChat.AttachmentButtonCommand = viewModel.Command;
        this.sfChat.AttachmentButtonCommandParameter = 4;
        this.Content = sfChat;
    }
}

}
//ViewModel.cs
Command = new Command<object>(AttachmentTapped);
private async void AttachmentTapped(object obj)
{
// Do desired actions like adding and image from the gallery as shown here
// https://help.syncfusion.com/xamarin/chat/attachment-button#attach-image-from-gallery-in-xamarinforms-chat-sfchat
}

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            xmlns:local="clr-namespace:Chat"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.BindingContext>
       <local:ViewModel/>
   </ContentPage.BindingContext>
   <ContentPage.Content>
               <sfChat:SfChat x:Name="chat"  
                              ShowAttachmentButton="True"
                              AttachmentButtonCommand="{Binding Command}" 
                              AttachmentButtonCommandParameter="4"/>
   </ContentPage.Content>
</ContentPage>

AttachmentButtonCommandParameter

Gets or sets the parameter for AttachmentButtonCommandParameter.

Declaration

public object AttachmentButtonCommandParameter { get; set; }

Property Value

Type
System.Object

Examples

The following code example demonstrates how to add attachment button command and command parameter to the SfChat control.

using Syncfusion.XForms.Chat;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
ViewModel viewModel;
    public SfChatDemo()
    {
        sfChat = new SfChat();
        viewModel = new ViewModel;
        this.sfChat.ShowAttachmentButton=true;
        this.sfChat.Messages = viewModel.MessageCollection;
        this.sfChat.AttachmentButtonCommand = viewModel.AttachmentButtonCommand;
        this.sfChat.AttachmentButtonCommandParameter = 4;
        this.Content = sfChat;
    }
}

}
//ViewModel.cs
AttachmentButtonCommand = new Command<object>(AttachmentButtonTapped);
private void AttachmentButtonTapped(object obj)
{
int maxCount = obj as int;
AddMessages(maxCount);
}
private void AddMessages(int maxCount)
{
for(int i= 0; i < maxCount, i++)
{
this.MessageCollection.Add(new ImageMessage()
{
Aspect = Xamarin.Forms.Aspect.Fill,
Source = "Image3.jpg",
Author = new Author() { Name = "Andrea", Avatar = "People_Circle2.png" },
});
}

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            xmlns:local="clr-namespace:Chat"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.BindingContext>
       <local:ViewModel/>
   </ContentPage.BindingContext>
   <ContentPage.Content>
               <sfChat:SfChat x:Name="chat"  
                              ShowAttachmentButton="True"  
                              AttachmentButtonCommand="{Binding Command}" 
                              AttachmentButtonCommandParameter="4"/>
   </ContentPage.Content>
</ContentPage>

AttachmentButtonTemplate

Gets or sets the template to be loaded in the attachment button area of the message input view in SfChat.

Declaration

public DataTemplate AttachmentButtonTemplate { get; set; }

Property Value

Type
Xamarin.Forms.DataTemplate

Examples

The following code example demonstrates how to add attachment template to the SfChat control.

using Syncfusion.XForms.Chat;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
DataTemplate attachmentDataTemplate;
Image image = new Image();
image.Source = ImageSource.FromResource("Attach_Slanting.png");
public SfChatDemo()
{
sfChat = new SfChat();
sfChat.ShowAttachmentButton=true;
attachmentDataTemplate = new DataTemplate(() =>
{
this.image.BackgroundColor = Color.Black;
return image;
});
this.sfChat.AttachmentButtonTemplate  = attachmentDataTemplate;
this.Content = sfChat;
}
}
}

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            xmlns:local="clr-namespace:Chat"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.BindingContext>
       <local:ViewModel/>
   </ContentPage.BindingContext>
   <ContentPage.Content>
<sfChat:SfChat x:Name="chat" ShowAttachmentButton="True">

 <sfChat:SfChat.AttachmentButtonTemplate>
      <DataTemplate>
          <Image BackgroundColor=Blue
                 Source="Attach_Slant.png"
                 WidthRequest="14"
                 HeightRequest="18"/>
      </DataTemplate>
  </sfChat:SfChat.AttachmentButtonTemplate>

  </sfChat:SfChat>
   </ContentPage.Content>
</ContentPage>

CanAutoScrollToBottom

Gets or sets a value indicating whether SfChat should be auto scrolled to the newly added message. This is applicable for both incoming and outgoing message. This is a bindable property.

Declaration

public bool CanAutoScrollToBottom { get; set; }

Property Value

Type	Description
System.Boolean	true To auto scroll to the newly added message, otherwise false. The default value is true.

Examples

The following code example demonstrates how to use CanAutoScrollToBottom property in the SfChat control.

using Syncfusion.XForms.Chat;
using Xamarin.Forms;     
namespace Manual_Testing_Issues_Sample
{

public partial class AutoScroll_ToBottom_Sample : ContentPage
{
    public AutoScroll_ToBottom_Sample()
    {
        InitializeComponent();
        SfChat sfchat = new SfChat();
        AutoScrollToBottomViewModel viewModel = new AutoScrollToBottomViewModel();
        sfchat.Messages = viewModel.Messages;
        sfchat.CurrentUser = viewModel.CurrentUser;
        sfchat.CanAutoScrollToBottom = false;
        this.Content = sfchat;
    }
}

}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:Sample.AutoScroll_ToBottom.ViewModel"
            xmlns:sfChat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            x:Class="Manual_Testing_Issues_Sample.AutoScroll_ToBottom_Sample">
   <ContentPage.BindingContext>
       <local:AutoScroll_ToBottom_ViewModel/>
   </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfChat:SfChat x:Name="sfChat"                    
                      Messages="{Binding Messages}"
                      CurrentUser="{Binding CurrentUser}"
                      ShowOutgoingMessageAvatar="True" 
                      CanAutoScrollToBottom="False"/>
   </ContentPage.Content>
</ContentPage>

CardCommand

Gets or sets the command that will be executed when the user taps a card or clicks an action button in a card message.

Declaration

public ICommand CardCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Examples

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             xmlns:local="clr-namespace:Chat"
             mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.BindingContext>
       <local:ViewModel/>
   </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat"
                      CardCommand="{Binding CardClicked}">
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

//ViewModel.cs
CardClicked = new Command<object>(CardTapped);

private async void CardTapped(object obj)
{
    var e = obj as CardTappedEventArgs;
    // Card message will not hide after selecting action card.
    e.HideAfterSelection = false;
}

CurrentUser

Gets or sets the current author of a message.

Declaration

public Author CurrentUser { get; set; }

Property Value

Type
Author

Examples

The following code example demonstrates how to add current user to the SfChat control.

using Syncfusion.XForms.Chat;
using Xamarin.Forms;
namespace ChatDemo
   {
       public class SfChatDemo : ContentPage
       {
           SfChat sfChat;
           Author Author;
       public SfChatDemo()
       {
           sfChat = new SfChat();

           Author = new Author();
           Author.Name = &quot;Bot&quot;;
           Author.Avatar = &quot;Rose.png&quot;;
           sfChat.CurrentUser = Author;

           this.Content = sfChat;
       }
   }

}

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            xmlns:local="clr-namespace:Chat"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat"
                      CurrentUser="{Binding Author}">
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

Editor

Gets the Xamarin.Forms.Editor used in SfChat that allows users to type/input messages. You can use this to listen to focus change, text change events to find whether a user is typing or has finished typing.

Declaration

public Editor Editor { get; }

Property Value

Type
Xamarin.Forms.Editor

Examples

The following code demonstrates how to show or hide the typing indicator when editor gets focused or unfocused.

using Xamarin.Forms;
namespace GettingStarted
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.sfChat.Messages = viewModel.Messages;
this.sfChat.CurrentUser = viewModel.CurrentUser;
this.sfChat.TypingIndicator = viewModel.TypingIndicator;
sfChat.Editor.Focused += Editor_Focused;
sfChat.Editor.Unfocused += Editor_Unfocused;
this.Content = sfChat;
}
private void Editor_Unfocused(object sender, FocusEventArgs e)
{
this.sfChat.ShowTypingIndicator = false;
}
private void Editor_Focused(object sender, FocusEventArgs e)
{
this.sfChat.ShowTypingIndicator = true;
}
}
}

ImageTappedCommand

Gets or sets the command that will be executed when the user tapped an image in the image message.

Declaration

public ICommand ImageTappedCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Remarks

The ImageTappedEventArgs is passed as a parameter.

Examples

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            xmlns:local="clr-namespace:Chat"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.BindingContext>
       <local:ViewModel/>
   </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat"
                      ImageTappedCommand="{Binding TappedCommand}">
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

//ViewModel.cs
TappedCommand = new Command<object>(ImageTapped);

private async void ImageTapped(object obj)
{
    var e = obj as ImageTappedEventArgs;
    var imageMessage = e.Message;
    // Do desired actions like displaying the image in full screen.
}

IncomingMessageTimestampFormat

Gets or sets a value that indicates the format applied to time stamp for all the incoming messages.

Declaration

public string IncomingMessageTimestampFormat { get; set; }

Property Value

Type
System.String

IsBusy

Gets or sets a value indicating whether the busy state of the SfChat while executing the LoadMoreCommand.

Declaration

public bool IsBusy { get; set; }

Property Value

Type
System.Boolean

Examples

The following code example demonstrates how to add IsBusy to the SfChat control.

using Syncfusion.XForms.Chat;
using Xamarin.Forms;
namespace ChatDemo
   {
       public class SfChatDemo : ContentPage
       {
           SfChat sfChat;
           ViewModel viewModel;
       public SfChatDemo()
       {
           sfChat = new SfChat();
           viewModel=new ViewModel();
        sfChat.LoadMoreBehavior=LoadMoreBehavior.Manual;
        DataTemplate loadMoreTemplate = new DataTemplate(() => {
        var grid = new Grid();
        var label = new Label
        {
            Text = &quot;Click here to Load More Items...&quot;,
            FontSize = 20,
            BackgroundColor = Color.AliceBlue,
            HorizontalTextAlignment = TextAlignment.Center,
            VerticalTextAlignment = TextAlignment.Center
        };
        label.SetBinding(Label.IsVisibleProperty, new Binding(&quot;IsBusy&quot;, BindingMode.Default, new InverseBoolConverter()));
         grid.Children.Add(label);
         return grid;
        });
        sfChat.LoadMoreTemplate = loadMoreTemplate;
        this.Content = sfChat;
    }
}

}
//ViewModel.cs
private bool isBusy;
public bool IsBusy
{
get { return isBusy; }
set
{
this.isBusy = value;
RaisePropertyChanged("IsBusy");
}
}
LoadMoreItemsCommand = new Command<object>(LoadMoreItems, CanLoadMoreItems);
private bool CanLoadMoreItems(object obj)
{
if (Products.Count >= totalItems)
return false;
return true;
}
private async void LoadMoreItems(object obj)
{
int maxCount = obj as int;
IsBusy = true;
await Task.Delay(2500);
var index = Products.Count;
var count = index + 3 >= totalItems ? totalItems - index : 3;
AddMessages(maxCount);
IsBusy = false;
}
private void AddMessages(int maxCount)
{
for(int i= 0; i < maxCount, i++)
{
this.MessageCollection.Add(new ImageMessage()
{
Aspect = Xamarin.Forms.Aspect.Fill,
Source = "Image3.jpg",
Author = new Author() { Name = "Andrea", Avatar = "People_Circle2.png" },
});
}

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            xmlns:local="clr-namespace:Chat"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.BindingContext>
       <local:ViewModel/>
   </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat" >
   <sfChat:SfChat.LoadMoreTemplate>
   <DataTemplate>
       <Grid>
           <Label Text = "Click here to load More Items" IsVisible="{Binding IsBusy,Source={x:Reference viewModel}}"  TextColor="Black" BackgroundColor="AliceBlue"
          HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
       </Grid>
   </DataTemplate>
       //</sfChat:SfChat.LoadMoreTemplate>
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

ItemsSource

Gets or sets the message collection for the chat. Each item in the collection will be converted to chat message and added to Messages.

Declaration

public IEnumerable ItemsSource { get; set; }

Property Value

Type
System.Collections.IEnumerable

Examples

The following code example demonstrates how to define items source to the SfChat control.

using Syncfusion.XForms.Chat;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
ObservableCollection<Conversation> messageCollection;
    public SfChatDemo()
    {
        sfChat = new SfChat();
        sfChat.CurrentUser = new Author() { Name = &quot;Nancy&quot;, Avatar = &quot;Nancy.png&quot; };
        messageCollection = new ObservableCollection&lt;Conversation>();
        Conversation message = new Conversation();
        message.Author = sfChat.CurrentUser;
        message.Text = &quot;HI&quot;;
        messageCollection.Add(message);
        Conversation message1 = new Conversation();
        message1.Text = &quot;Hello,&quot; + sfChat.CurrentUser.Name;
        message1.Author = new Author() { Name = &quot;Andrea&quot;, Avatar = &quot;Andrea.png&quot; },
        messageCollection.Add(message1);
        sfChat.ItemsSource = messageCollection;
        sfChat.ItemsSourceConverter = new ChatMessageConverter();

        this.Content = sfChat;
    }
}

public class ChatMessageConverter : IChatMessageConverter
{
    public IMessage ConvertToChatMessage(object data, SfChat chat)
    {
        Conversation userMessage = data as Conversation;
        TextMessage textMessage = new TextMessage()
        {
            Text = userMessage.Text,
            DateTime = userMessage.TimeStamp
            Author = userMessage.Author
            Data = userMessage;
        };

        return textMessage;
    }

    public object ConvertToData(object chatMessage, SfChat chat)
    {
        TextMessage textMessage = chatMessage as TextMessage;
        Conversation conversation = new Conversation()
        {
            Text = textMessage.Text,
            TimeStamp = textMessage.DateTime,
            Author =chat.CurrentUser
        };

        return conversation;
    }
}

}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
<ContentPage.Resources>
      <ResourceDictionary>
    <local: ChatMessageConverter x:Key=" ChatMessageConverter " />
  </ResourceDictionary> 
       </ContentPage.Resources>
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat"
                      ItemsSource ="{Binding Messages}"
                      ItemsSourceConverter ="{StaticResource ChatMessageConverter}"
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

ItemsSourceConverter

Gets or sets the converter used to convert data objects to chat messages and vice versa.

Declaration

public IChatMessageConverter ItemsSourceConverter { get; set; }

Property Value

Type
IChatMessageConverter

Examples

The following code example demonstrates how to add items source converter to the SfChat control.

using Syncfusion.XForms.Chat;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
ObservableCollection<Conversation> messageCollection;
    public SfChatDemo()
    {
        sfChat = new SfChat();
        sfChat.CurrentUser = new Author() { Name = &quot;Nancy&quot;, Avatar = &quot;Nancy.png&quot; };
        messageCollection = new ObservableCollection&lt;Conversation>();
        Conversation message = new Conversation();
        message.Author = sfChat.CurrentUser;
        message.Text = &quot;HI&quot;;
        messageCollection.Add(message);
        Conversation message1 = new Conversation();
        message1.Text = &quot;Hello,&quot; + sfChat.CurrentUser.Name;
        message1.Author = new Author() { Name = &quot;Andrea&quot;, Avatar = &quot;Andrea.png&quot; },
        messageCollection.Add(message1);
        sfChat.ItemsSource = messageCollection;
        sfChat.ItemsSourceConverter = new ChatMessageConverter();

        this.Content = sfChat;
    }
}

public class ChatMessageConverter : IChatMessageConverter
{
    public IMessage ConvertToChatMessage(object data, SfChat chat)
    {
        Conversation userMessage = data as Conversation;
        TextMessage textMessage = new TextMessage()
        {
            Text = userMessage.Text,
            DateTime = userMessage.TimeStamp
            Author = userMessage.Author
            Data = userMessage;
        };

        return textMessage;
    }

    public object ConvertToData(object chatMessage, SfChat chat)
    {
        TextMessage textMessage = chatMessage as TextMessage;
        Conversation conversation = new Conversation()
        {
            Text = textMessage.Text,
            TimeStamp = textMessage.DateTime,
            Author =chat.CurrentUser
        };

        return conversation;
    }
}

}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
<ContentPage.Resources>
      <ResourceDictionary>
    <local: ChatMessageConverter x:Key=" ChatMessageConverter " />
  </ResourceDictionary> 
       </ContentPage.Resources>
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat"
                      ItemsSource ="{Binding Messages}"
                      ItemsSourceConverter ="{StaticResource ChatMessageConverter}"
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

LeftSwipeViewTemplate

Gets or sets the template view to be displayed when swiping a message from 'left to right'. The SfChat enables you to load a desired Content to be displayed when swiping towards right using this property. The swipe views will be displayed only when AllowSwiping is set as true.

Declaration

public DataTemplate LeftSwipeViewTemplate { get; set; }

Property Value

Type	Description
Xamarin.Forms.DataTemplate	The template that is displayed when left to right swipe action is performed.

Examples

namespace GettingStarted
{
    SfChat sfChat;
    ViewModel viewModel;
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            sfChat = new SfChat();
            viewModel = new ViewModel();
            sfChat.Messages = viewModel.Messages;
            sfChat.CurrentUser = viewModel.CurrentUser;
            sfChat.MaxSwipeOffset = 130;
            sfChat.AllowSwiping = true;
            sfChat.LeftSwipeTemplate = new DataTemplate(() =>
            {
            var grid = new Grid()
            {
                BackgroundColor = Color.Green,
                HorizontalOptions = LayoutOptions.Fill,
                VerticalOptions = LayoutOptions.Fill,
            };
            return grid;
            }); 
            this.Content = sfChat;
        }
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">

    <ContentPage.BindingContext>
        <local:GettingStartedViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <sfchat:SfChat x:Name="sfChat"                
                       Messages="{Binding Messages}"     
                       CurrentUser="{Binding CurrentUser}"
                       MaxSwipeOffset="130"
                       AllowSwiping="True">                      
           <sfchat:SfChat.LeftSwipeTemplate>
               <DataTemplate>
                   <Grid BackgroundColor = "Green"
                         HorizontalOptions="Fill"
                         VerticalOptions="Fill">
                   </Grid>
               </DataTemplate>
           </sfchat:SfChat.LeftSwipeTemplate>
        </sfchat:SfChat>
    </ContentPage.Content>
</ContentPage>

LoadMoreBehavior

Gets or sets the LoadMoreOption that determines the behaviour of load more in SfChat.

Declaration

public LoadMoreOption LoadMoreBehavior { get; set; }

Property Value

Type
LoadMoreOption

Examples

The following code example demonstrates how to add Load more behavior to the SfChat control.

using Syncfusion.XForms.Chat;
using Xamarin.Forms;
namespace ChatDemo
   {
       public class SfChatDemo : ContentPage
       {
           SfChat sfChat;
       public SfChatDemo()
       {
           sfChat = new SfChat();
           sfChat.LoadMoreBehavior = LoadMoreBehavior.Auto;
           this.Content = sfChat;
       }
   }

}

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            xmlns:local="clr-namespace:Chat"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat" LoadMoreBehavior="Auto" >
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

LoadMoreCommand

Gets or sets the command that will be executed when the load more view is tapped or when the load more operation is triggered.

Declaration

public ICommand LoadMoreCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Examples

The following code example demonstrates how to add load more command to the SfChat control.

using Syncfusion.XForms.Chat;
using Xamarin.Forms;
namespace ChatDemo
   {
       public class SfChatDemo : ContentPage
       {
           SfChat sfChat;
           ViewModel viewModel;
       public SfChatDemo()
       {
           sfChat = new SfChat();
           viewModel = new ViewModel();
           sfChat.LoadMoreCommand=viewModel.LoadMoreItemsCommand;
           sfChat.LoadMoreCommandParameter=400;
           this.Content = sfChat;
       }
   }

}
//ViewModel.cs
private bool isBusy;
public bool IsBusy
{
get { return isBusy; }
set
{
this.isBusy = value;
RaisePropertyChanged("IsBusy");
}
}
LoadMoreItemsCommand = new Command<object>(LoadMoreItems, CanLoadMoreItems);
private bool CanLoadMoreItems(object obj)
{
if (Products.Count >= totalItems)
return false;
return true;
}
private async void LoadMoreItems(object obj)
{
int maxCount = obj as int;
IsBusy = true;
await Task.Delay(2500);
var index = Products.Count;
var count = index + 3 >= totalItems ? totalItems - index : 3;
AddMessages(maxCount);
IsBusy = false;
}
private void AddMessages(int maxCount)
{
for(int i= 0; i < maxCount, i++)
{
this.MessageCollection.Add(new ImageMessage()
{
Aspect = Xamarin.Forms.Aspect.Fill,
Source = "Image3.jpg",
Author = new Author() { Name = "Andrea", Avatar = "People_Circle2.png" },
});
}

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            xmlns:local="clr-namespace:Chat"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.BindingContext>
       <local:ViewModel/>
   </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat"
         LoadMoreCommand="{Binding LoadMoreCommand}" LoadMoreCommandParameter="400" >
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

LoadMoreCommandParameter

Gets or sets the parameter for LoadMoreCommand.

Declaration

public object LoadMoreCommandParameter { get; set; }

Property Value

Type
System.Object

Examples

The following code example demonstrates how to add IsBusy to the SfChat control.

using Syncfusion.XForms.Chat;
using Xamarin.Forms;
namespace ChatDemo
   {
       public class SfChatDemo : ContentPage
       {
           SfChat sfChat;
           ViewModel viewModel;
       public SfChatDemo()
       {
           sfChat = new SfChat();
           viewModel = new ViewModel();
           sfChat.LoadMoreCommand=viewModel.LoadMoreItemsCommand;
           sfChat.LoadMoreCommandParameter=400;
           this.Content = sfChat;
       }
   }

}
//ViewModel.cs
private bool isBusy;
public bool IsBusy
{
get { return isBusy; }
set
{
this.isBusy = value;
RaisePropertyChanged("IsBusy");
}
}
LoadMoreItemsCommand = new Command<object>(LoadMoreItems, CanLoadMoreItems);
private bool CanLoadMoreItems(object obj)
{
if (Products.Count >= totalItems)
return false;
return true;
}
private async void LoadMoreItems(object obj)
{
int maxCount = obj as int;
IsBusy = true;
await Task.Delay(2500);
var index = Products.Count;
var count = index + 3 >= totalItems ? totalItems - index : 3;
AddMessages(maxCount);
IsBusy = false;
}
private void AddMessages(int maxCount)
{
for(int i= 0; i < maxCount, i++)
{
this.MessageCollection.Add(new ImageMessage()
{
Aspect = Xamarin.Forms.Aspect.Fill,
Source = "Image3.jpg",
Author = new Author() { Name = "Andrea", Avatar = "People_Circle2.png" },
});
}

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            xmlns:local="clr-namespace:Chat"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.BindingContext>
       <local:ViewModel/>
   </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat"
         LoadMoreCommand="{Binding LoadMoreCommand}" LoadMoreCommandParameter="400" >
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

LoadMoreTemplate

Gets or sets the template that will be loaded as load more view when SfChat is scrolled to the top of the message collection. If it is null, the default load more view will be loaded.

Declaration

public DataTemplate LoadMoreTemplate { get; set; }

Property Value

Type
Xamarin.Forms.DataTemplate

Examples

The following code example demonstrates how to add load more template to the SfChat control.

using Syncfusion.XForms.Chat;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
    public SfChatDemo()
    {
        sfChat = new SfChat();
        sfChat.LoadMoreBehavior=LoadMoreBehavior.Manual;
        DataTemplate loadMoreTemplate = new DataTemplate(() => {
        var grid = new Grid();
        var label = new Label
        {
            Text = &quot;Click here to Load More Items...&quot;,
            FontSize = 20,
            BackgroundColor = Color.AliceBlue,
            HorizontalTextAlignment = TextAlignment.Center,
            VerticalTextAlignment = TextAlignment.Center
        };
        label.SetBinding(Label.IsVisibleProperty, new Binding(&quot;IsBusy&quot;, BindingMode.Default, new InverseBoolConverter()));
         grid.Children.Add(label);
         return grid;
        });
        sfChat.LoadMoreTemplate = loadMoreTemplate;
        this.Content = sfChat;
    }
}

}

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            xmlns:local="clr-namespace:Chat"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.BindingContext>
       <local:ViewModel/>
   </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat" >
   <sfChat:SfChat.LoadMoreTemplate>
   <DataTemplate>
       <Grid>
           <Label Text = "Click here to load More Items" IsVisible="{Binding IsBusy,Source={x:Reference viewModel}}"  TextColor="Black" BackgroundColor="AliceBlue"
          HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
       </Grid>
   </DataTemplate>
       //</sfChat:SfChat.LoadMoreTemplate>
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

MaxSwipeOffset

Gets or sets a value indicating the maximum offset/pixels a message will be moved upon swiping. The default value is 100.

Declaration

public double MaxSwipeOffset { get; set; }

Property Value

Type	Description
System.Double	The swipe offset value.

Examples

namespace GettingStarted
{
    SfChat sfChat;
    ViewModel viewModel;
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            sfChat = new SfChat();
            viewModel = new ViewModel();
            sfChat.Messages = viewModel.Messages;
            sfChat.CurrentUser = viewModel.CurrentUser;
            sfChat.MaxSwipeOffset = 130;
            sfChat.AllowSwiping = true;
            this.Content = sfChat;
        }
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">

    <ContentPage.BindingContext>
        <local:GettingStartedViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <sfchat:SfChat x:Name="sfChat"                
                       Messages="{Binding Messages}"     
                       CurrentUser="{Binding CurrentUser}"
                       MaxSwipeOffset="130"
                       AllowSwiping="True">                      
        </sfchat:SfChat>
    </ContentPage.Content>
</ContentPage>

MessageDoubleTappedCommand

Gets or sets System.Windows.Input.ICommand that will be executed when a message is double tapped in SfChat control.

Declaration

public ICommand MessageDoubleTappedCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Examples

namespace ChatDemo
{
    public class SfChatDemo : ContentPage
    {
        public SfChatDemo()
        {
            InitializeComponent();
        }
    }
}

//ViewModel.cs

public class ViewModel : INotifyPropertyChanged
{
   public Command<object> doubleTappedCommand;

    public ViewModel()
    {
        DoubleTappedCommand = new Command<object>(MessageDoubleTapped);
    }

    public Command<object> DoubleTappedCommand
    {
        get { return doubleTappedCommand; }
        set { doubleTappedCommand = value; }
    }

    private void MessageDoubleTapped(object args)
    {
        var MessageDoubleTappedArgs = args as MessageDoubleTappedEventArgs;
    }
}

<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
            <sfChat:SfChat x:Name="sfChat"  
                           MessageDoubleTappedCommand="{Binding DoubleTappedCommand}" />
</ContentPage.Content>

MessageLongPressedCommand

Gets or sets System.Windows.Input.ICommand that will be executed when a message is long pressed/held in SfChat control.

Declaration

public ICommand MessageLongPressedCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Examples

namespace ChatDemo
{
    public class SfChatDemo : ContentPage
    { 
        public SfChatDemo()
        {
            InitializeComponent();
        }
    }
}

//ViewModel.cs

public class ViewModel : INotifyPropertyChanged
{
    public Command<object> longPressedCommand;

    public ViewModel()
    {
        LongPressedCommand = new Command<object>(MessageLongPressed);
    }

    public Command<object> LongPressedCommand
    {
        get { return longPressedCommand; }
        set { longPressedCommand = value; }
    }

    private void MessageLongPressed(object args)
    {
        var MessageLongPressedArgs = args as MessageLongPressedEventArgs;
    }
}

<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
            <sfChat:SfChat x:Name="sfChat"  
                           MessageLongPressedCommand ="{Binding LongPressedCommand }" />
</ContentPage.Content>

Messages

Gets or sets the collection of System.Object of messages to be displayed in the chat.

Declaration

public IList<object> Messages { get; set; }

Property Value

Type	Description
System.Collections.Generic.IList<System.Object>	A collection of System.Object. The default value is Empty.

Examples

The following code example demonstrates how to add messages to the SfChat control.

using Syncfusion.XForms.Chat;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
ObservableCollection<object> messageCollection;
    public SfChatDemo()
    {
        sfChat = new SfChat();
        messageCollection = new ObservableCollection&lt;object>();
        TextMessage textMessage = new TextMessage();
        textMessage.Author = sfChat.CurrentUser;
        textMessage.Text = &quot;HI&quot;;
        messageCollection.Add(textMessage);

        TextMessage textMessage1 = new TextMessage();
        textMessage1.Text = &quot;Hello,&quot; + sfChat.CurrentUser.Name;
        messageCollection.Add(textMessage1);
        sfChat.Messages = messageCollection;

        this.Content = sfChat;
    }
}

}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat"
                      Messages="{Binding MessageCollection}">
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

MessageShape

Gets or sets the shape of the message view.

Declaration

public MessageShape MessageShape { get; set; }

Property Value

Type
MessageShape

MessageSpacing

Gets or sets the spacing between the messages in SfChat.

Declaration

public double MessageSpacing { get; set; }

Property Value

Type	Description
System.Double	The message spacing value.

Examples

namespace GettingStarted
{
    SfChat sfChat;
    ViewModel viewModel;
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            sfChat = new SfChat();
            viewModel = new GettingStartedViewModel();
            sfChat.Messages = viewModel.Messages;
            sfChat.CurrentUser = viewModel.CurrentUser;
            sfChat.MessageSpacing = 10;
            this.Content = sfChat;
        }
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">

    <ContentPage.BindingContext>
        <local:GettingStartedViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <sfchat:SfChat x:Name="sfChat"                
                       Messages="{Binding Messages}"     
                       CurrentUser="{Binding CurrentUser}"
                       MessageSpacing="10"/>
        </sfchat:SfChat>
    </ContentPage.Content>
</ContentPage>

MessageTappedCommand

Gets or sets System.Windows.Input.ICommand that will be executed when a message is tapped in SfChat control.

Declaration

public ICommand MessageTappedCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Examples

namespace ChatDemo
{
    public class SfChatDemo : ContentPage
    {
        public SfChatDemo()
        {
            InitializeComponent();
        }
    }
}

//ViewModel.cs

public class ViewModel : INotifyPropertyChanged
{
    public Command<object> tappedCommand;

    public ViewModel()
    {
        TappedCommand = new Command<object>(MessageTapped);
    }

    public Command<object> TappedCommand
    {
        get { return tappedCommand; }
        set { tappedCommand = value; }
    }

    private void MessageTapped(object args)
    {
          var MessageTappedArgs = args as MessageTappedEventArgs;
    }
}

<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
            <sfChat:SfChat x:Name="sfChat"  
                           MessageTappedCommand="{Binding TappedCommand}" />
</ContentPage.Content>

MessageTemplate

Gets or sets the template used to display a message and its related information.

Declaration

public DataTemplate MessageTemplate { get; set; }

Property Value

Type
Xamarin.Forms.DataTemplate

OutgoingMessageTimestampFormat

Gets or sets a value that indicates the format applied to time stamp for all the outgoing messages.

Declaration

public string OutgoingMessageTimestampFormat { get; set; }

Property Value

Type
System.String

RightSwipeViewTemplate

Gets or sets the template view to be displayed when swiping a message from 'right to left'. The SfChat enables you to load a desired Content to be displayed when swiping towards left using this property. The swipe views will be displayed only when AllowSwiping is set as true.

Declaration

public DataTemplate RightSwipeViewTemplate { get; set; }

Property Value

Type	Description
Xamarin.Forms.DataTemplate	The template that is displayed when right to left swipe action is performed.

Examples

namespace GettingStarted
{
    SfChat sfChat;
    ViewModel viewModel;
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            sfChat = new SfChat();
            viewModel = new ViewModel();
            sfChat.Messages = viewModel.Messages;
            sfChat.CurrentUser = viewModel.CurrentUser;
            sfChat.MaxSwipeOffset = 130;
            sfChat.AllowSwiping = true;
            sfChat.RightSwipeTemplate = new DataTemplate(() =>
            {
            var grid = new Grid()
            {
                BackgroundColor = Color.Green,
                HorizontalOptions = LayoutOptions.Fill,
                VerticalOptions = LayoutOptions.Fill,
            };
            return grid;
            }); 
            this.Content = sfChat;
        }
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">

    <ContentPage.BindingContext>
        <local:GettingStartedViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <sfchat:SfChat x:Name="sfChat"                
                       Messages="{Binding Messages}"     
                       CurrentUser="{Binding CurrentUser}"
                       MaxSwipeOffset="130"
                       AllowSwiping="True">                      
           <sfchat:SfChat.RightSwipeTemplate>
               <DataTemplate>
                   <Grid BackgroundColor = "Green"
                         HorizontalOptions="Fill"
                         VerticalOptions="Fill">
                   </Grid>
               </DataTemplate>
           </sfchat:SfChat.RightSwipeTemplate>
        </sfchat:SfChat>
    </ContentPage.Content>
</ContentPage>

SendMessageCommand

Gets or sets the command that will be executed when the user sends a message.

Declaration

public ICommand SendMessageCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Examples

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            xmlns:local="clr-namespace:Chat"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.BindingContext>
       <local:ViewModel/>
   </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat"
                      Messages="{Binding Messages}"
                      SendMessageCommand="{Binding SendMessage}">
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

//ViewModel.cs
SendMessage = new Command<object>(SendMessage);

private async void SendMessage(object obj)
{
    var e = obj as SendMessageEventArgs;
    if (e.Message.Text == "HI")
    {
        // Handling the message from editor, won't add it to the chat control.
        e.Handled = true;

        //Message created from the editor is added to the chat control. 
        sfChat.Messages.Add(e.Message);

        //Creating and adding response message to the chat control.
        var message = new TextMessage();
        message.Text = "Hello" + e.Message.Author.Name;
        this.Messages.Add(message);
    }
}

ShowAttachmentButton

Gets or sets a value indicating whether the visibility of the attachment icon in SfChat.

Declaration

public bool ShowAttachmentButton { get; set; }

Property Value

Type	Description
System.Boolean	True, if attachment icon is visible. Default value is false.

Examples

The following code example demonstrates how to add the attachment button to the SfChat control.

using Syncfusion.XForms.Chat;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
public SfChatDemo()
{
sfChat = new SfChat();
sfChat.ShowAttachmentButton=True;
this.Content = sfChat;
}
}
}

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"        ///            
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.Content>
<sfChat:SfChat x:Name="chat" ShowAttachmentButton="True"> </sfChat:SfChat>
   </ContentPage.Content>
</ContentPage>

ShowIncomingMessageAuthorName

Gets or sets a value indicating whether the message’s author name should be shown for all the incoming messages. This is a bindable property.

Declaration

public bool ShowIncomingMessageAuthorName { get; set; }

Property Value

Type	Description
System.Boolean	true If the author name is visible, otherwise false. The default value is true.

ShowIncomingMessageAvatar

Gets or sets a value indicating whether the avatar should be shown for all the incoming messages.

Declaration

public bool ShowIncomingMessageAvatar { get; set; }

Property Value

Type	Description
System.Boolean	true If the avatar is visible, otherwise false. The default value is true.

ShowIncomingMessageTimestamp

Gets or sets a value indicating whether the time stamp details should be shown for all the incoming messages. This is a bindable property.

Declaration

public bool ShowIncomingMessageTimestamp { get; set; }

Property Value

Type	Description
System.Boolean	true If the time stamp is visible, otherwise false. The default value is true.

ShowKeyboardAlways

Gets or sets a value indicating whether keyboard should remain open even after a message is sent in SfChat.

Declaration

public bool ShowKeyboardAlways { get; set; }

Property Value

Type	Description
System.Boolean	The default value is true.

Remarks

By default Keyboard will remain open after a message is sent in SfChat.

ShowMessageInputView

Gets or sets a value indicating whether the visibility of the message input/typing area in SfChat.

Declaration

public bool ShowMessageInputView { get; set; }

Property Value

Type	Description
System.Boolean	False, if message input area is not visible. Default value is true.

ShowOutgoingMessageAuthorName

Gets or sets a value indicating whether the message’s author name should be shown for all the outgoing messages. This is a bindable property.

Declaration

public bool ShowOutgoingMessageAuthorName { get; set; }

Property Value

Type	Description
System.Boolean	true If the author name is visible, otherwise false. The default value is true.

ShowOutgoingMessageAvatar

Gets or sets a value indicating whether the avatar should be shown for all the outgoing messages.

Declaration

public bool ShowOutgoingMessageAvatar { get; set; }

Property Value

Type	Description
System.Boolean	true If the avatar is visible, otherwise false. The default value is false.

ShowOutgoingMessageTimestamp

Gets or sets a value indicating whether the time stamp details should be shown for all the outgoing messages. This is a bindable property.

Declaration

public bool ShowOutgoingMessageTimestamp { get; set; }

Property Value

Type	Description
System.Boolean	true If the time stamp is visible, otherwise false. The default value is true.

ShowTimeBreak

Gets or sets a value indicating whether a time break view can be shown in SfChat by grouping messages by date.

Declaration

public bool ShowTimeBreak { get; set; }

Property Value

Type
System.Boolean

ShowTypingIndicator

Gets or sets a value indicating whether the typing indicator should be displayed at the bottom of chat control to notify when a user is typing.

Declaration

public bool ShowTypingIndicator { get; set; }

Property Value

Type	Description
System.Boolean	true If typing indicator is visible, otherwise false. The default value is true.

StickyTimeBreak

Gets or sets a value indicating whether the timer break should be sticky or non-sticky.

Declaration

public bool StickyTimeBreak { get; set; }

Property Value

Type
System.Boolean

SuggestionItemSelectedCommand

Gets or sets the command that will be executed when an item is selected from the list of suggestions that is displayed as an response to a user message.

Declaration

public ICommand SuggestionItemSelectedCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Examples

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            xmlns:local="clr-namespace:Chat"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.BindingContext>
       <local:ViewModel/>
   </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat"
                      Messages="{Binding Messages}"
                      SuggestionItemSelectedCommand="{Binding Selected}">
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

//ViewModel.cs
Selected = new Command<object>(SuggestionItemSelected);

private async void SuggestionItemSelected(object obj)
{
    var e = obj as SuggestionItemSelectedEventArgs;
    if ((e.SelectedItem as ISuggestion).Text == "BMW X5")
    {
        e.HideAfterSelection = true;

        //Customer will select date from calendar to test drive.
        CalendarMessage message = new CalendarMessage();
        message.Text = "Please select date to test drive your favorite car BMW X5";
        message.SelectedDate = DateTime.Now;

        message.DisplayMode = ViewMode.MonthView;
        message.Author = author;
        this.Messages.Add(message);
    }
}

Suggestions

Gets or sets the list of items to be displayed as response to a user message. The suggestions will be displayed above the message typing/input area as part of the footer view.

Declaration

public ChatSuggestions Suggestions { get; set; }

Property Value

Type
ChatSuggestions

Examples

The following code example demonstrates how to add suggestions to the SfChat control.

using Syncfusion.XForms.Chat;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
    public SfChatDemo()
    {
        sfChat = new SfChat();

        ChatSuggestions suggestions = new ChatSuggestions();
        ObservableCollection&lt;Suggestion> items = new ObservableCollection&lt;Suggestion>();
        items.Add(new Suggestion() { Text = &quot;Audi&quot; });
        items.Add(new Suggestion() { Text = &quot;BMW&quot; });
        suggestions.Items = items;
        suggestions.ItemSpacing = 15;
        suggestions.Orientation = SuggestionsOrientation.Horizontal;
        sfChat.Suggestions = suggestions;

        this.Content = sfChat;
    }
}

}

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            xmlns:local="clr-namespace:Chat"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.BindingContext>
       <local:ViewModel/>
   </ContentPage.BindingContext>
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat"
                      Suggestions="{Binding Chatsuggestion}">
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

TimeBreakTemplate

Gets or sets the template used to display custom view in the time break area.

Declaration

public DataTemplate TimeBreakTemplate { get; set; }

Property Value

Type
Xamarin.Forms.DataTemplate

TypingIndicator

Gets or sets the helper to set the settings for typing indicator.

Declaration

public ChatTypingIndicator TypingIndicator { get; set; }

Property Value

Type
ChatTypingIndicator

Examples

The following code example demonstrates how to construct typing indicator in the SfChat control.

using Syncfusion.XForms.Chat;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
ChatTypingIndicator TypingIndicator;
bool ShowTypingIndicator = false;
    public SfChatDemo()
    {
        sfChat = new SfChat();

        author = new Author();
        author.Name = &quot;Bot&quot;;
        author.Avatar = &quot;Rose.png&quot;;
        sfChat.CurrentUser = author;

        TypingIndicator = new ChatTypingIndicator();
        ObservableCollection&lt;Author> authorCollection = new ObservableCollection&lt;Author>();
        TypingIndicator.AvatarViewType = AvatarViewType.Image;
        TypingIndicator.Text = &quot;Syncfusion typing...&quot;;
        sfChat.TypingIndicator = typingIndicator;
        sfChat.ShowTypingIndicator = true;

        this.Content = sfChat;
    }
}

}

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
            xmlns:local="clr-namespace:Chat"
            mc:Ignorable="d"
            x:Class="Chat.SfChatDemo">
   <ContentPage.Content>
       <sfchat:SfChat x:Name="Sfchat"
                      TypingIndicator="{Binding TypingIndicator}"
                      ShowTypingIndicator="{Binding ShowTypingIndicator}">
       </sfchat:SfChat>
   </ContentPage.Content>
</ContentPage>

TypingIndicatorViewHeight

Gets or sets a value indicating the height of the typing indicator view in SfChat.The default value is 20. Set value as 0 to hide the typing indicator view area.

Declaration

public double TypingIndicatorViewHeight { get; set; }

Property Value

Type
System.Double

Examples

using Syncfusion.XForms.Chat;
using Xamarin.Forms;

namespace App7
{
    public partial class MainPage : ContentPage
    {
        SfChat sfChat;
        GettingStartedViewModel viewModel;
        public MainPage()
        {
            InitializeComponent();

            sfChat = new SfChat();
            viewModel = new GettingStartedViewModel();
            sfChat.TypingIndicatorViewHeight = 0;
            sfChat.ShowOutgoingMessageAvatar = true;
            sfChat.Messages = viewModel.Messages;
            sfChat.CurrentUser = viewModel.CurrentUser;
            this.Content = sfChat;
        }
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App7"                   
             xmlns:sfChat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             x:Class="App7.MainPage">

    <ContentPage.BindingContext>
        <local:GettingStartedViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
    <ContentPage.Content>

        <sfChat:SfChat x:Name="sfChat"
                       TypingIndicatorViewHeight="0"
                       ShowOutgoingMessageAvatar="True" 
                       Messages="{Binding Messages}"
                       CurrentUser="{Binding CurrentUser}" >
        </sfChat:SfChat>

    </ContentPage.Content>
</ContentPage>

Methods

Dispose()

Disposes the managed resources.

Declaration

public void Dispose()

Dispose(Boolean)

Releases the unmanaged resources used by the component and optionally releases the managed resources.

Declaration

protected virtual void Dispose(bool disposing)

Parameters

Type	Name	Description
System.Boolean	disposing	if true - release both managed and unmanaged resources; if false - release only unmanaged resources.

OnPropertyChanged(String)

Raised when SfChat control properties is changed.

Declaration

protected override void OnPropertyChanged(string propertyName = null)

Parameters

Type	Name	Description
System.String	propertyName	changed property name.

ResetSwipeOffset()

Resets the swipe offset of the last swiped message and moves the swiped message to its default position.

Declaration

public void ResetSwipeOffset()

Examples

namespace GettingStarted
{
    SfChat sfChat;
    ViewModel viewModel;
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            sfChat = new SfChat();
            viewModel = new ViewModel();
            sfChat.Messages = viewModel.Messages;
            sfChat.CurrentUser = viewModel.CurrentUser;
            sfChat.SwipeEnded += SfChat_SwipeEnded;
            sfChat.SwipeOffset = 130;
            sfChat.AllowSwiping = true;
            sfChat.RightSwipeTemplate = new DataTemplate(() =>
            {
            var grid = new Grid()
            {
                BackgroundColor = Color.Transparent,
                HorizontalOptions = LayoutOptions.Fill,
                VerticalOptions = LayoutOptions.Fill,
            };
            return grid;
            }); 
            this.Content = sfChat;
        }

        private void sfChat_SwipeEnded(object sender, MessageSwipeEndedEventArgs e)
        {
            if (e.SwipeOffset > 150)
            {
                sfChat.ResetSwipeOffset();
            }
        }
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">

    <ContentPage.BindingContext>
        <local:GettingStartedViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <sfchat:SfChat x:Name="sfChat"                
                       Messages="{Binding Messages}"     
                       CurrentUser="{Binding CurrentUser}"
                       SwipeEnded="sfChat_SwipeEnded"
                       SwipeOffset="130"
                       AllowSwiping="True">                      
           <sfchat:SfChat.RightSwipeTemplate>
               <DataTemplate>
                   <Grid BackgroundColor = "Transparent"
                         HorizontalOptions="Fill"
                         VerticalOptions="Fill">
                   </Grid>
               </DataTemplate>
           </sfchat:SfChat.RightSwipeTemplate>
        </sfchat:SfChat>
    </ContentPage.Content>
</ContentPage>

ScrollToMessage(Object)

Scrolls the SfChat to the given message.

Declaration

public void ScrollToMessage(object message)

Parameters

Type	Name	Description
System.Object	message	The message to scroll to.

Remarks

By default, the message is scrolled at end of chat.

Events

AttachmentButtonClicked

Occurs when the attachment button is tapped.

Declaration

public event EventHandler AttachmentButtonClicked

Event Type

Type
System.EventHandler

Examples

The following code example demonstrates to attach media file in SfChat control.

using Syncfusion.XForms.Chat;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
    public SfChatDemo()
    {
        sfChat = new SfChat();
        this.sfChat.ShowAttachmentButton=true;  
        this.sfChat.AttachmentButtonClicked += SfChatAttachmentButtonTapped;
        this.Content = sfChat;
    }

    /// &lt;summary>
    /// Raised when the a message is being sent.
    /// &lt;/summary>
    /// &lt;param name=&quot;sender&quot;>&lt;see cref=&quot;SfChat&quot;/> instance&lt;/param>
    /// &lt;param name=&quot;e&quot;>&lt;see cref=&quot;EventArgs&quot;/> parameters&lt;/param>
    private void SfChatAttachmentButtonTapped(object sender, EventArgs e)
    {
        // Do desired actions like adding and image from the gallery as shown here
        // https://help.syncfusion.com/xamarin/chat/attachment-button#attach-image-from-gallery-in-xamarinforms-chat-sfchat
    }
}

}

CardTapped

Occurs when the user taps a card or clicks an action button in a card message.

Declaration

public event EventHandler<CardTappedEventArgs> CardTapped

Event Type

Type
System.EventHandler<CardTappedEventArgs>

Examples

The following code example demonstrates to retain card message after selecting card action.

using Syncfusion.SfCalendar.XForms;
using Syncfusion.XForms.Chat;
using System;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
    public SfChatDemo()
    {
        sfChat = new SfChat();

        CardMessage cardMessage = new CardMessage();
        cardMessage.Author = new Author() { Name = &quot;Andrea&quot;, Avatar = &quot;Andrea.png&quot; };
        cardMessage.Text = &quot;Select card from following Card&quot;;
        ObservableCollection&lt;CardButton> cardButtons = new ObservableCollection&lt;CardButton>();
        cardButtons.Add(new CardButton() { Value = &quot;OK&quot;, Title = &quot;OK&quot; });
        ObservableCollection&lt;Card> cards = new ObservableCollection&lt;Card>();            

        Card card = new Card();
        card.Title = &quot;Audi&quot;;
        card.Subtitle = &quot;Series&quot;;            
        card.Description = &quot;Audi AG is a German automobile manufacturer that designs, engineers, produces, markets and distributes luxury vehicles.&quot;;            
        card.Image = &quot;Audi.jpg&quot;; 

        Card card1 = new Card();
        card1.Title = &quot;Benz&quot;;
        card1.Subtitle = &quot;Series&quot;;
        card1.Description = &quot;Mercedes-Benz is a German global automobile marque and a division of Daimler AG.&quot;;
        card1.Image = &quot;Benz.jpg&quot;;

        card.Buttons = cardButtons;            
        card1.Buttons = cardButtons;

        cards.Add(card);
        cards.Add(card1);

        cardMessage.Cards = cards;
        chat.Messages.Add(cardMessage);

        this.sfChat.CardTapped += sfChatCardTapped;
        this.Content = sfChat;
    }

    /// &lt;summary>
    /// Raised when the user taps a card or clicks an action button in a card message.
    /// &lt;/summary>
    /// &lt;param name=&quot;sender&quot;>&lt;see cref=&quot;SfChat&quot;/> instance&lt;/param>
    /// &lt;param name=&quot;e&quot;>&lt;see cref=&quot;CardTappedEventArgs&quot;/> parameters&lt;/param>
    private void sfChatCardTapped(object sender, CardTappedEventArgs e)
    {
       // Card message will not hide after selecting action card.
       e.HideAfterSelection = false;
    }

}

ImageTapped

Occurs when the user tapped an image in the ImageMessage.

Declaration

public event EventHandler<ImageTappedEventArgs> ImageTapped

Event Type

Type
System.EventHandler<ImageTappedEventArgs>

Examples

The following code example demonstrates to get image message instance of tapped image.

using Syncfusion.SfCalendar.XForms;
using Syncfusion.XForms.Chat;
using System;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
public SfChatDemo()
{
sfChat = new SfChat();
        SfChat sfChat = new SfChat();
        Author currentUser = new Author() { Name = &quot;Nancy&quot;, Avatar = &quot;People_Circle16.png&quot; };
        sfChat.CurrentUser = currentUser;
        ImageMessage message = new ImageMessage()
        {
            Aspect = Xamarin.Forms.Aspect.AspectFit,
            Source = &quot;Image3.jpg&quot;,
            Author = currentUser,
        };

        ImageMessage message1 = new ImageMessage()
        {
            Aspect = Xamarin.Forms.Aspect.Fill,
            Source = &quot;Image3.jpg&quot;,
            Author = new Author() { Name = &quot;Andrea&quot;, Avatar = &quot;People_Circle2.png&quot; },
        };

        sfChat.Messages.Add(message);
        sfChat.Messages.Add(message1);

        sfChat.ImageTapped += OnImageTapped; 
        this.Content = sfChat;
    }

    /// &lt;summary>
    /// Raised when the user taps an image in image message.
    /// &lt;/summary>
    /// &lt;param name=&quot;sender&quot;>&lt;see cref=&quot;SfChat&quot;/> instance&lt;/param>
    /// &lt;param name=&quot;e&quot;>&lt;see cref=&quot;SuggestionItemSelectedEventArgs&quot;/> parameters&lt;/param>
    private void OnImageTapped(object sender, Syncfusion.XForms.Chat.ImageTappedEventArgs e)
    {
        var imageMessage = e.Message;
        // Do desired actions like displaying the image in full screen.
    }
}

}

MessageDoubleTapped

Occurs when a message is double tapped in SfChat control.

Declaration

public event EventHandler<MessageDoubleTappedEventArgs> MessageDoubleTapped

Event Type

Type
System.EventHandler<MessageDoubleTappedEventArgs>

Examples

namespace GettingStarted
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void SfChat_MessageDoubleTapped (object sender, Syncfusion.XForms.Chat.MessageDoubleTappedEventArgs e)
        {
            App.Current.MainPage.DisplayAlert("Message", " DoubleTapped on messages :" + e.Message.Author.Name, "Ok");
        }
    }
}

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<ContentPage.Content>
    <StackLayout>
        <sfChat:SfChat x:Name="sfChat"      
                       Messages="{Binding Messages}"
                       CurrentUser="{Binding CurrentUser}"
                       MessageDoubleTapped ="SfChat_MessageDoubleTapped "     
                       ShowOutgoingMessageAvatar="True" />
    </StackLayout>
</ContentPage.Content>

MessageLongPressed

Occurs when a message is long pressed/held in SfChat control.

Declaration

public event EventHandler<MessageLongPressedEventArgs> MessageLongPressed

Event Type

Type
System.EventHandler<MessageLongPressedEventArgs>

Examples

namespace GettingStarted
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void SfChat_MessageLongPressed (object sender, MessageLongPressedEventArgs e)
        {
            App.Current.MainPage.DisplayAlert("Message", " LongPressed on messages :" + e.Message.Author.Name, "Ok");
        }
    }
}

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<ContentPage.Content>
    <StackLayout>
        <sfChat:SfChat x:Name="sfChat"      
                       Messages="{Binding Messages}"
                       CurrentUser="{Binding CurrentUser}"
                       MessageLongPressed ="SfChat_MessageLongPressed"     
                       ShowOutgoingMessageAvatar="True" />
    </StackLayout>
</ContentPage.Content>

MessageTapped

Occurs when a message is tapped in SfChat control.

Declaration

public event EventHandler<MessageTappedEventArgs> MessageTapped

Event Type

Type
System.EventHandler<MessageTappedEventArgs>

Examples

namespace GettingStarted
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void SfChat_MessageTapped (object sender, Syncfusion.XForms.Chat.MessageTappedEventArgs e)
        {
            App.Current.MainPage.DisplayAlert("Message", " Tapped on message :" + e.Message.Author.Name, "Ok");
        }
    }
}

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<ContentPage.Content>
    <StackLayout>
        <sfChat:SfChat x:Name="sfChat"      
                       Messages="{Binding Messages}"
                       CurrentUser="{Binding CurrentUser}"
                       MessageTapped ="SfChat_MessageTapped "     
                       ShowOutgoingMessageAvatar="True" />
    </StackLayout>
</ContentPage.Content>

Scrolled

Occurs when the SfChat control is scrolled.

Declaration

public event EventHandler<ChatScrolledEventArgs> Scrolled

Event Type

Type
System.EventHandler<ChatScrolledEventArgs>

Examples

The following code example demonstrates to set the CanAutoScrollToBottom as IsReachedBottom value.

using Syncfusion.XForms.Chat;
using Xamarin.Forms;
namespace GettingStarted
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
ViewModel viewModel = new ViewModel();
SfChat sfChat = new SfChat();
sfChat.Messages = viewModel.Messages;
sfChat.CurrentUser = viewModel.CurrentUser;
sfChat.ShowOutgoingMessageAvatar = true;
sfChat.Scrolled += SfChat_Scrolled;
}
private void SfChat_Scrolled(object sender, ChatScrolledEventArgs e)
{
// Auto scrolls to the newly added messages only when scrolling has reached bottom.
this.sfChat.CanAutoScrollToBottom = e.IsReachedBottom;
}
}
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sfChat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">

    <ContentPage.BindingContext>
        <local:ViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <StackLayout>
            <sfChat:SfChat x:Name="sfChat"      
                           Scrolled="SfChat_Scrolled"
                           Messages="{Binding Messages}"
                           CurrentUser="{Binding CurrentUser}"
                           ShowOutgoingMessageAvatar="True" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

SendMessage

Occurs when the a message is being sent.

Declaration

public event EventHandler<SendMessageEventArgs> SendMessage

Event Type

Type
System.EventHandler<SendMessageEventArgs>

Examples

The following code example demonstrates to create instant response message in SfChat control.

using Syncfusion.XForms.Chat;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
    public SfChatDemo()
    {
        sfChat = new SfChat();

        this.sfChat.SendMessage += SfChatSendMessage;
        this.Content = sfChat;
    }

    /// &lt;summary>
    /// Raised when the a message is being sent.
    /// &lt;/summary>
    /// &lt;param name=&quot;sender&quot;>&lt;see cref=&quot;SfChat&quot;/> instance&lt;/param>
    /// &lt;param name=&quot;e&quot;>&lt;see cref=&quot;SendMessageEventArgs&quot;/> parameters&lt;/param>
    private void SfChatSendMessage(object sender, SendMessageEventArgs e)
    {
        if (e.Message.Text == &quot;HI&quot;)
        {
            // Handling the message from editor, won&apos;t add it to the chat control.
            e.Handled = true;

            //Message created from the editor is added to the chat control. 
            sfChat.Messages.Add(e.Message);

            //Creating and adding response message to the chat control.
            var message = new TextMessage();
            message.Text = &quot;Hello&quot; + e.Message.Author.Name;
            sfChat.Messages.Add(message);
        }
    }
}

}

SuggestionItemSelected

Occurs when the user selects an item in the suggestion list.

Declaration

public event EventHandler<SuggestionItemSelectedEventArgs> SuggestionItemSelected

Event Type

Type
System.EventHandler<SuggestionItemSelectedEventArgs>

Examples

The following code example demonstrates to create auto response message based on the selected suggestion.

using Syncfusion.SfCalendar.XForms;
using Syncfusion.XForms.Chat;
using System;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ChatDemo
{
public class SfChatDemo : ContentPage
{
SfChat sfChat;
    public SfChatDemo()
    {
        sfChat = new SfChat();

        ChatSuggestions suggestions = new ChatSuggestions();
        ObservableCollection&lt;ISuggestion> items = new ObservableCollection&lt;ISuggestion>();
        items.Add(new Suggestion() { Text = &quot;Audi&quot; });
        items.Add(new Suggestion() { Text = &quot;BMW X5&quot; });
        suggestions.Items = items;
        suggestions.ItemSpacing = 15;
        suggestions.Orientation = SuggestionsOrientation.Horizontal;
        sfChat.Suggestions = suggestions;

        this.sfChat.SuggestionItemSelected += SfchatSuggestionItemSelected;
        this.Content = sfChat;
    }

    /// &lt;summary>
    /// Raised when the user selects an item in the suggestion list.
    /// &lt;/summary>
    /// &lt;param name=&quot;sender&quot;>&lt;see cref=&quot;SfChat&quot;/> instance&lt;/param>
    /// &lt;param name=&quot;e&quot;>&lt;see cref=&quot;SuggestionItemSelectedEventArgs&quot;/> parameters&lt;/param>
    private void SfchatSuggestionItemSelected(object sender, SuggestionItemSelectedEventArgs e)
    {
        if ((e.SelectedItem as ISuggestion).Text == &quot;BMW X5&quot;)
        {
            e.HideAfterSelection = true;

            //Customer will select date from calendar to test drive.
            CalendarMessage message = new CalendarMessage();
            message.Text = &quot;Please select date to test drive your favorite car BMW X5&quot;;
            message.SelectedDate = DateTime.Now;

            message.DisplayMode = ViewMode.MonthView;
            message.Author = author;
            sfChat.Messages.Add(message);
        }
    }
}

}

SwipeEnded

Occurs when the swipe action is completed for a message.

Declaration

public event EventHandler<MessageSwipeEndedEventArgs> SwipeEnded

Event Type

Type
System.EventHandler<MessageSwipeEndedEventArgs>

Examples

namespace GettingStarted
{
    SfChat sfChat;
    ViewModel viewModel;
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            sfChat = new SfChat();
            viewModel = new ViewModel();
            sfChat.Messages = viewModel.Messages;
            sfChat.CurrentUser = viewModel.CurrentUser;
            sfChat.SwipeEnded += SfChat_SwipeEnded;
            sfChat.MaxSwipeOffset = 130;
            sfChat.AllowSwiping = true;
            sfChat.RightSwipeTemplate = new DataTemplate(() =>
            {
            var grid = new Grid()
            {
                BackgroundColor = Color.Green,
                HorizontalOptions = LayoutOptions.Fill,
                VerticalOptions = LayoutOptions.Fill,
            };
            return grid;
            }); 
            this.Content = sfChat;
        }

        private void sfChat_SwipeEnded(object sender, MessageSwipeEndedEventArgs e)
        {
            if (e.MaxSwipeOffset > 100)
            {
                sfChat.ResetSwipeOffset();
            }
        }
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">

    <ContentPage.BindingContext>
        <local:GettingStartedViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <sfchat:SfChat x:Name="sfChat"                
                       Messages="{Binding Messages}"     
                       CurrentUser="{Binding CurrentUser}"
                       SwipeEnded="sfChat_SwipeEnded"
                       MaxSwipeOffset="130"
                       AllowSwiping="True">                      
           <sfchat:SfChat.RightSwipeTemplate>
               <DataTemplate>
                   <Grid BackgroundColor = "Green"
                         HorizontalOptions="Fill"
                         VerticalOptions="Fill">
                   </Grid>
               </DataTemplate>
           </sfchat:SfChat.RightSwipeTemplate>
        </sfchat:SfChat>
    </ContentPage.Content>
</ContentPage>

SwipeStarted

Occurs when the user starts to swipe a message.

Declaration

public event EventHandler<MessageSwipeStartedEventArgs> SwipeStarted

Event Type

Type
System.EventHandler<MessageSwipeStartedEventArgs>

Examples

namespace GettingStarted
{
    SfChat sfChat;
    ViewModel viewModel;
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            sfChat = new SfChat();
            viewModel = new ViewModel();
            sfChat.Messages = viewModel.Messages;
            sfChat.CurrentUser = viewModel.CurrentUser;
            sfChat.SwipeStarted += SfChat_SwipeStarted;
            sfChat.MaxSwipeOffset = 130;
            sfChat.AllowSwiping = true;
            sfChat.RightSwipeTemplate = new DataTemplate(() =>
            {
            var grid = new Grid()
            {
                BackgroundColor = Color.Green,
                HorizontalOptions = LayoutOptions.Fill,
                VerticalOptions = LayoutOptions.Fill,
            };
            return grid;
            }); 
            this.Content = sfChat;
        }

        private void sfChat_SwipeStarted(object sender, MessageSwipeStartedEventArgs e)
        {
            var index = sfChat.Messages.IndexOf(e.Message);
            if (index == 1)
            {
                e.Cancel = true;
            }
        }
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">

    <ContentPage.BindingContext>
        <local:GettingStartedViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <sfchat:SfChat x:Name="sfChat"                
                       Messages="{Binding Messages}"     
                       CurrentUser="{Binding CurrentUser}"
                       SwipeStarted="sfChat_SwipeStarted"
                       MaxSwipeOffset="130"
                       AllowSwiping="True">                      
           <sfchat:SfChat.RightSwipeTemplate>
               <DataTemplate>
                   <Grid BackgroundColor = "Green"
                         HorizontalOptions="Fill"
                         VerticalOptions="Fill">
                   </Grid>
               </DataTemplate>
           </sfchat:SfChat.RightSwipeTemplate>
        </sfchat:SfChat>
    </ContentPage.Content>
</ContentPage>

Swiping

Occurs when a message is currently being swiped.

Declaration

public event EventHandler<MessageSwipingEventArgs> Swiping

Event Type

Type
System.EventHandler<MessageSwipingEventArgs>

Examples

namespace GettingStarted
{
    SfChat sfChat;
    ViewModel viewModel;
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            sfChat = new SfChat();
            viewModel = new ViewModel();
            sfChat.Messages = viewModel.Messages;
            sfChat.CurrentUser = viewModel.CurrentUser;
            sfChat.Swiping += SfChat_Swiping;
            sfChat.MaxSwipeOffset = 130;
            sfChat.AllowSwiping = true;
            sfChat.RightSwipeTemplate = new DataTemplate(() =>
            {
            var grid = new Grid()
            {
                BackgroundColor = Color.Green,
                HorizontalOptions = LayoutOptions.Fill,
                VerticalOptions = LayoutOptions.Fill,
            };
            return grid;
            }); 
            this.Content = sfChat;
        }

        private void sfChat_Swiping(object sender, MessageSwipingEventArgs e)
        {
            var index = sfChat.Messages.IndexOf(e.Message);
            if (index == 1 && e.MaxSwipeOffset > 70)
            {
                e.Handled = true;
            }
        }
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">

    <ContentPage.BindingContext>
        <local:GettingStartedViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <sfchat:SfChat x:Name="sfChat"                
                       Messages="{Binding Messages}"     
                       CurrentUser="{Binding CurrentUser}"
                       Swiping="sfChat_Swiping"
                       MaxSwipeOffset="130"
                       AllowSwiping="True">                      
           <sfchat:SfChat.RightSwipeTemplate>
               <DataTemplate>
                   <Grid BackgroundColor = "Green"
                         HorizontalOptions="Fill"
                         VerticalOptions="Fill">
                   </Grid>
               </DataTemplate>
           </sfchat:SfChat.RightSwipeTemplate>
        </sfchat:SfChat>
    </ContentPage.Content>
</ContentPage>

Implements

System.IDisposable