How to add a TapGestureRecognizer in code behind for an Image control

coolrjmcoolrjm INMember ✭✭✭

Hi,

I have designed a stacklayout with images as per the code below

var mainLayout = new StackLayout { Spacing = 15, Children = { new Image { Source = "Image1.png", WidthRequest = 25, HeightRequest = 25, }, new Image { Source = "Image2.png", WidthRequest = 25, HeightRequest = 25, }, new Image { Source = "Image3.png", WidthRequest = 25, HeightRequest = 25, }, new Image { Source = "Image4.png", WidthRequest = 25, HeightRequest = 25, }, } };

I want to add a tap gesture recognizer for each image. How can it be done, and also how to identify which image was tapped.

Any suggestions would be grateful.

Is there any way to give an id for each image similar to x:Name="image1" in XAML.

Thanks,

Rajesh.

Best Answers

Answers

  • coolrjmcoolrjm INMember ✭✭✭

    Hi,

    Thanks for the reply. What i was looking for is how to map each image in my code to an TapGestureRecognizer. Whether the event could be written as part of the code that I wrote.

    I finally found out the code had to be modified in the following way

    1. Create each image control and define the TapGestureRecognizer for each image individually.
    2. Make sure that each image has unique names which can be identified.
    3. Finally create the layout with a StackLayout and add the children to it with the images.

    Thanks,

    Rajesh.

  • FrancMoralesFrancMorales JPMember ✭✭

    For convenience, I have created the following extensions...

    static class ControlExtensions
    {
        internal static void AddTap( this Label label, Action action )
        {
            label.GestureRecognizers.Add( new TapGestureRecognizer
            {
                Command = new Command( action ),
            } );
        }
    
        internal static void AddTap( this Image image, Action action )
        {
            image.GestureRecognizers.Add( new TapGestureRecognizer
            {
                Command = new Command( action ),
            } );
        }
    
    
        internal static void AddTap( this View view, Action action )
        {
            view.GestureRecognizers.Add( new TapGestureRecognizer
            {
                Command = new Command( action ),
            } );
        }
    
        internal static void AddTap( this View view, Command command, object commandParameter = null )
        {
            view.GestureRecognizers.Add( new TapGestureRecognizer
            {
                Command = command,
                CommandParameter = commandParameter,
            } );
        }
    }
    

    ...so you can call it like this:

    var img = new Image();
    
    img.AddTap( ( ) => SomeMethod() );
    

    Hope it helps.

  • pnet1pnet1 USMember ✭✭✭✭
    edited January 2018

    @KymPhillpotts.3866, how can i use your code posted? I create some events? Where do i post your code?

    var tapGestureRecognizer = new TapGestureRecognizer();
                tapGestureRecognizer.Tapped += (sender, e) =>
                {
                    // cast to an image
                    Image theImage = (Image)sender;
    
                    // now you have a reference to the image
                };
    

    Thanks.

  • normannorman Member

    How to add a PanGestureRecognizer in code behind for an Image control on Xamarin.Mac?

Sign In or Register to comment.