Xamarin Forms Clickable Images

Question

I originally implemented this feature but simply adding an image to a button. Then I realized I could simply add a tap gesture to an image (w/o using a button). Any recommendations which is the best way to go and why? Thanks.

Answer 1

I use my own "OnClick" event for Image :) with a custom control:

    public class MyImage : Xamarin.Forms.Image
{
    public static BindableProperty OnClickProperty =
        BindableProperty.Create("OnClick", typeof(Command), typeof(MyImage));

    public Command OnClick
    {
        get { return (Command)GetValue(OnClickProperty); }
        set { SetValue(OnClickProperty, value); }
    }

    public MyImage()
    {
        GestureRecognizers.Add(new TapGestureRecognizer() {Command = new Command(DisTap)});
    }

    private void DisTap(object sender)
    {
        if (OnClick != null)
        {
            OnClick.Execute(sender);
        }
    }

}

Then use it with MVVM like:

<local:MyImage Source="{Binding Img}" OnClick="{Binding ImgTapCommand}" /> 

Answer 2

It depends of visual effect you want to achieve.

• If you use Button you'll have tapped animation (depens of platform) and specific buttton border. You have much less control how the image will look like (it's on the left side of button text).
• If you use a plain TapGestureRecognizer you'll have a normal image with full control of aspect ratio/size etc.

Answer 3

You could use absolute layout, which can be used to place two elements above each other, make sure to make the button is the second element.

<AbsoluteLayout>
            <Image Source="clock.png" AbsoluteLayout.LayoutBounds="0.2,0.2,35,35" AbsoluteLayout.LayoutFlags="PositionProportional"/>
            <Button AbsoluteLayout.LayoutBounds="0.2,0.2,35,35" AbsoluteLayout.LayoutFlags="PositionProportional" BorderColor="Transparent" BackgroundColor="Transparent" Command="{Binding AlertMeCommand}"/>
</AbsoluteLayout>