Introduction to Xamarin.Forms-Creating your first Cross-Platform Application

I was scrolling through the open source projects that the utopian community has contributed to and i was quite impressed at the number of contributions that has been made by the community in so many projects. Then I decided to search for my dear old xamarin.forms and I found that no contribution has been made by the community, to this project. So I decided that, on behalf of utopian, I would kick off the contribution to the this project.

What is Xamarin.Forms

I will start by telling you about what xamarin.forms is from the horse's mouth.

Xamarin.Forms is a cross-platform natively backed UI toolkit abstraction that allows developers to easily create user interfaces that can be shared across Android, iOS, Windows, and Windows Phone. The user interfaces are rendered using the native controls of the target platform, allowing Xamarin.Forms applications to retain the appropriate look and feel for each platform.

source

Xamarin.Forms helps you create mobile applications that run natively on all three major mobile platforms - Android, iOS and Windows.

Requirements

1. First, you need Microsoft Visual Studio IDE installed on your computer. Get the software here
2. If you intend to test your iOS application, you would need a Mac for that (Yeah, Apple have their restrictions)

Open Visual Studio and on the menu bar, click File-->New-->Project
Click on Cross-Platform and then select Cross platform App(Xamarin) then give your app a name
I'm giving mine UtopianTestApp

Now select the following Blank app --> Xamarin.Forms --> Portable Class Library and click Ok

Xamarin.Forms Folder Structure

If you take a look at the right hand corner of your IDE, you will see the folders that are in this solution. There are 4 project folders namely
yourAppName
yourAppName.Android
yourAppName.iOS
yourAppName.UWP

The first folder is called the portable project folder. this is where you write shared UI and logic code that will now be rendered on the various platforms. The other folders are sorta straight forward. They contain files specific to that platform. These are the folders in which you'll add platform specific code.

Now expand the first folder yourAppName
App.Xaml file is the entry point of your application. This is where you define the startup configurations. Here you define the first page of the application.
If you expand the App.Xaml file, you'll find underneath it, App.xaml.cs
This is known as a partial. It is called the "code-behind*". This is where you define logic specific to a page
Every xamarin.forms page a .xaml file and a .xaml.cs file.

Open app.xaml.cs
Replace this line

MainPage = new UtopianTestApp.MainPage();

with

MainPage = new UtopianTestApp.MyFirstPage();

Ignore the error message.

Now right click on yourAppName folder and click Add then select new item

Now select content page and type in MyFirstPage.xaml into the text area; Click Add

Now replace

   <StackLayout>
            <Label Text="Welcome to Xamarin Forms!" />
        </StackLayout>

with the following

<StackLayout VerticalOptions="CenterAndExpand" Margin="5">
            <Label Text="Hi my name is John. This is my first app" FontSize="Large"/>
            <Label Text="Click the button to greet me"/>
            <Button Text="Click!" Clicked="Greetings"/>
        </StackLayout>

Now expand the "MyFirstPage.xaml" on the solution explorer to your right. Click on "MyFirstPage.xaml.cs"

Add

private void Greetings()
        {
            DisplayAlert("Greetings", "Welcome to Xamarin.Forms! I see you were referred by John on Utopian...Great job creating your first Xamarin.Forms application!", "OK");
        }

just after

 public MyFirstPage ()
        {
            InitializeComponent ();
        }

Now its time to test our new application. For the sake of ease, lets run it first with android. Connect your device to your system and ensure debugging is turned on. If the drivers are correctly installed, you'll see your phone added to the list of devices
![Screenshot (317).png()

Click on it and wait for the application to build and run on your phone. Congratulations, you just made your first Xamarin.Forms application.

you can also pick one of the emulator devices and run it there

---

Posted on Utopian.io - Rewarding Open Source Contributors

---