ImageButton in .NET MAUI

Previously in Xamarin.Forms, having an image work as a button could be a bit tedious. Maybe you would use a TapGestureRecognizer on your image, or you would wrap your image inside a Button with varying results. Luckily they introduced the ImageButton for Xamarin.Forms, and they’re bringing it over to .NET MAUI. Here’s a simple introduction on how to use it.

Examples

This is an example of how your XAML would look like if you were to use a Clicked-event on your ImageButton:

<ImageButton
    Clicked="OnImageButtonClicked"
    HeightRequest="310"
    HorizontalOptions="Center"
    Source="dotnet_bot.png"
    WidthRequest="250" />

And here’s how it would look if you were to use an MVVM architecture and want to bind it to a Command:

<ImageButton
    Command="{Binding ImageButtonClickCommand}"
    HeightRequest="310"
    HorizontalOptions="Center"
    Source="dotnet_bot.png"
    WidthRequest="250" />

You can also set a border on your ImageButton using BorderWidth and BorderColor. The border is not visible by default. You’re supposed to be able to set CornerRadius as well, but this doesn’t seem to be implemented just yet in MAUI.

Here’s how it looks in action on Android:

And that’s it! Hope this was helpful.