New on Xamarin Forms 3.4 - ImageButtons

It could be a bit of a pain to try to use Images as buttons, for those scenarios when you needed to display a certain image but also needed the user to be able to click on it, with all that that implies. A nice animation, perhaps change of color, and of course the triggering of an event or the ability to bind a Command. As of Xamarin Forms 3.4, this is no longer a pain, now you can define an ImageButton like you would define any element in the interface, and use it similarly to how you would use an Image, and make it respond to how a Button would.

Getting things ready.

The very first thing that you need to do to be able to use ImageButtons is upload the Xamarin Forms NuGet package that is being referenced inside of very project in your solution. Make sure that version is set to 3.4 or newer:

Once updated you are good to go. You will now be able to head over to any XAML page that you have and start defining your ImageButtons. So let’s learn how to do that.

Defining the ImageButton

Like I said, this is going to be rather easy. Since now you have Xamarin Forms 3.4 or newer, just define an ImageButton like this:

<ImageButton Source="profits.png"
             HeightRequest="100"
             WidthRequest="100"/>

Very easy no? As you can see for the image to the right, you will even be able to see the image directly in the Xamarin Forms Previewer, provided that you have set a valid Source.

Of course, this element will work as any other, you will have the Name property available, be able to set a VisualStateManager, Styles, anything you can imagine.

But what makes this element useful is the fact that it works as a Button. So you will find both the Clicked event and the Command property (along with the CommandParameter property of course) at your disposal inside this new element, which is demonstrated in the GIF (how do you pronounce this btw) above.

So this was quick, what about you, were you in need of this element. It has certainly made some things easier now!