Getting Started with Xamarin Forms
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
While Xamarin is a dream come true for developers planning to build cross-platform apps for the iOS, Android, and Windows Phone platforms, maintaining different user interface code is still a pain for most developers. Although a significant part of the app logic can be written once and reused for multiple platforms, developers still have had to code separately for iOS, Android, and Windows Phone.
Not anymore. In May 2014 Xamarin introduced the Xamarin.Forms API, which allows developers to build shared screens for iOS, Android, and Windows Phone. Using the Xamarin.Forms API, you can create a single code base for your user interface, and Xamarin will automatically translate it into the native UI elements for each platform that you're targeting.
In this article, I'll help you get started with Xamarin.Forms by creating different pages using the various classes available in the API.
Creating the Project
Launch Xamarin Studio and create a new solution. Select Mobile Apps and then Blank App (Xamarin.Forms.Portable), and name the project HelloWorld (see Figure 1).
)
Figure 1 Creating a project that uses the Xamarin.Forms API.
When the project is created, notice that it contains three separate projects, as described in the following table and shown in Figure 2.
){kind=link}
|
Name |
Description |
|
HelloWorld |
This project contains all the cross-platform shared code and shared UI libraries. |
|
HelloWorld.Android |
This project contains an Android application. |
|
HelloWorld.iOS |
This project contains an iOS application. |
Figure 2 The various projects in a Xamarin.Forms solution.
Examine the content of the App.cs file located in the HelloWorld project:
using System;
using Xamarin.Forms;
namespace HelloWorld
{
public class App
{
public static Page GetMainPage ()
{
return new ContentPage {
Content = new Label {
Text = “Hello, Forms!”,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
};
}
}
}
The App class contains a static method named GetMainPage() that returns an instance of the Page class. A Page class in Xamarin.Forms serves as a container for displaying items within a window (screen). A ContentPage is a single unit of display (think of it as a View Controller in iOS and an Activity in Android). In this example, the content of the page (as represented using the Content property) simply contains one Label control, which displays the caption “Hello, Forms!”.
Let's examine the MainActivity.cs file in the HelloWorld.Android project:
using System;
using Android.App;
using Android.Content;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using Xamarin.Forms.Platform.Android;
namespace HelloWorld.Android
{
[Activity (Label = “HelloWorld.Android.Android”,
MainLauncher = true,
ConfigurationChanges = ConfigChanges.ScreenSize |
ConfigChanges.Orientation)]
public class MainActivity : AndroidActivity
{
protected override void OnCreate (Bundle bundle)
{
base.OnCreate (bundle);
Xamarin.Forms.Forms.Init (this, bundle);
SetPage (App.GetMainPage ());
}
}
}
When the activity is loaded, it loads its content by calling the GetMainPage() method of the App class, which returns an instance of the ContentPage class.
Now let's examine the AppDelegate.cs file in the HelloWorld.iOS project:
using System;
using System.Collections.Generic;
using System.Linq;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
using Xamarin.Forms;
namespace HelloWorld.iOS
{
[Register (“AppDelegate”)]
public partial class AppDelegate : UIApplicationDelegate
{
UIWindow window;
public override bool FinishedLaunching (
UIApplication app, NSDictionary options)
{
Forms.Init ();
window = new UIWindow (UIScreen.MainScreen.Bounds);
window.RootViewController =
App.GetMainPage ().CreateViewController ();
window.MakeKeyAndVisible ();
return true;
}
}
}
Similarly in this case, the AppDelegate class calls the GetMainPage() method of the App class to obtain an instance of the ContentPage class. Using the ContentPage class, it calls the CreateViewController method to return an instance of the UIViewController class so that it can be assigned to the RootViewController property of the window.
To see how the app will look on an iPhone, click the Debug button and select Debug | iPhoneSimulator (see Figure 3).
){kind=link}
Figure 3 Selecting the iPhone Simulator in Xamarin Studio.
Select the gear icon next to the HelloWorld.iOS project and select Run With > iPhone 6 iOS 8.1 (see Figure 4).
)
Figure 4 Selecting the type of iPhone Simulator to test the application.
The application is loaded on the iPhone Simulator (see Figure 5).
){kind=link}
Figure 5 The application running on the iPhone Simulator.
To test the Android application, select the gear icon displayed next to the HelloWorld.Android project and select Run With > Nexus5 (emulator-5554), as shown in Figure 6.
)
Figure 6 Selecting the Android emulator to test the application.
When the application is loaded on the Android emulator, the page is loaded as shown in Figure 7.
){kind=link}
Figure 7 The application running on the Android emulator.