How to develop a Xamarin.Forms Hello World Application – Xamarin.Forms Series Part 1

Xamarin.Forms a quick Introduction

Today, we will learn how to develop a cross platform Hello World application using Xamarin.Forms.

Xamarin.Forms is not the final word for Cross platform Mobile app development. It is best for getting started with Xamarin, and targetting 3 major platform by sharing 99% Code.

Xamarin.Android or Xamarin.iOS is best for application dealing with high device specific API  usage like geolocation, and other such capabilities. Through Xamarin.Android or Xamarin.iOS a C# developer can share the business logic among Projects and design Native UI’s and make use of Device specific capabilities for 3 platforms independently.

Xamarin.Forms on other hand can be used for simple application where there is less Platform specific API usage.

Xamarin.Forms is great for prototyping or making a quick prototype application. And after you’ve done that, you might just find that you can continue using Xamarin.Forms features to build the entire application.

Hello World using Xamarin.Forms

To get started you must have Installed latest version of Xamarin, I am using Visual Studio for developing the Hello World application so that I can target 3 platform. But I wont be showing iOS screenshots because I don’t have an Apple device in my network. But don’t worry, all the implementations we do here will hopefully work in iOS device.

Hello World! The first application you probably create when you learn new language or start using new development tool.

I am not covering everything in detail, like the basic C# concepts, or Xamarin.Forms complete capabilities.  This tutorial is intended for Getting started with Xamarin.Forms, everything in detail can be learned from Creating Mobile Apps with Xamarin.Forms Book Preview 2 by Charles Petzold http://www.microsoftvirtualacademy.com/ebooks#9780735697232

Open Visual studio, and Create new project.

Select Xamarin.Forms Portable Class Library Project (PCL).  As Xamarin Documentation suggests to go for shared if our Project contains XAML (Extensible Markup language, usually pronounced Zammel), in which we will be developing from now on.

For Xamarin.Forms solutions that contain XAML, we recommend using the Xamarin.Forms Portable Class Library (PCL) template rather than using Shared Asset Projects (SAP). The PCL approach isolates Xamarin.Forms code in a separate DLL, while the SAP shares code directly among the three platforms. Before using XAML with the Shared Asset Project (SAP) template read the details below on enabling experimental XAML support in SAPs.

Xamarin.Forms PCL New Project in VS2015
Create Xamarin.Forms PCL New Project in VS2015.

Xamarin.Forms Projects

The Xamarin.Forms Blank template will set up projects for iOS, Android and Windows Phone 8.0. Feel free to delete any project if you are not going to target it.

Right click the solution, click Build Solutions and Run the project in platform of your choice by setting startup project.

Hint for beginners: Startup Project can be changed by right clicking desired Project in Solution, and Selecting “Set as startup project”.

Screenshot with Blank Template

You can see that app is generated as above screenshot.

Now let us dig deep, so we can understand what is happening.

Each Projects in the solution has

  1. iOS – AppDelegate.cs
  2. Android – MainActivity.cs
  3. Windows Phone – MainPage.xaml.cs

These three files are the starting points of respective platforms. All these files contain a line

Here HelloWorld is our Project Shared, App is the entry point (App.cs) in our PCL Project.

This line invokes the App.cs in the main HelloWorld Project which is where we write code to Share among three platform, which contains

