CODEWITHSUNDEEP
imagebuttonxamarin.forms
Phil O
Phil O

Reputation: 1668

Xamarin Forms Clickable Images

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.

Upvotes: 3

Views: 8242

Answers (3)

Ahmed Abuelnour
Ahmed Abuelnour

Reputation: 472

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>

Upvotes: 1

Mariano Peinador
Mariano Peinador

Reputation: 630

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}" />

Upvotes: 7

Daniel Luberda
Daniel Luberda

Reputation: 7454

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.

Upvotes: 2

Related Questions