Geeks With Blogs
Joe Mayo

With Xamarin.Forms, Xamarin launched a new UI technology for cross-platform device development. Xamarin.Forms lets you use XAML to build your UI. I prefer to refer to the development target as a device, as opposed to mobile, because it seems that Xamarin is able to target anything that runs Android, iOS, or Windows – platforms that extend beyond phones and tablets to any type of electronic gadget (thing) running these OS’s regardless of whether they’re mobile, stationary, or any other executable endpoint on the Internet. That said, my focus today is on the visual, which Xamarin.Forms addresses well.

XAML first made it’s debut in Windows Presentation Foundation (WPF) as a more powerful desktop UI technology successor to Windows Forms. To less fanfare, XAML was the underlying representation for Windows Workflow Foundation (WWF) around the same time. In subsequent generations, XAML became an integral UI technology for Silverlight, Windows Phone, and Windows Store. XAML has more than proven it’s value as a capable UI technology and now we have a non-Microsoft implementation via Xamarin.Forms. In this blog post, I’ll walk through the initial set-up of a Xamarin.Forms app.

Choosing Tools

You can build Xamarin.Forms apps with either Xamarin Studio or Visual Studio. If you’re working with Visual Studio, you’ll need 2013 Update 2 because this is the release that supports shared projects. A shared project is a new project type that lets you share common code across multiple project types. I’m a huge Visual Studio fan, but am using Xamarin Studio in this post. To date, Xamarin Studio has worked well and the debugging experience for Xamarin technology development is better.

The type of app I’m building is Xamarin.Android v4.12.5. While Xamarin.Forms runs on iOS, Android, and Windows Phone, I decided to go with a very simple option for this post. Xamarin Studio supports Android well and you don’t need a separate machine to compile an Android app. As a side note, Xamarin.Android lets you target phones, tablets, Google Glass, and Google Wear. Pretty much, whatever platforms Apple and Google come out with, Xamarin will support within a matter of hours. All of this is very cool, but here I’ll just create a new phone app.

Creating the Project

To create the project, run Xamarin Studio. You should see something similar to this:

image

Next, create a new solution. You can click the New Solution button on the screen, select the menu File | New | Solution, or type Ctrl+Shift+N. This shows you the new solution window:

image

In the new solution window, select C#, Mobile Apps, and Blank App (Xamarin.Forms Shared). A shared project lets you share code between multiple project types. While this demo focuses on Android, there’s value in targeting multiple-platforms with Xamarin tools and the new shared project solution is a great way to provide that level of flexibility for future development. The other option for Portable Class Libraries (PCL) is well suited for creating a DLL that I can share with other developers on other projects and I would use a PCL project for that type of reuse. However, I want a shared project for sharing artifacts among potential technologies in this solution only. Name the project DearXaml, choose a location, and click OK and you’ll see the following project open in Xamarin Studio:

image

DearXaml is the shared project, with the App.cs file and DearXaml.Android is the main project that consumes the shared project. Notice how the DearXaml.Android project references the shared DearXaml project. On other platforms, or through Visual Studio, you would also have DearXaml.iOS and/or DearXaml.WindowsPhone projects. Now let’s see some startup code.

Examining Startup Code

At its heart, an Android app runs via Activities, which still remains true in the Xamarin.Forms world. Here’s the auto-generated activity from the New Solution wizard:

using System;

using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

using Xamarin.Forms.Platform.Android;


namespace DearXaml.Android
{
	[Activity (Label = "DearXaml.Android.Android", MainLauncher = true)]
	public class MainActivity : AndroidActivity
	{
		protected override void OnCreate (Bundle bundle)
		{
			base.OnCreate (bundle);

			Xamarin.Forms.Forms.Init (this, bundle);

			SetPage (App.GetMainPage ());
		}
	}
}

As shown in the Activity attribute, the MainLauncher=true property setting means that this is the entry point of the application. The application calls OnCreate during the startup process, which executes Xamarin.Forms.Forms.Init(this, bundle) to initialize Xamaring.Forms. Then it calls SetPage with the App.GetMainPage argument. This is where we cross over into Xamarin.Forms territory. You can see that the following implementation of GetMainPage returns a Xamarin.Forms ContentPage:

using System;
using Xamarin.Forms;

namespace DearXaml
{
	public class App
	{
		public static Page GetMainPage ()
		{	
			return new ContentPage { 
				Content = new Label {
					Text = "Hello, Forms!",
					VerticalOptions = LayoutOptions.CenterAndExpand,
					HorizontalOptions = LayoutOptions.CenterAndExpand,
				},
			};
		}
	}
}

This ContentPage is a container page for the phone’s screen display. It sets its Content property to a centered Label – creating the classic “Hello” app experience. This default project sample demonstrates that you can write Xamarin.Forms apps with code. While coding is necessary for any degree of flexibility in UI development, there’s a lot of power to be had with declarative UI tools. So let’s rip this out and replace it with XAML.

Adding XAML Pages

What I’ll do is add a XAML page to the shared DearXaml project and then tell GetMainPage to return that new XAML page. To get started, right-click on the DearXaml share project and select Add | New File. You’ll see the New File windows below:

image

Select Forms and Forms ContentPage Xaml. The other option, Forms ContentView Xaml, lets you build a control (View) that fits on a screen, while the ContentPage (Page) is the whole screen. Set Name to HelloPage and click New to create a new XAML page in the DearXaml shared project. The location in the shared project is significant because now that Xamarin.Forms page can be shared among different project types, such as iOS, Android, and Windows Phone. Replace the contents of HellowPage.xaml with the following code:

<?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="DearXaml.HelloPage">
	<Label 
		HorizontalOptions="CenterAndExpand" 
		VerticalOptions="CenterAndExpand"
		Text="Hello Xamarin.Forms with XAML!"/>
</ContentPage>

Logically, this XAML is essentially the same as the class, represented by code, returned by the App.GetMainPage method. Notice the x:Class attribute on ContentPage – it corresponds to a partial class named HelloPage.cs that was created when this HelloPage.xaml was created. This XAML page is the other side of this partial page that you can instantiate. Now that the page is defined, replace the contents of the App.GetMainPage as follows:

using System;
using Xamarin.Forms;

namespace DearXaml
{
	public class App
	{
		public static Page GetMainPage ()
		{	
			return new HelloPage ();
		}
	}
}

Here, you only need to return an instance of the XAML page you want to display, HelloPage. That’s it, and now you can run the program.

Running the Program

Select the menu Build | Build All or press F8 to build the program and make sure it compiles. Then press F5 to run the program. You should see the Android emulator open and display the program something like this:

Note: The emulator is historically slow and takes even longer the first time you run it because it’s caching stuff.

image

One thing I really like about the current setup is that pressing F5 starts the emulator right away. Previous versions required manually loading the emulator and other magic tricks to get started. Kudos to the folks at Xamarin for automating this.

The Take-Away

Previous versions of Xamarin tools supported UI development, but those techniques were unique for each platform. With Xamarin.Forms, you can build the same screens to be shared across multiple technologies via PCLs and/or Shared Projects. This also sweetens the deal for enabling cross-platform device development with familiar tools of C#, and now XAML.

Posted on Sunday, July 6, 2014 10:01 PM xamarin , android | Back to top

Copyright © Joe Mayo | Powered by: GeeksWithBlogs.net | Join free