Xamarin.Forms: Image Button Recipe

0

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.

Ingredients:

Procedure:

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.

5. Once the Forms XAML Page is added to the project, open the App.Cs and write the following code in the constructor:

 MainPage = new NavigationPage(new MainPage());  

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” 

VerticalOptions=“CenterAndExpand” 

HorizontalOptions=“CenterAndExpand”></Image>  

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:

//Creating TapGestureRecognizers  

var tapImage = new TapGestureRecognizer();  

//Binding events

tapImage.Tapped += tapImage_Tapped;  

//Associating tap events to the image buttons

img.GestureRecognizers.Add(tapImage);  

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:

8. Now add the “image.jpg” in the all the three projects of the various OSs in the following way:

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.

 This is the simplest way to have an image button in your Xamarin.Forms app across all the devices. Click here for sample project.
Make some beautiful apps using Xamarin.Forms and tweet your queries to @adiiaditya.
Advertisements

Xamarin.Forms served hot with Caffeine

0

For over several years, developers have dreamt of being able to write their applications in a single language and have it run on various mobile platforms. The thought of “Why go for one, when you can have it all?” has always intrigued them.

Finally, one fine day, our developer friends at Xamarin Head Quarters, San Francisco, CA fulfilled this dream with Xamarin.Forms, the dynamic cross-platform software which simplifies mobile development by allowing developers to write once in C# and provide native experience in Android, iOS and Windows Phone using the same API across all platforms.

 Requirements:

Compatible Devices:

  • Android 4.0 or higher
  • iOS 7.0 or higher
  • Windows Phone 8 or higher

Xamarin served hot with caffeine will act as a prologue to your perfect cross platform app development story. While the release of Xamarin 3 brought smiles to the face of developers with the introduction of Xamarin.Forms, we are sure that the updates will bring contentment in developers.

I will now quickly walk you through the steps to make the environment ready for the X-perience.

Installing Xamarin Studio

Step 1. The first step will be downloading the Xamarin unified installer.

Step 2. The second step will be to run the Xamarin Installer.

Xamarin1

Step 3. Once we are done installing Xamarin on both the systems i.e. Windows as well as Mac. We need to activate Xamarin on both the systems.

Xamarin2

Step 4. Once you log in, you can choose if you want to Begin a Trial or Purchase a License. If you Begin a trial and activate Xamarin, you can see how many days of the trial you have left at any point:

Xamarin3

Creating an application

Step 1. To create a new application in Visual Studio we will select New Project from the welcome screen

Step 2. Select Mobile Apps from the installed templates of Visual Studio under C#.

Xamarin4

Step 3. Now as you can see we have two options for Blank App, one is Xamarin.Forms Portable and Xamarin.Forms Shared.

Xamarin.Forms Portable: Shares the code using a portable class library.

Xamarin.Forms Shared: Shares the code using shared assets project.

We will be working on Xamarin.Forms Portable.

Xamarin5

Step 4. Now you can see the solution file contains 4 projects namely, XamarinSample (Portable), XamarinSample.Android, XamarinSample.iOS and XamarinSample.WinPhone.

 Xamarin6

Deploying an Application

Step 1. Right click on the project which you want to deploy and select “Set as StartUp Project”.

Xamarin7

Step 2. If you want to deploy on a Windows Phone, choose the Device/Emulator from the first drop down :

Xamarin8

Choose iPhone/iPhoneSimulator from the second drop down and the device from the third drop down if you want to deploy on an iPhone:

Xamarin9

For deployment on Android, choose the device from the fourth drop down:

Xamarin10

Step 3. Now click the Xamarin11  button to deploy the application. You will see this as the output screen on the device you opted:

Xamarin12

Now, we are all set to develop some awesome apps on our beloved IDE. We hope the exhilaration is mutual. 😉

Let’s, wait for more awesome bits on Xamarin.Forms this year. Till then, grab your coffee mugs and join the excitement on Twitter if you haven’t already, give us a shout-out @thewittytechie with #Xamarin.