MainPage is the entry point of your app, the first page displayed in app. Why I love programming with help of XAML is that I can write the complex parts like the new ContentPage{ … part in above code in more understandable form.

So We just want to create a new entry page. Right Click HelloWorld (Portable) Project, Click Add new Item.

Select Forms Xaml Page, and give it a name FirstPage.xaml. We will use this project as continuation for next tutorial in the series, navigation of pages in Xamarin.Forms.

addnewitem

In FirstPage.xaml, write the code as below

<?xml version=”1.0″ encoding=”utf-8″ ?>
<ContentPage xmlns=”http://xamarin.com/schemas/2014/forms”
xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”
x:Class=”HelloWorld.FirstPage”>
<StackLayout VerticalOptions=”Center” HorizontalOptions=”Center” >
<Label Text=”I love XAML” />
</StackLayout>
</ContentPage>

Now we will compare with the first set of code we wrote (or was there in default in App.cs).

new ContentPage { is a main node <ContentPage> in xml format

new StackLayout { is a child node <StackLayout> under <ContentPage>

new Label { is again a child node <Label> under <StackLayout>.

In my view this is simpler than coding it in C#. You can code in the way you want.

Now we want this FirstPage.xaml loaded in startup. Just a small changes in App.cs will get it done.

and comment out the rest of part so that you can compare and study.

Now Build the project and run again.

Voila! The new Xaml Page loads in startup.

HelloWorldFinal

So in our First Series, we have learned bit more than a simple Hello World app.

We covered

  1. Creating Xaml.Forms New PCL Project.
  2. Building it and Running.
  3. Coding UI in C# and XAML.
  4. Loading any Xamarin.Form Page as MainPage.

Shout out your suggestions, feedbacks and doubts in comment section below. To be frank this is the first time I am writing tutorial, so your suggestions will help me improve my self.

The HelloWorld Solution can be downloaded from my Github (not a good Project to share, still you guys can fork it and start building on it in case of any issues)

https://github.com/muhaym/Xamarin.Forms.HelloWorld

Xhackers Hackathon – The best event I ever attended!

This is the day when I understood the saying “Programmers are machine who turns coffee into software”.

I express my gratitude to Nishanth Anil, Vidya Sagar, Vic, Anubhav, Senthil Kumar, KirtiSagar, Abhishek, Pooran Prasad, Sagar Bhanudas Joshi and all the other Xhackers out there at the event.

I thought of not attending the event till the last night, because of exams at my college. But my partner at XhackNight called me and forced to attend the program, who knew that was for winning something great.

Finally I took a decision, Tirur – Bangalore train, General compartment ticket, traveled in sleeper class (Shared the seat with our friends Jaseel and Ramees).

Reached early morning there at Bangalore, and went to Microsoft R&D Center in no time.

The event started with few Keynotes by Nish, Pooran, etc. As usual they covered about Xamarin, its history and all. The Motivational stuff by Nish at his initial Keynote was awesome. (The only thing I hate about him is he is an Apple fan :P). He was the rock star of the event till afternoon sessions.

Yeaaah! It’s Lunch time, had Fried Rice, etc. (No matter who sponsored it, thanks to them :D).  It was prayer time, started hunting for Prayer area at Microsoft R&D campus, didn’t find, they redirected us to Microsoft Main Building, went there, after a lot of security check-ins, and search finally done with prayer behind the beautiful Badminton court there. (I don’t know whether I can share this secret stuff inside Microsoft Campus Bangalore :P).

Reached late to the afternoon sessions, Nish was handling session on developing app for iOS using Xamarin. (Least interested being a windows phone fan boy :P).

Finally the great guy who ‘stole the show’ came up with his Game development sessions, using CocosSharp and related applications. He was handling the last session, where all the audience were bored like anything, but he started his session by motivating all of us! Thanks Vidya Sagar for that awesome session :).

 

Then the session, we waited for long officially began. The xHackNight.

Me and my team mate Faheem, came up with an idea for helping those who are in search for Blood, and those who are interested to donate. Yes we sketched a blood donation app in my notebook (MicroProcessor Based Designing) which I took for studying. (I knew that I wont, but still!).

Getting fresh ourselves
Getting fresh ourselves

It was like 7 pm, finally we started designing UI, initially targeted for Windows Phone, same time Faheem was designing Android UI. Slowly covered the UI, and some basic stuff in like 4 hours. We had endless fun in between like squeezing into sleeping bag for ‘selfie’, fun in restroom for keeping us awake whole night.

Yes me and Faheem was coding even after midnight. Started doing the backend, Connection to Azure services, and all other features. But when I looked to clock after implement all these, and finalising Windows Phone part, the time

Still no sleep because of Die hard Coding.
Still no sleep because of Die hard Coding.

was 11 PM. I didn’t sleep whole night! First time in my life coding whole night. It was the countless coffee, chocolate milk, espresso, Cappuccino, Lime tea, Cardamon Tea, and all other stuff they had there which made us awake whole night and  finish the works. Thanks Microsoft for sponsoring all those hot drinks.

Coffee Coffe Whole night, thanks Microsoft
Coffee Coffe Whole night, thanks Microsoft

Whole night there was Anubhav, Nish, Senthil who helped me to accomplish the task, I don’t have words to appreciate their helping mentality by not sleeping the whole day 🙂

Finally when we tried to implement the backend to the android UI we designed, our Xamarin started to crash 🙁 . After a lot of research and time wasting, we understood that the Xamarin version and SDK we used was old, we started updating. But the time fixed for Hack was over.

We presented our finished Windows Phone app, and half baked Android app to judges. It’s lunch and judgment time.

Results announced, and YEAAH we won for the best Windows Phone and Azure Implemented app. Thanks Microsoft and Xamarin for Lumia 925!

Our gift Lumia 925 for best Windows and Azure app at hacknight.
Our gift Lumia 925 for best Windows and Azure app at XhackNight.

This might be a long writing, but I just wanted to thank all those Xhackers for attending, helping and collaborating to learn and develop apps.

End Note: I miserably failed in the exam next day, 9/50 :P, but my teacher congratulated me for the achievement at event.