Forum Xamarin Xamarin.Forms

How to add a TapGestureRecognizer on a custom control (:Label) on a single XAML line?

RetroactionRetroaction Member ✭✭

Hi, instead of using a Label with a TappedGesture like this:

                <Label x:Name="filter" Text="BlaBlaBla">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnFilterClicked" />
                    </Label.GestureRecognizers>
                </Label>

I would like to create a custom control based on a Label. But I want to pass the handler OnFilterClicked to this new control like this:

<shared:IconControl x:Name="filter" Text="BlaBlaBla" Tapped="OnFilterClicked">

I am not able to figure out what I should add to my custom control (IconControl) to be able to pass the "OnFilterClicked" and to add the TapGestureRecognizer in the code behind.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<Label xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="RetroactionApp.Views.Shared.IconControl"
        FontFamily="{StaticResource IconFont}"
        BackgroundColor="Transparent"
        TextColor="LightGray"
        FontSize="20"
        Margin="5,0">
</Label>

CS

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace RetroactionApp.Views.Shared
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class IconControl : Label
    {
        public IconControl()
        {
            InitializeComponent();
        }
    }
}

Thanks in advance,

Michel

Best Answer

Answers

  • JoeMankeJoeManke USMember ✭✭✭✭✭
    edited May 20
    public partial class IconControl : Label
    {
        public event EventHandler Tapped;
    }
    

    This part might need some testing but I think you can then just directly register your Tapped event as a handler to the TapGestureRecognizer's Tapped event in your code-behind.

    public IconControl()
    {
        InitializeComponent();
    
        var tap = new TapGestureRecognizer();
        tap.Tapped += this.Tapped;
        this.GestureRecognizers.Add(tap);
    }
    
    
  • RetroactionRetroaction Member ✭✭

    Hi JoeManke,

    It is not working because this.Tapped is null.

    tap.Tapped += this.Tapped;

  • DavidHollowellDavidHollowell USMember ✭✭
    edited May 20

    Hi Retroaction,
    I created IconControl.cs and added this class.
    public class IconControl : Label { public TapGestureRecognizer _tapped; public event EventHandler Tapped; public IconControl(): base() { _tapped = new TapGestureRecognizer(); _tapped.Tapped += _tapped_Tapped; this.GestureRecognizers.Add(_tapped); } private void _tapped_Tapped(object sender, EventArgs e) { Tapped?.Invoke(sender, e); } }

    In MainPage.xaml:

    <app3:IconControl Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Tapped="IconControl_Tapped" />

    In MainPage.xaml.cs
    private void IconControl_Tapped(object sender, EventArgs e) { Debug.WriteLine("hello world"); }

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • RetroactionRetroaction Member ✭✭

    Thank you DavidHollowell. It is working fine! I just had to add InitializeComponent() in the IconControl constructor because all the properties were not used (FontSize, FontFamily, etc).

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.
    `
    public class IconControl : Label

    {
    public TapGestureRecognizer _tapped;

    public event EventHandler Tapped;  
    
    public IconControl(): base()  
    
    {  
    
        _tapped = new TapGestureRecognizer();  
    
        _tapped.Tapped += _tapped_Tapped;  
    
        this.GestureRecognizers.Add(_tapped);  
    
    }  
    
    private void _tapped_Tapped(object sender, EventArgs e)  
    
    {  
    
        Tapped?.Invoke(sender, e);  
    
    }  
    

    }`

    In MainPage.xaml:

    `<app3:IconControl Text="Welcome to Xamarin.Forms!"

       HorizontalOptions="Center"  
    
       VerticalOptions="CenterAndExpand"  
    
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs
    `private void IconControl_Tapped(object sender, EventArgs e)

    {  
    
        Debug.WriteLine("hello world");  
    
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.
    `public class IconControl : Label

    {

    public TapGestureRecognizer _tapped;  
    public event EventHandler Tapped;  
    public IconControl(): base()  
    {  
        _tapped = new TapGestureRecognizer();  
        _tapped.Tapped += _tapped_Tapped;  
        this.GestureRecognizers.Add(_tapped);  
    }  
    private void _tapped_Tapped(object sender, EventArgs e)  
    {  
        Tapped?.Invoke(sender, e);  
    }  
    

    }`

    In MainPage.xaml:

    <app3:IconControl Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Tapped="IconControl_Tapped" />

    In MainPage.xaml.cs
    private void IconControl_Tapped(object sender, EventArgs e) { Debug.WriteLine("hello world"); }

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.
    `public class IconControl : Label

    {

    public TapGestureRecognizer _tapped;  
    public event EventHandler Tapped;  
    public IconControl(): base()  
    {  
        _tapped = new TapGestureRecognizer();  
        _tapped.Tapped += _tapped_Tapped;  
        this.GestureRecognizers.Add(_tapped);  
    }  
    private void _tapped_Tapped(object sender, EventArgs e)  
    {  
        Tapped?.Invoke(sender, e);  
    }  
    

    }`

    In MainPage.xaml:

    <app3:IconControl Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Tapped="IconControl_Tapped" />

    In MainPage.xaml.cs
    private void IconControl_Tapped(object sender, EventArgs e) { Debug.WriteLine("hello world"); }

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `    
    public class IconControl : Label  
    
    {  
    public TapGestureRecognizer _tapped;  
    
    public event EventHandler Tapped;  
    
    public IconControl(): base()  
    
    {  
    
        _tapped = new TapGestureRecognizer();  
    
        _tapped.Tapped += _tapped_Tapped;  
    
        this.GestureRecognizers.Add(_tapped);  
    
    }  
    
    private void _tapped_Tapped(object sender, EventArgs e)  
    
    {  
    
        Tapped?.Invoke(sender, e);  
    
    }  
    
    }
    

    `

    In MainPage.xaml:

    `    
    <app3:IconControl Text="Welcome to Xamarin.Forms!"
    
       HorizontalOptions="Center"  
    
       VerticalOptions="CenterAndExpand"  
    
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `    
    private void IconControl_Tapped(object sender, EventArgs e)  
    
    {  
    
        Debug.WriteLine("hello world");  
    
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `    
    public class IconControl : Label  
    
    {  
    public TapGestureRecognizer _tapped;  
    
    public event EventHandler Tapped;  
    
    public IconControl(): base()  
    
    {  
    
        _tapped = new TapGestureRecognizer();  
    
        _tapped.Tapped += _tapped_Tapped;  
    
        this.GestureRecognizers.Add(_tapped);  
    
    }  
    
    private void _tapped_Tapped(object sender, EventArgs e)  
    
    {  
    
        Tapped?.Invoke(sender, e);  
    
    }  
    
    }
    

    `

    In MainPage.xaml:

    `    
    <app3:IconControl Text="Welcome to Xamarin.Forms!"
    
       HorizontalOptions="Center"  
    
       VerticalOptions="CenterAndExpand"  
    
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `    
    private void IconControl_Tapped(object sender, EventArgs e)  
    
    {  
    
        Debug.WriteLine("hello world");  
    
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `    
    public class IconControl : Label  
    
    {  
    public TapGestureRecognizer _tapped;  
    
    public event EventHandler Tapped;  
    
    public IconControl(): base()  
    
    {  
    
        _tapped = new TapGestureRecognizer();  
    
        _tapped.Tapped += _tapped_Tapped;  
    
        this.GestureRecognizers.Add(_tapped);  
    
    }  
    
    private void _tapped_Tapped(object sender, EventArgs e)  
    
    {  
    
        Tapped?.Invoke(sender, e);  
    
    }  
    
    }
    

    `

    In MainPage.xaml:

    `    
    <app3:IconControl Text="Welcome to Xamarin.Forms!"
    
       HorizontalOptions="Center"  
    
       VerticalOptions="CenterAndExpand"  
    
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `    
    private void IconControl_Tapped(object sender, EventArgs e)  
    
    {  
    
        Debug.WriteLine("hello world");  
    
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `    
    public class IconControl : Label  
    {  
    public TapGestureRecognizer _tapped;  
    
    public event EventHandler Tapped;  
    
    public IconControl(): base()  
    {  
        _tapped = new TapGestureRecognizer();  
        _tapped.Tapped += _tapped_Tapped;  
        this.GestureRecognizers.Add(_tapped); 
    }  
    
    private void _tapped_Tapped(object sender, EventArgs e)  
    {  
        Tapped?.Invoke(sender, e);  
    }  
    }
    

    `

    In MainPage.xaml:

    `    
    <app3:IconControl Text="Welcome to Xamarin.Forms!"
       HorizontalOptions="Center"  
       VerticalOptions="CenterAndExpand"  
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `    
    private void IconControl_Tapped(object sender, EventArgs e)  
    {  
        Debug.WriteLine("hello world");  
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `    
    public class IconControl : Label  
    
    {  
    public TapGestureRecognizer _tapped;  
    
    public event EventHandler Tapped;  
    
    public IconControl(): base()  
    
    {  
    
        _tapped = new TapGestureRecognizer();  
    
        _tapped.Tapped += _tapped_Tapped;  
    
        this.GestureRecognizers.Add(_tapped);  
    
    }  
    
    private void _tapped_Tapped(object sender, EventArgs e)  
    
    {  
    
        Tapped?.Invoke(sender, e);  
    
    }  
    
    }
    

    `

    In MainPage.xaml:

    `    
    <app3:IconControl Text="Welcome to Xamarin.Forms!"
    
       HorizontalOptions="Center"  
    
       VerticalOptions="CenterAndExpand"  
    
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `    
    private void IconControl_Tapped(object sender, EventArgs e)  
    
    {  
    
        Debug.WriteLine("hello world");  
    
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `    
    public class IconControl : Label  
    {  
    public TapGestureRecognizer _tapped;  
    public event EventHandler Tapped;  
    public IconControl(): base()  
    {  
        _tapped = new TapGestureRecognizer();  
        _tapped.Tapped += _tapped_Tapped;  
        this.GestureRecognizers.Add(_tapped);  
    }  
    
    private void _tapped_Tapped(object sender, EventArgs e)  
    {  
        Tapped?.Invoke(sender, e);  
    }  
    }
    

    `

    In MainPage.xaml:

    `    
    <app3:IconControl Text="Welcome to Xamarin.Forms!"
       HorizontalOptions="Center"  
       VerticalOptions="CenterAndExpand"  
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `    
    private void IconControl_Tapped(object sender, EventArgs e)  
    {  
        Debug.WriteLine("hello world");  
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `    
    public class IconControl : Label  
    {  
        public TapGestureRecognizer _tapped;  
    
        public event EventHandler Tapped;  
    
        public IconControl(): base()  
        {  
            _tapped = new TapGestureRecognizer();  
            _tapped.Tapped += _tapped_Tapped;  
            this.GestureRecognizers.Add(_tapped); 
        }  
    
        private void _tapped_Tapped(object sender, EventArgs e)  
        {  
            Tapped?.Invoke(sender, e);  
        }  
        }
    

    `

    In MainPage.xaml:

    `    
    <app3:IconControl Text="Welcome to Xamarin.Forms!"
       HorizontalOptions="Center"  
       VerticalOptions="CenterAndExpand"  
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `    
    private void IconControl_Tapped(object sender, EventArgs e)  
    {  
        Debug.WriteLine("hello world");  
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `    
    public class IconControl : Label  
    {  
        public TapGestureRecognizer _tapped;  
        public event EventHandler Tapped;  
    
        public IconControl(): base()  
        {  
            _tapped = new TapGestureRecognizer();  
            _tapped.Tapped += _tapped_Tapped;  
            this.GestureRecognizers.Add(_tapped); 
        }  
    
        private void _tapped_Tapped(object sender, EventArgs e)  
        {  
            Tapped?.Invoke(sender, e);  
        }  
    }
    

    `

    In MainPage.xaml:

    `    
    <app3:IconControl Text="Welcome to Xamarin.Forms!"
       HorizontalOptions="Center"  
       VerticalOptions="CenterAndExpand"  
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `    
    private void IconControl_Tapped(object sender, EventArgs e)  
    {  
        Debug.WriteLine("hello world");  
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `    
    public class IconControl : Label  
    {  
        public TapGestureRecognizer _tapped;  
        public event EventHandler Tapped;  
    
        public IconControl(): base()  
        {  
            _tapped = new TapGestureRecognizer();  
            _tapped.Tapped += _tapped_Tapped;  
            this.GestureRecognizers.Add(_tapped); 
        }  
    
        private void _tapped_Tapped(object sender, EventArgs e)  
        {  
            Tapped?.Invoke(sender, e);  
        }  
    }
    `
    

    In MainPage.xaml:

    `    
    <app3:IconControl Text="Welcome to Xamarin.Forms!"
       HorizontalOptions="Center"  
       VerticalOptions="CenterAndExpand"  
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `    
    private void IconControl_Tapped(object sender, EventArgs e)  
    {  
        Debug.WriteLine("hello world");  
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `    
    public class IconControl : Label  
    {  
        public TapGestureRecognizer _tapped;  
        public event EventHandler Tapped;  
    
        public IconControl(): base()  
        {  
            _tapped = new TapGestureRecognizer();  
            _tapped.Tapped += _tapped_Tapped;  
            this.GestureRecognizers.Add(_tapped); 
        }  
    
        private void _tapped_Tapped(object sender, EventArgs e)  
        {  
            Tapped?.Invoke(sender, e);  
        }  
    }
    

    `

    In MainPage.xaml:

    `    
    <app3:IconControl Text="Welcome to Xamarin.Forms!"
       HorizontalOptions="Center"  
       VerticalOptions="CenterAndExpand"  
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `    
    private void IconControl_Tapped(object sender, EventArgs e)  
    {  
        Debug.WriteLine("hello world");  
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `    
    public class IconControl : Label  
    {  
        public TapGestureRecognizer _tapped;  
        public event EventHandler Tapped;  
    
        public IconControl(): base()  
        {  
            _tapped = new TapGestureRecognizer();  
            _tapped.Tapped += _tapped_Tapped;  
            this.GestureRecognizers.Add(_tapped); 
        }  
    
        private void _tapped_Tapped(object sender, EventArgs e)  
        {  
            Tapped?.Invoke(sender, e);  
        }  
        }
    

    `

    In MainPage.xaml:

    `    
    <app3:IconControl Text="Welcome to Xamarin.Forms!"
       HorizontalOptions="Center"  
       VerticalOptions="CenterAndExpand"  
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `    
    private void IconControl_Tapped(object sender, EventArgs e)  
    {  
        Debug.WriteLine("hello world");  
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `public class IconControl : Label  
    {  
        public TapGestureRecognizer _tapped;  
        public event EventHandler Tapped;  
    
        public IconControl(): base()  
        {  
            _tapped = new TapGestureRecognizer();  
            _tapped.Tapped += _tapped_Tapped;  
            this.GestureRecognizers.Add(_tapped); 
        }  
    
        private void _tapped_Tapped(object sender, EventArgs e)  
        {  
            Tapped?.Invoke(sender, e);  
        }  
    }`
    

    In MainPage.xaml:

    `<app3:IconControl Text="Welcome to Xamarin.Forms!"
       HorizontalOptions="Center"  
       VerticalOptions="CenterAndExpand"  
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `private void IconControl_Tapped(object sender, EventArgs e)  
    {  
        Debug.WriteLine("hello world");  
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `public class IconControl : Label  
    {  
        public TapGestureRecognizer _tapped;  
        public event EventHandler Tapped;  
    
        public IconControl(): base()  
        {  
            _tapped = new TapGestureRecognizer();  
            _tapped.Tapped += _tapped_Tapped;  
            this.GestureRecognizers.Add(_tapped); 
        }  
    
        private void _tapped_Tapped(object sender, EventArgs e)  
        {  
            Tapped?.Invoke(sender, e);  
        }  
    }`
    

    In MainPage.xaml:

    `<app3:IconControl Text="Welcome to Xamarin.Forms!"
       HorizontalOptions="Center"  
       VerticalOptions="CenterAndExpand"  
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `private void IconControl_Tapped(object sender, EventArgs e)  
    {  
        Debug.WriteLine("hello world");  
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • Kwiq_NissKwiq_Niss Member

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `    
    public class IconControl : Label  
    {  
        public TapGestureRecognizer _tapped;  
        public event EventHandler Tapped;  
    
        public IconControl(): base()  
        {  
            _tapped = new TapGestureRecognizer();  
            _tapped.Tapped += _tapped_Tapped;  
            this.GestureRecognizers.Add(_tapped); 
        }  
    
        private void _tapped_Tapped(object sender, EventArgs e)  
        {  
            Tapped?.Invoke(sender, e);  
        }  
    }`
    

    In MainPage.xaml:

    `    
    <app3:IconControl Text="Welcome to Xamarin.Forms!"
       HorizontalOptions="Center"  
       VerticalOptions="CenterAndExpand"  
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `    
    private void IconControl_Tapped(object sender, EventArgs e)  
    {  
        Debug.WriteLine("hello world");  
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

  • DavidHollowellDavidHollowell USMember ✭✭

    Hi Retroaction,
    I created IconControl.cs and added this class.

    `public class IconControl : Label  
    {  
        public TapGestureRecognizer _tapped;  
        public event EventHandler Tapped;  
    
        public IconControl(): base()  
        {  
            _tapped = new TapGestureRecognizer();  
            _tapped.Tapped += _tapped_Tapped;  
            this.GestureRecognizers.Add(_tapped); 
        }  
    
        private void _tapped_Tapped(object sender, EventArgs e)  
        {  
            Tapped?.Invoke(sender, e);  
        }  
    }`
    

    In MainPage.xaml:

    `<app3:IconControl Text="Welcome to Xamarin.Forms!"
       HorizontalOptions="Center"  
       VerticalOptions="CenterAndExpand"  
       Tapped="IconControl_Tapped" />`  
    

    In MainPage.xaml.cs

    `private void IconControl_Tapped(object sender, EventArgs e)  
    {  
        Debug.WriteLine("hello world");  
    }`  
    

    This worked for me. Can you try it in your environment and let us know how it goes by marking this answer as the solution or following up with the results if it fails.

Sign In or Register to comment.