First Mobile App with Xamarin.Forms

First Mobile App with Xamarin.Forms

Let us start with a single page application or consider it as a simple hello world application.

The main point here is to learn how to create a application and test in Android emulator and iOS simulator.

Create Project :

Start Visual Studio.

Click on “Create new project”

Select “Visual C#” on left menu and “Cross-Platform App (Xamarin.Forms)”.

Change name to any name of your choice. Here I set it to HelloWorld.

Now click on ”OK” button in the bottom right corner.

Then in the next step select “Blank App” for now.

Select required platforms you can also select all the projects.

Select UI Technologies to Xamarin.Forms. Let us discuss the differences between Xamarin.Forms and Native projects in the coming tutorials.

Change the code sharing strategy to .NET standard project. The difference between different code sharing strategies will be discussed in upcoming tutorials.

Now click “OK” button in the bottom left corner. By this we have set-up the project.

This creates a blank project with a default page with a text “welcome to xamarin.forms”, the default page name will be “MainPage.xaml” and “MainPage.xaml.cs”.

“MainPage.xaml” is UI page and

“MainPage.xaml.cs” is the respective backend that carries the required logic.

In Windows OS :

In MAC OS :

The highlighted page is the default page that created automatically.
Let us discuss the Folder structure of the project in our next tutorial.

Now let us see how to test or debug the application to make the tutorial easily understandable let us see “Visual Studio in MAC OS”. The processes are same for both “MAC OS” and “Windows OS”

This is done in four steps

1) Selecting the platfrorm (ios or android).

2) Now select the bild mode (release or debug)

        Release mode is when you are going to publish appliation in the store

        Debug mode is for testing your app. For now let us discuss about testing only

3) selecting from the available devices (either a simulator/emulator or a physical device)

        Simulator/emulator means the virtual device of either iOS or Android

        Physical device means your mobile phone. For this you have to connect your mobile with usb cable and before that you have to enable debug mode in your device, then the Visual Studio will automatically detect your device

4) Now start building the application by clicking the play icon on the top.

For reference follow the images below

Selecting iOS device

Selecting Android Device

To run click this

Now you can see you app in the device, as we did add anything to the app the default page with default text will be displayed and it will be look like this following image.

This will be the final output. If you have got this screen then you can can move to next tutorial. If you get any error feel free to ask, BTW I am going to post all the possible error for beginners in my future posts. Before that let us get to next level of app development.