question

Dorka-2675 avatar image
0 Votes"
Dorka-2675 asked MohammedSadiq-6412 commented

Inline input tags in Xamarin Forms Editor

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?




dotnet-xamarin
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @Dorka-2675 , do you want to replace @ with some string , right? But what's the parameter originalText in your code ? Can you elaborate on what features you are trying to achieve? And when you change the content of your Editor, the binded field CommentText will certainly change accordingly.

0 Votes 0 ·

Hi @JessieZhang-2116 , Thank you for answering! The originalText is just the current content in the editor in this case the text the user writes which contains the searchstring, like when they type @person and that should change then to the person they choose from the possible users. The feature I would like to implement is an inline tag basically, like on Teams, Facebook, Twitter etc. Something like on the picture, but the tags within the editor text. I assume it is not possible to have this kind of UI, so I thought instead of special formatting I would just display the name of the user, but since then the editor text changes to the name and therefor I loose the tagContent format from within the text, I don't have anything to send to the backend other then a pure text with names. I hope this explained it better what I am trying to do.

58526-image.png


0 Votes 0 ·
image.png (35.7 KiB)

I have posted an answer, you can check it.

0 Votes 0 ·

1 Answer

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered MohammedSadiq-6412 commented

Hello,


Welcome to our Microsoft Q&A platform!


If I understand you correctly, do you want to achieve the following graphic effect?
59094-image.png

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.









image.png (12.0 KiB)
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thank you Jessie! I ended up solving without an inline tag, but this would have been useful. Have a nice day!

0 Votes 0 ·

@JessieZhang-2116 did you find a solution for this and can you share the sample for ios and droid on forms ? much appreciated.

0 Votes 0 ·

have you got full xamarin forms implmentation including ios and andriod

0 Votes 0 ·