Chat editor only

Question

Hi,I really like your chat control however I was wondering if is possible to use just the Editor part of it or if you have a control that is just the editor.The one provided by Microsoft whey typing and wrapping the line the text does not show till you type 10-15 words,whilst yours works as expected, in fact in the essential ui kit in the chat conversation page if keep typing 2-3 line the text is hidden and suffers from the same problem! You  must have done some rendering work in the chat control that makes it work as it should..thanks

Sivaraman Sivagurunathan · Accepted Answer

Hi mobileguy, 

Thanks for using Syncfusion controls. 

We have checked your query. you cannot use the Editor part, out of the chat. We have use the Xamarin.Forms editor and for Customization, we have write the renderer for the editor. We have create editor and  customize the editor using the renderer Xamarin.Forms.Android.  please refer the below and attached sample. 





//XForms 
public class CustomEditor : Editor 
{ 
 
    public static readonly BindableProperty AllowMultilineInputProperty = 
            BindableProperty.Create(nameof(AllowMultilineInput), typeof(bool), typeof(CustomEditor), true, BindingMode.TwoWay, null, null); 
 
    public bool AllowMultilineInput 
    { 
        get { return (bool)GetValue(AllowMultilineInputProperty); } 
        set { this.SetValue(AllowMultilineInputProperty, value); } 
    } 
 
    public CustomEditor() 
    { 
 
    } 
} 

public class CustomEditorRenderer : EditorRenderer 
{ 
    public CustomEditorRenderer(Context context) : base(context) 
    { 
    } 
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Editor> e) 
    { 
        base.OnElementChanged(e); 
 
        if (this.Control != null) 
        { 
               
            this.Control.SetPadding(0, 0, 0, (int)(this.Control.PaddingBottom + (2 * Resources.DisplayMetrics.Density))); 
            this.Control.TextSize = 14; 
            this.Control.SetBackgroundColor(NativeAndroid.Graphics.Color.Transparent); 
            if (!(this.Element as CustomEditor).AllowMultilineInput) 
            { 
                this.EditText.ImeOptions = ImeAction.Send; 
                this.EditText.SetSingleLine(true); 
                this.Control.EditorAction += Control_EditorAction;  
            } 
            else 
            { 
                this.EditText.ImeOptions = ImeAction.ImeNull; 
                this.EditText.SetSingleLine(false); 
                this.Control.SetMaxLines(6); 
                this.Control.EditorAction -= Control_EditorAction; 
            } 
        } 
    } 
 
    private void Control_EditorAction(object sender, TextView.EditorActionEventArgs e) 
    { 
        this.Element.Unfocus(); 
    } 
} 


Sample Link: https://www.syncfusion.com/downloads/support/forum/155966/ze/Chat_Getting_started_(3)1697485827 

Regards, 
Sivaraman S

mobileguy · Answer

Hi there thanks for your reply. The problem is iOS, not android.in iOS when wrapping it does not scroll vertically. Try to type 4-5 lines without pressing enter and see the behaviour.if there was a way to to detect in iOS when wrapping add "
" that would work... scrolling on works when you press enter.thanks again for your prompt reply

Sivaraman Sivagurunathan · Answer

Hi mobileguy, 

Thanks for your Update. 

We have checked your query. You can achieve your requirement by write the custom renderer in Xamarin.Forms.iOS. please refer the following code changes. we have prepared the sample for your requirement and for you reference you can download the same from the below link.  






public class CustomEditorRenderer : EditorRenderer 
{ 
    private bool doneButtonPressed = false; 
 
    private UIBarButtonItem doneButton; 
 
    protected override void OnElementChanged(ElementChangedEventArgs<Editor> e) 
    { 
        base.OnElementChanged(e); 
        this.Control.TranslatesAutoresizingMaskIntoConstraints = true; 
        if (this.Element != null) 
        { 
            if (!(this.Element as CustomEditor).AllowMultilineInput) 
            { 
                this.Control.ReturnKeyType = UIReturnKeyType.Send; 
                this.Control.ShouldChangeText = delegate (UITextView textView, Foundation.NSRange range, string text) 
                { 
                    if (text == "
") 
                    { 
                        this.Element.Unfocus(); 
                        return false; 
                    } 
                    else 
                    { 
                        return true; 
                    } 
                }; 
            } 
            else 
            { 
                this.Control.ReturnKeyType = UIReturnKeyType.Default; 
            } 
        } 
    } 
 
    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) 
    { 
        base.OnElementPropertyChanged(sender, e); 
        if (e?.PropertyName == "Text") 
        { 
            var lineCount = this.Control.ContentSize.Height / this.Control.Font.LineHeight; 
            if (this.Element != null) 
            { 
                if (!(this.Element as CustomEditor).AllowMultilineInput) 
                { 
                    this.Control.ScrollEnabled = false; 
                    this.TextView.TextContainer.MaximumNumberOfLines = 1; 
                    this.Element.AutoSize = EditorAutoSizeOption.Disabled; 
                } 
                else if (lineCount > 6) 
                { 
                    this.Control.ScrollEnabled = true; 
                    this.Element.AutoSize = EditorAutoSizeOption.Disabled; 
                } 
                else 
                { 
                    this.Control.ScrollEnabled = false; 
                    this.Element.AutoSize = EditorAutoSizeOption.TextChanges; 
                } 
            } 
        } 
    } 
} 


Sample Link: https://www.syncfusion.com/downloads/support/forum/155966/ze/Chat_Getting_started-956646597 

Regards, 
Sivaraman S

mobileguy · Answer

Hi thank you so much for providing me with the sample.This is fantastic support. I cannot fully use the chat control in one of the screen because I only need the editor and what you provided as example is great.

I have attached a sample, but I have noticed that when you type and it wraps the text goes over the the frame if you like and I think is to do with image.

Any suggestion greatly appreciated.

thanks again for your support.

Attachment: GettingStarted_b5aec8b8.zip

Sivaraman Sivagurunathan · Answer

Hi mobileguy, 

Thanks for your update.Since we are not able to get the exact requirement that you needed. Can you please let us know your exact requirements clearly. if possible provide the video reference. So that we will provide a better solution. 
Regards,Sivaraman S

mobileguy · Answer

I am happy to close this one. you have been a fantastic help.. thank you!!

Sivaraman Sivagurunathan · Answer

Hi mobileguy, 

We are happy to hear from you. Please get in touch with us if you would require any further assistance. 

Regards, 
Sivaraman S