Skip to main content

Introduction to Xamarin.Forms and Hello World using Xamarin.Forms

Xamarin.Forms is a cross-platform UI toolkit allows developers to easily create fancy native user interfaces that can be shared across the platforms like 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. 

Xamarin enables sharing the app logic across the platform with native user interface. Xamarin.Forms allows you to build native user interfaces for iOS, Android and Windows Phone using 100% shared C#. Xamarin.Forms includes more than 40 controls and layouts, which are mapped to native controls at runtime. 
Let's jump into the code directly.

Create HelloWorldXaminForms Application.


To create a Xamarin.Forms application, open Visual Studio, select File > New Project, select the Visual C# category under the Templates, and choose Cross Platform App (Xamarin), Enter the name of the app "HelloWorldXaminForms", click OK

This will open the new dialog to choose the Project template, choose Blank App template and select the code sharing strategy as Portable Class Library (PCL), click OK.
After clicking OK, our solution will be ready with four projects. there will be three platform-specific projects and one Shared Project. The Shared Project contains the application logic as well as all the Xamarin.Forms code that will be rendering the screens of the application.

You can now try to run the application. The screen should show "Welcome to Xamarin Forms"


Understand the project structure.

Before we start coding, let's learn a little about the structure of the application. The solution is divided into 3 projects: Portable project, project for the Android platform and project for the iOS platform.

HelloWorldXamarinForms (Portable): A Portable project is the place where shared code will be found. This type of project allows you to share code between projects for specific platforms.

The main file of the Portable project is App.xaml and the associated App.xaml.cs. In the App.xaml.cs file, you can define the first page of the application and using the OnStart, OnSleep and OnResume methods you can manage the application lifecycle. In the App.xaml file, you can define styles for controls and resources that will be available throughout the application.
App.xaml.cs
Currently, the MainPage is the only page in the application. At the moment, this page shows only a screen that says "Welcome to Xamarin Forms". In the MainPage.xaml file, you can define the user interface of the page and the controls can be bound with the data source,  MainPage.xaml.cs file handles all the code behind the MainPage.xaml.
MainPage.xaml

MainPage.xaml.cs
HelloWorldXamarinForms.Droid (Android):  This project will contain the Android platform specific components, the main file is MainActivity.cs. In this file, Xamarin.Forms is initialised and the application defined in the Portable project is loaded. In the Activity attribute, you can specify properties such as the name and icon of the application or the theme used in the application.
MainActivity.cs
HelloWorldXamarinForms.iOS(iOS): This project will contain the iOS platform specific components, the main file is AppDelegate.cs. Here Xamarin.Forms is initialised and the first page of the application is loaded.
AppDelegate.cs

Deploying an App for debugging


  • Deploy the Xamarin.Forms application on Android platform:

Connect the Android device or start Android Virtual Device (AVD), Select solution configuration as Debug and startup project as HelloWorldXamarinForms.Android. Click the run button (F5) to deploy the application on Android platform.

Deploy On Android Platform



  • Deploy the Xamarin.Forms application on iOS platform:

Connect the Visual Studio to the Mac to build the iOS platform, Select solution configuration as Debug and startup project as HelloWorldXamarinForms.iOS. Click the run button (F5) to deploy the application on iOS platform.

Deploy on iOS Platform

Comments