Today, we will learn how to create an Image Button in Xamarin Forms. Most of you will think, why? Isn’t there an Image property of Buttons? Yes, there is an Image property in Button but that doesn’t meet the needs completely since it adds the image as an icon to the text in the button. So to solve this problem, I came up with this tweak.
- Visual Studio 2012 or higher/Xamarin Studio 5
- Xamarin Forms 1 or higher
1. To create a new application in Visual Studio we will select New Project from the Welcome screen.
2. Select Mobile Apps from the installed templates of Visual Studio under C#. Now as you can see we have two options for a Blank App, one is Xamarin.Forms Portable and Xamarin.Forms Shared. We will be working on Xamarin.Forms Portable.
3. Now you can see that the solution file contains the 4 projects XamarinSample (Portable), XamarinSample.Android, XamarinSample.iOS and XamarinSample.WinPhone. We will now right-click on the first project, XamarinSample (Portable) and click on Add -> New Item from the context menu.
4. Now we will select Forms XAML Page from the dialog and name it.
The App.cs will look like this:
6. Now go back to the Forms XAML Page we created in Step 4, in other words the MainPage that we called in the constructor. And replace the Label tags with:
<Image x:Name=“img” Source=“image.jpg”
The MainPage.xaml will now look like this:
7. Now we will write the Tap Gesture Recognizers code in MainPage.xaml.cs as in the following:
var tapImage = new TapGestureRecognizer();
tapImage.Tapped += tapImage_Tapped;
//Associating tap events to the image buttons
void tapImage_Tapped(object sender, EventArgs e)
// handle the tap
DisplayAlert(“Alert”, “This is an image button”, “OK”);
The MainPage.xaml.cs will now look like this:
Android: Add the file in ImageButtonRecipe.Droid -> Resources -> drawable folder.
iOS: Add the file in ImageButtonRecipe.iOS -> Resources.
WinPhone: Add the file in ImageButtonRecipe.WinPhone.
9. Now the Image Button will look like this across all the devices:
10. On clicking these buttons it will display a pop-up message.