Xamarin Forms For Windows Preview First Steps

The past March 19th, James Montemagno with Miguel de Icaza and Scott Hanselman presented a new preview version of Xamarin Forms with support for Windows Store and Windows Phone projects, during the second day of DotNetConf 2015. You can have a look at the original video here at Channel9.

 

The support for Windows XAML and universal projects in Xamarin.Forms was something developers have been waiting for for a long time now. To date, Xamarin.Forms only supports Windows Phone 8.0 Silverlight projects, making it unable to use some scenarios.

 

This release is just in preview mode, but you can start playing with it and have a look at what will come in the future and start supporting Universal Apps in your Forms solutions.

 

Preparing a new Xamarin.Forms solution

 

To start testing this preview, you will need to create a new Xamarin.Forms project, using the portable template, from Visual Studio:

 

 

The first thing after your project is created, update the Xamarin.Forms NuGet packages used in the project, so you have the same version in all projects in the solution. To do it, just right-click on the solution name in the Solution Explorer and tap the "Manage NuGet Packages for solution" menu item. Change the channel from "Stable only" to "Include prerelease" so you can get the newest version out there. In the Updates section you will see the available updates for Xamarin.Forms and Xamarin Support Library. Click the "Update All" button:

 

 

Now you can add support for Windows Universal projects. First you need to add a new Windows Universal project to your solution. If you don't want to support Windows Phone 8.0, remove the Windows Phone 8 project created with the Xamarin.Forms template.

 

Now, you need to add the Xamarin.Forms NuGet to your new Windows Universal project. Just like before, right-click on the solution and open the NuGet manager for the solution. Select the Online node in the left side tree, be sure the channel is established in "Include prerelease" and search for Xamarin.forms.windows as in the following:

 

 

 

After clicking Install, NuGet will ask you what projects it should install this package for, by default it selected the compatible projects, so you only need to click the OK button to start the installation:

 

 

 

Now you have the libraries needed in your Universal project so it can support Xamarin.Forms. Now you need to add a reference to your Universal project for the Xamarin.Forms portable class library with our shared code and views. The problem is, by default Xamarin.Forms created PCL doesn't support Windows Phone 8.1 or Windows Store:

 

 

 

You will need to go to the PCL project properties and edit the target frameworks so you can remove Windows Phone Silverlight 8 (in case you don't need it anymore) and add Windows Phone 8.1 and Windows 8.1 support:

 

 

After doing this, Visual Studio should reload the project with the new target frameworks. Now you can add a reference to this project in each of the universal sub projects.

 

Just a few more steps to go. To make this work, you need to tell the Universal projects to initialize and load the Xamarin.Forms app.

 

Starting Xamarin.Forms in a universal project

 

You need to add code to the App.xaml.cs file. In the OnLaunched method, so when the app is started, it initializes the Xamarin.Forms engine (the line marked in Yellow):

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;
    if (rootFrame == null)
    {
        rootFrame = new Frame();
        rootFrame.CacheSize = 1;

        //Initialize Xamarin.Forms
        global::Xamarin.Forms.Forms.Init(e);

        Window.Current.Content = rootFrame;
    }
}

Then in  the MainPage of the Windows Store project, you need to change the base type from Page to Xamarin.Forms WindowsPage:

<forms:WindowsPage
    x:Class="XamarinForWinStore.WinUniversal.MainPage"
    xmlns:forms="using:Xamarin.Forms.Platform.WinRT"

In the MainPage code behind C# file, you need to remove the class base type (since this is a partial class and it is defined in XAML, it isn't needed in the code behind at all) and add code to Load the Xamarin app:

public sealed partial class MainPage
{
    public MainPage()
    {
        this.InitializeComponent();

        this.NavigationCacheMode = NavigationCacheMode.Required;

        LoadApplication(new XamarinForWinStore.App());
    }
}

You need to repeat this process in the Windows Phone project but using WindowsPhonePage instead of WindowsPage.  And you are ready to go!

 

Modify the App.cs code in the PCL project a bit, so it uses a different background and a bigger font size:

public App()
{
    // The root page of your application
    MainPage = new ContentPage
    {
        BackgroundColor = Color.FromRgba(0.3, 0.3, 0.5, 1),
        Content = new StackLayout
        {
            VerticalOptions = LayoutOptions.Center,
            Children = {
                            new Label
                            {
                                         XAlign = TextAlignment.Center,
                                         Text = "Welcome to Xamarin Forms! on WinRT",

                            }
        }
    };
}

Make the Windows Store project the Startup Project for the solution and press F5:

 

 

 

It is not Gold all around.

 

This preview version is a big step forward in the right direction and allows us to start playing with Xamarin.Forms in new platforms, but it is far away from being a complete release. The following are some of the things you don't have in this version:

• Maps.
• GridView.
• Controls: Some controls don't have a dedicated renderer for Windows XAML.
• Resources.

We just need to wait a bit more. With Microsoft //Build 2015 due in a month, what will be present in Xamarin there? It could be an  awesome conference. I will be there and promise to get back to here to write about everything I learn there.

 

You can have a look at the sample project used for this article here at my GitHub account.

 

Happy Coding!