Inline input tags in Xamarin Forms Editor

Question

Hi!

I am trying to display user tags in an editor at the same time the user is editing the input text. Is there any way to have inline tags in an editor field? I already have a custom editor, but it only changes the color of the cursor basically. I am new to Xamarin as well, so I am not entirely comfortable with creating custom renderers.

The editor has a data binding to a string CommentText in the viewmodel.

When the user taps on the person they want to tag I get a string value like this: string tagContent = "@PersonName&Id", which I then use to change CommentText with this method:

public static string BuildStringWithTagContent(string tagContent, string originalText)
        {
            string[] splitText = originalText.Split(' ');
            for (int i = 0; i < splitText.Length; i++)
            {
                if (splitText[i].Contains("@"))
                {
                    splitText[i] = tagContent;
                }
            }
            return string.Join(" ", splitText);
        }

But instead of this format I would like to display a tag or even just the user's full name. I tried a converter to convert to the full name, but that changes the CommentText as well which is problematic because I need to tagContent value to send to the backend.

I could save the tags and then puzzle in them somehow to the CommentText, but that does feel like a solution with many shortcomings.

Any ideas how to show some inline tags instead?

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

If I understand you correctly, do you want to achieve the following graphic effect?

Then you can use Custom Renderers to achieve this function.

Please refer to the following code:

1.create a TagEntry in forms

public class TagEntry : Entry  
{  
}  

2.In Android platform,create class TagEntryRenderer:

   [assembly: ExportRenderer(typeof(TagEntry), typeof(TagEntryRenderer))]  

namespace YourNameSpace.Droid  
{  
    public class TagEntryRenderer : EntryRenderer  
    {  
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)  
        {  
            base.OnElementChanged(e);  

            if (e.NewElement != null)  
                Control.AfterTextChanged += Control_AfterTextChanged;  

            if (e.OldElement != null)  
                Control.AfterTextChanged -= Control_AfterTextChanged;  
        }  

        private void Control_AfterTextChanged(object sender, AfterTextChangedEventArgs e)  
        {  
            //detect if '@' is entered.  
            if (e.Editable.LastOrDefault() == '@')  
            {  
                //show a popup list for selection.  
                //I here use a simple menu for testing, you should be able to change it to your list popup.  
                PopupMenu popup = new PopupMenu(Xamarin.Forms.Forms.Context, Control);  
                popup.MenuInflater.Inflate(Resource.Menu.testmenu, popup.Menu);  
                popup.Show();  
                popup.MenuItemClick += (ss, ee) =>  
                {  
                    var item = ee.Item.TitleFormatted;  
                    e.Editable.Delete(e.Editable.Length() - 1, e.Editable.Length());  
                    SpannableString spannable = new SpannableString("@" + item);  
                    spannable.SetSpan(new ForegroundColorSpan(Android.Graphics.Color.Blue), 0, item.Length() + 1, SpanTypes.ExclusiveExclusive);  
                    e.Editable.Append(spannable);  
                    popup.Dismiss();  
                };  
            }  
        }  
    }  
}  

Best Regards,

Jessie Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.