How To Create Your First Xamarin.Form Application

Introduction

Xamarin.Forms is a cross platform UI toolkit, which allows the user to efficiently create native user interface layout. Code can be shared with all the devices (IOS, Android, Windows Phone and Win store app) .

System Requirements

  1. Mac / Windows 7++ Machine with 8 GB RAM.
  2. Xamarin Studio 5.0 or new version/ Visual Studio 2012 or new version.

Support Devices

Xamarin.Forms applications can be supported by the following operating systems devices,

  • Android 4.0.3 (API 15) or higher.
  • iOS 6.1 or higher.
  • Windows Phone 8.1.
  • Windows 8.1.
  • Windows 10 Universal Apps.
  • Windows Phone 8 Silverlight. 

    Xamarin.Forms

Step 1: Open Visual Studio ( Run - Devenv.exe),

  • My system has a following VS version with Xamarin.

    VS version
Step 2: Create New Project ( File - New - Project ),

New Project

Step 3: Open New Project template Cross Platform - Blank App(Xamarin .Forms .Portable),

Blank App

*** Solution and project name is DevXamarinForms

Visual Studio automatically creates following projects:

DevXamarinForms.Android, DevXamarinForms.iOS, DevXamarinForms.UWP, etc and a shared Portable Class Library (PCL) project named called DevXamarinForms (Refer below)

After creating a project, solution should be like, as shown below:

solution

Step 4

Right click on Portable Project (DevXamarinForms) - Add - New Item -Cross-Platform - Forms Xaml Page and name it HomePage.CS.

New Item

After the two new files are created under portable library HomePage.XAML and HomePage.XAML.cs, in HomePage.XAMl , the code, given below, will automatically be added into XAML page:
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="DevXamarinForms.HomePage">  
  3.     <Entry x:Name="txtresult" Text="welcome to c-sharpcorner.com" />  
  4.     <!--Add this TextBox-->  
  5. </ContentPage>  
The XML two name spaces (XMLS) are added into XAML page and the referred Xamarin and Micrsoft URL with the version.

The HomePage.xaml.cs code at the backend file looks like, as shown below:
  1. using Xamarin.Forms;  
  2. namespace DevXamarinForms  
  3. {  
  4.     public partial class HomePage: ContentPage   
  5.     {  
  6.         public HomePage() {  
  7.             InitializeComponent();  
  8.         }  
  9.     }  
  10. }  
Where Ca we find InitializeComponent() Method?

InitializeComponent() method will generate during build so build your portable library and the C# code file is generated from the XAML file. If you look in the \DevXamarinForms\DevXamarinForms\obj\Debug directory, you’ll find a file named DevXamarinForms.HomePage.xaml.g.cs. The ‘g’ stands for generated.

Method
  1. namespace DevXamarinForm  
  2. {  
  3.     using System;  
  4.     using Xamarin.Forms;  
  5.     using Xamarin.Forms.Xaml;  
  6.     public partial class HomePage: global::Xamarin.Forms.ContentPage   
  7.     {  
  8.         [System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.Tasks.XamlG""0.0.0.0")]  
  9.         private global::Xamarin.Forms.Entry txtresult;  
  10.         [System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.Tasks.XamlG""0.0.0.0")]  
  11.         private void InitializeComponent() {  
  12.             this.LoadFromXaml(typeof(HomePage));  
  13.             txtresult = this.FindByName < global::Xamarin.Forms.Entry > ("txtresult");  
  14.         }  
  15.     }  
  16. }  
Just Modify App.CS file, as shown below:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using Xamarin.Forms;  
  6. namespace DevXamarinForm  
  7. {  
  8.     public class App: Application  
  9.     {  
  10.         public App() {  
  11.             // The root page of your application  
  12.             //MainPage = new ContentPage  
  13.             //{  
  14.             // Content = new StackLayout  
  15.             // {  
  16.             // VerticalOptions = LayoutOptions.Center,  
  17.             // Children = {  
  18.             // new Label {  
  19.             // HorizontalTextAlignment = TextAlignment.Center,  
  20.             // Text = "Welcome to Xamarin Forms!"  
  21.             // }  
  22.             // }  
  23.             // }  
  24.             //};  
  25.             MainPage = new HomePage(); // Add this code   
  26.         }  
  27.     }  
  28. }  
Build and run the Application.

Application