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:

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    #if DEBUG
    if (System.Diagnostics.Debugger.IsAttached)
    {
        this.DebugSettings.EnableFrameRateCounter = true;
    }
    #endif
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        // TODO: change this value to a cache size that is appropriate for your application
        rootFrame.CacheSize = 1;


        global: Xamarin.Forms.Forms.Init(e);
    }
}

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:

public MainPage()
{
    this.InitializeComponent();

    this.NavigationCacheMode = NavigationCacheMode.Required;
    LoadApplication(new ENEI.SessionsApp.App());
}

And the page type must be changed to: 

• In Windows Phone 8.1 (WinRT):
  

  <forms:WindowsPage
      x:Class="ENEI.SessionsApp.WinRT.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:forms="using:Xamarin.Forms.Platform.WinRT"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      Foreground="Black"
      Background="White">

• In Windows 8.1 Store App (WinRT):
  

  <forms:WindowsPage
      x:Class="ENEI.SessionsApp.WinRT.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:forms="using:Xamarin.Forms.Platform.WinRT"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      Foreground="Black"
      Background="White">

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

MainPage = new NavigationPage(new SessionsView())
{
    BarBackgroundColor = Color.White,
    BarTextColor = Color.Black,
    BackgroundColor = Color.White,
};

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:

<Image Grid.Column="7">
    <Image.WidthRequest>
        <OnPlatform Android="30" WinPhone="48" iOS="30" x:TypeArguments="x:Double" />
    </Image.WidthRequest>
    <Image.HeightRequest>
        <OnPlatform Android="30" WinPhone="48" iOS="30" x:TypeArguments="x:Double" />
    </Image.HeightRequest>
    <Image.Source>
        <OnPlatform x:TypeArguments="ImageSource">
            <OnPlatform.iOS>
                <FileImageSource File="ic_action_list.png" />
            </OnPlatform.iOS>
            <OnPlatform.Android>
                <FileImageSource File="ic_action_list.png" />
            </OnPlatform.Android>
            <OnPlatform.WinPhone>
                <FileImageSource File="Images/ic_action_list.png" />
            </OnPlatform.WinPhone>
        </OnPlatform>
    </Image.Source>
    <Image.GestureRecognizers>
        <TapGestureRecognizer x:Name="DetailsGesture" CommandParameter="{Binding}" Tapped="DetailsGesture_OnTapped" />
    </Image.GestureRecognizers>
</Image>

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:

<ContentPage.Resources>
    <ResourceDictionary>
      <converters:FavoriteImageConverter x:Key="FavoriteImageConverter" />
      <converters:ImageSizeConverter x:Key="ImageSizeConverter"/>
      <converters:ImageUrlConverter x:Key="ImageUrlConverter"/>
      <converters:RowHeightConverter x:Key="RowHeightConverter"/>
    </ResourceDictionary>
</ContentPage.Resources>

And:

<Image Grid.Column="7"Source="{Binding Converter={StaticResource ImageUrlConverter}, ConverterParameter=Details}" HeightRequest="{Binding Converter={StaticResource ImageSizeConverter}}" WidthRequest="{Binding Converter={StaticResource ImageSizeConverter}}">
    <Image.GestureRecognizers>
        <TapGestureRecognizer x:Name="DetailsGesture" CommandParameter="{Binding}"Tapped="DetailsGesture_OnTapped" />
    </Image.GestureRecognizers>
</Image>

Where the converters are defined as in the following.

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

public class ImageSizeConverter:IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value != null)
        {

            if (Device.OS == TargetPlatform.Android || Device.OS == TargetPlatform.Windows)
            {
                return 48;
            }
            if (Device.OS == TargetPlatform.iOS)
            {
                return 30;
            }
        }
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

In ImageUrlConverter, to define the path for the images:

public class ImageUrlConverter:IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (parameter !=null && !string.IsNullOrEmpty(parameter.ToString()))
        {
            var imageUrl = string.Empty;
            switch (parameter.ToString())
            {
                case "Like":
                    imageUrl= Device.OS == TargetPlatform.WinPhone || Device.OS == TargetPlatform.Windows ?
                    "Images/ic_action_like.png":
                    "ic_action_like.png";
                    break;
                case "Share":
                    imageUrl = Device.OS == TargetPlatform.WinPhone || Device.OS == TargetPlatform.Windows ?
                   "Images/ic_action_share_2.png" :
                   "ic_action_share_2.png";
                    break;
                case "Details":
                    imageUrl = Device.OS == TargetPlatform.WinPhone || Device.OS == TargetPlatform.Windows ?
                   "Images/ic_action_list.png" :
                   "ic_action_list.png";
                    break;
            }

            return ImageSource.FromFile(imageUrl);
        }
        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

In RowHeightConverter to define the size of the row from the ListView:

public class RowHeightConverter:IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value != null)
        {

            if (Device.OS == TargetPlatform.Android || Device.OS == TargetPlatform.iOS)
            {
                return 150;
            }
            if (Device.OS == TargetPlatform.WinPhone)
            {
                return 180;
            }
            if (Device.OS == TargetPlatform.Windows)
            {
                return 200;
            }
        }
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

At this moment if you run the applications you will have something as in the following:

Figure 12: The WinRT apps