Xamarin.Forms - How do I make a custom view with a clickable image?

Question

I am making an app that has a grid of many images that need to handle click events. I am able to make a single image clickable with this,

        Image clickableImage = new Image();
        clickableImage.Source = ImageSource.FromFile("image.png");

        imageTap.Tapped += (object sender, EventArgs e) =>
        {
            System.Diagnostics.Debug.WriteLine("Image clicked!");
        };

        clickableImage.GestureRecognizers.Add(imageTap);

but I need to have >20 clickable images. Is there a way to create something like an Angular2 template?

score 0 · Accepted Answer · answered Aug 02 '16 at 09:24

0

You can create a Custom Control in your shared project itself which inherits from image and supports click and use it through out your application.

ClickableImage : Image 
{
      public ClickableImage()
      {
           Tapped += (sender, e) => 
           {
                 System.Diagnostics.Debug.WriteLine("Image clicked!");
           };
      }
}

answered Aug 02 '16 at 09:24

Rohit Vipin Mathews

11,629
15
57
112

1

Using http://stackoverflow.com/questions/6866347/lambda-anonymous-function-as-a-parameter, I was able to pass functions as parameters to the Tapped method. – IWillByte Aug 02 '16 at 13:52
If you have improvements, post your own answer which can prove helpful for others too. – Rohit Vipin Mathews Aug 02 '16 at 14:24
There, added my updated code as an answer. Sorry it took so long – IWillByte Aug 08 '16 at 16:01

score 0 · Answer 2 · edited May 23 '17 at 12:14

Thanks to Rohit's answer, I was able to create a custom control that I modified to take an anonymous function as a parameter. Here is the code:

class ClickableImage : Image
{
    private TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer();

    public ClickableImage(Action action)
    {
        tapGestureRecognizer.Tapped += (s, e) => 
        {
           System.Diagnostics.Debug.WriteLine("Image Clicked w/ Lambda");
           action();
        };

        GestureRecognizers.Add(tapGestureRecognizer);
    }
}

Xamarin.Forms - How do I make a custom view with a clickable image?

2 Answers2