inline tagging (xamarin forms)

Question

need help in implmenting inline tagging like when you do with teams, facebook, whatsapp @person and then shows up like below;

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

Please create contenview, then add two Labels in it(Label A is show the binding text, label B is X), then add a BindableProperty and add TapGestureRecognizer for X Label.

Here is ContentView's xaml code.

   <?xml version="1.0" encoding="UTF-8"?>  
   <ContentView xmlns="http://xamarin.com/schemas/2014/forms"   
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
                x:Class="Tags.TagView"  
                HorizontalOptions="Center"  
                BackgroundColor="Green"  Margin="5,0,0,0">  
     <ContentView.Content>  
           <StackLayout Orientation="Horizontal">  
               <Label Margin="5,0,0,0" VerticalOptions="Center" x:Name="tagText"/>  
               <Label Margin="5,0,5,0" VerticalOptions="Center" Text="x">  
                   <Label.GestureRecognizers>  
                       <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>  
                   </Label.GestureRecognizers>  
               </Label>  
         </StackLayout>  
     </ContentView.Content>  
   </ContentView>  

Here is ContentView's xaml background code.

   using Xamarin.Forms;  
   using Xamarin.Forms.Xaml;  
     
   namespace Tags  
   {  
       [XamlCompilation(XamlCompilationOptions.Compile)]  
       public partial class TagView : ContentView  
       {  
     
           public static BindableProperty LabelProperty =  
    BindableProperty.Create(nameof(Label),  
                           typeof(string),  
                           typeof(TagView),  
                           propertyChanged: (b, o, n) => (b as  
   TagView).OnLabelChanged());  
     
           private void OnLabelChanged()  
           {  
               tagText.Text = Label; //label is the x:Name of your Label control in ExpandableView.xaml  
           }  
     
           public string Label  
           {  
               get => (string)GetValue(LabelProperty);  
               set => SetValue(LabelProperty, value);  
           }  
     
           public TagView()  
           {  
               InitializeComponent();  
           }  
     
           private void TapGestureRecognizer_Tapped(object sender, EventArgs e)  
           {  
   //click the X, make text to null and tag disappear.  
               this.IsVisible = false;  
               tagText.Text = null;  
           }  
     
           
       }  
   }  

In the end use it, click X, this tag will disappear.

Best Regards,

Leon Lu

---

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.