Xamarin Guide 7: Add Support For WinRT Apps

Scope

This Xamarin Workshop Guide was created for the The Portuguese National Meeting of IT Students (ENEI) by Sara Silva and the original content is available here. To extend it to the global community, it was published in a new project called Xam Community Workshop, and the main goal is for any developer, or user group to customize it to their events.

Before reading this article you must read:

• Xamarin Guide 1: Create a Xamarin Forms Project
• Xamarin Guide 2: Create the Model and the Data Source
• Xamarin Guide 3: Create the SessionsView
• Xamarin Guide 4: Create the SessionDetailsView
• Xamarin Guide 5: Add ShareService
• Xamarin Guide 6: Add Splash Screen, Name and Version

Guide 7. Add support for WinRT Apps

In this step you will learn how to add support to WinRT apps. That means you will create a Universal app that will use Xamarin Forms for Windows (Preview).

To start, create a new project based on an Universal App template, as described in Figure 1 and Figure 2.

Figure 1: Create new project

Figure 2: Blank App (Universal App)

The result will be as in Figure 3.

Figure 3: The solution

Now, you will add the ENEI.SessionsApp reference to the WinRT project, as described in Figure 4 and Figure 5.

Figure 4: Add Reference

Figure 5: Selecting the ENEI.SessionApp

In the Windows Phone 8.1 (WinRT) app, you will get an error as in the following:

Figure 6: Error adding ENEI.SessionsApp

This error means that the ENEI.SessionsApp is a Portable Class Library (PCL) that does not have support for Windows Phone 8.1 (WinRT). This way, you need to change the PCL project (in Properteis) to support this target, as described in Figure 6:

Figure 7: Add support to Windows Phone 8.1 (WinRT)

After that, you will have the references added to each project, as in the following:

Figure 8: The references

Before you create code, you need to install the Xamarin Forms Windows (Preview) NuGet Package as in the following:

Figure 9: Opening the “Manage NuGet Packages…”

Figure 10: Installing the Xamarin Forms Windows (Preview)

Figure 11: The Xamarin Forms Windows (Preview) installed

Let's do some code!

In general, you should not do so many changes to have the WinRT apps. First, you need to start by doing the Xamarin Forms setup, this way you need change the OnLaunched method in the App.xaml.cs that has the following:

As in the other platform, the Init method will initialize the Xamarin Forms, in this case it is needed for sending the LaunchActivatedEventArgs.

And we need to change the MainPage contructor, from each WinRT app, to:

And the page type must be changed to:

• In Windows Phone 8.1 (WinRT):
  
  1. <forms:WindowsPage
  2. x:Class="ENEI.SessionsApp.WinRT.MainPage"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:forms="using:Xamarin.Forms.Platform.WinRT"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. mc:Ignorable="d"
  9. Foreground="Black"
  10. Background="White">
• In Windows 8.1 Store App (WinRT):
  
  1. <forms:WindowsPage
  2. x:Class="ENEI.SessionsApp.WinRT.MainPage"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:forms="using:Xamarin.Forms.Platform.WinRT"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. mc:Ignorable="d"
  9. Foreground="Black"
  10. Background="White">

Now, we must define the background color from the NavigationPage to white that should be defined from the beginner:

At this moment, you will see the header in the right way but the images from the menu are not displayed, because each image was defined by: They using OnPlatform to set the image's source and the image's height and width. In the preview version used, it is not possible to use that but in the future it will work for Windows apps as it works for the other platforms.

This way, you need to create a workaround to ensure the images will be loaded and it will use converters, as in the following:

And: Where the converters are defined as in the following.

In ImageSizeConverter, to define the Height and the Width for the images:

In ImageUrlConverter, to define the path for the images: In RowHeightConverter to define the size of the row from the ListView: At this moment if you run the applications you will have something as in the following:

Figure 12: The WinRT apps