Xamarin - Xamarin and the Universal Windows Platform

Why Target the UWP?

Why should you target your app for the UWP? App engagement—that’s why. As developers, we want reach. We want eyes on our content. We want our apps to be used—and used regularly—to make the most of in-app purchases, advertising, content contributions to build the app’s ecosystem and so on.

The UWP allows you to write apps that run on desktops, tablets, phones, Xbox, HoloLens and Internet of Things (IoT) devices. That’s more than 400 million potential sockets for your app. But it isn’t just about the number of Windows-based devices. It’s also about boosting engagement across all the devices you support. Consider NPR’s experience with its app, NPR One (one.npr.org).

NPR One delivers a curated stream of public radio news, stories and podcasts to its users. Targeting Windows dramatically increased engagement with NPR’s content. A Microsoft blog post (bit.ly/2e30plQ) quoted Ben Schein, product manager at NPR, as saying, “Seventy percent of NPR listeners use Windows devices, and we’ve seen a 50 percent increase in their listening time just since Windows 10 came out. And that was before we upgraded our app.” As an unexpected bonus, NPR also found when “... we released the Windows app, we had an unanticipated spike in iOS and Android downloads, as well.”

This speaks to the fact that we live in a multi-device world. We know people have iOS and Android devices, and we know they have PCs at work or at home. It makes sense that they switch between these devices during the day depending on where they are and what they’re doing. Having your app available on all the devices people use makes it more likely they’ll stay engaged with your app and your content.

Consider a typical day where someone rides the bus to work. On the bus, she starts working on a task on her phone, such as reading a report. Once she gets to work, she might want to pick that task up on a desktop by exporting the report to Microsoft Excel for more analysis. On the bus ride home, she might start watching a video. When she arrives home, she might transition to a PC—or to a large-screen living room experience with an Xbox—and want to pick up watching where she left off.

In each of these cases, reach isn’t simply about the devices your app can run on, though that’s clearly important. Reach is also about how well your app lets users transition between devices as they try to accomplish their tasks on the device that makes the most sense at the time.

What Is the UWP?

The UWP provides a common app platform that’s available on every device that runs Windows 10.

In addition to a common set of APIs available on all Windows 10-based devices, device-specific APIs allow you to make the most of a device. I’ll now discuss some of the main benefits the UWP provides to developers.

Adaptive and Beautiful UI The UWP is designed to help your app adapt to different screen sizes and types of input. It provides UI controls and layout controls that adapt to the device on which they’re running whether it’s a small phone screen or a large entertainment center screen.

Figure 1 shows an example of adaptive UI. Notice the location of the call button and picture-in-picture control on the mobile device. When the app runs on the phone, the size of the call button changes and its position adjusts, making the UI easier to use with one hand. The location of the picture-in-picture is adjusted on the phone to accommodate the smaller screen.

Figure 1 Adaptive UI

The built-in controls accept the type of inputs available on the device, whether they’re touch input, pen, keyboard, mouse or Xbox controller.

You can write beautiful apps with new composition APIs. You can also create animations (including keyframe animations) and apply effects such as drop shadows, thumbnail lighting, blurs, opacity, scaling animation effects, hue rotation, parallaxing ListView items, Z-order scrolling, sepia, contrast and more. See these effects for yourself by cloning and running the WindowsUIDevLabs project on GitHub (bit.ly/2e3PDqo).

UWP apps can provide Live Tiles and notifications, as shown in Figure 2, to present at-a-glance information for your app. Live Tiles and notifications can boost app engagement by up to 20 percent because they bring users back to your app.

Figure 2 A Live Tile and a Notification

Adaptive Code Takes Advantage of the Strengths of the Device The UWP lets you tailor the experience to take advantage of the strengths of various device types. You can write adaptive code that takes advantage of the capabilities of a specific device only when the app is running on that type of device, or target your app to a specific type of device. Visual Studio filters the available APIs to those associated with the device category you target. The Windows Store scopes available apps to the type of device being used. UWP apps are available on all devices.

Cortana APIs provide the ability to add voice commands to your app. Register app actions on the Cortana portal and Cortana will suggest actions that involve your app at the right time and place.

To help you write engaging apps for the UWP, Visual Studio provides exceptional coding and debugging tooling. Resources are available to help you write your app, such as code samples (bit.ly/1RhG46l), task snippets (bit.ly/2dINSo9), a vibrant community of developers from which you can get help, and libraries such as the UWP Community Toolkit (bit.ly/2b1PAJY), which provides animations, custom controls, and services for Twitter and Facebook. You can then produce one package that can be installed on all UWP-based devices.

Get Your App into Customer Hands with Less Friction The Windows Store reduces your cost per install by making it easier to distribute to a wider audience. It handles sales across geographic boundaries, which frees you from having to understand the banking infrastructure and tax laws in other countries and reduces the friction of reaching regions outside of your own. The Store also handles licensing for apps that share content between devices so you don’t have to build out infrastructure to handle those concerns.

The Store provides the experiences to which you’re accustomed from an app store, such as automatic updates, licensing, trials and so on. It casts a large net by making your app available to hundreds of millions of Windows 10 users.

The UWP provides the functionality to create rich apps, run them across a wide variety of devices and make them available to your customers. As you’ll see, it isn’t difficult to target the UWP from Xamarin.

Add a UWP Project to Your Existing Xamarin.Forms App

I’ll show you how a UWP project was added to James Montemagno’s stock ticker code sample on GitHub (bit.ly/2dYHEvs), which is a Xamarin.Forms solution that targets iOS, Android and the UWP.

I’m going to assume that you have Visual Studio 2015 Update 3 running on Windows 10 and that Xamarin is installed and up-to- date.

If you want to follow along with the steps, clone the code sample, remove the MyStocks.Forms.UWP project and add it back with the following steps:

1. Add a UWP project to the existing Xamarin.Forms solution.
2. Add a reference from the UWP project to Xamarin.Forms.
3. Add a reference to the Portable Class Library (PCL) that contains the shared forms.
4. Modify the code in the UWP project to use Xamarin.Forms, and load the app from the shared PCL project.

Let’s work through these one step at a time.

Add a Blank UWP Project to Your Existing Xamarin.Forms Solution Once you’ve loaded the MyStocks.Forms solution into Visual Studio, right-click the solution node and choose Add | New Project. In the Add New Project dialog, navigate to Visual C# | Windows | Universal and select Blank App (Universal Windows). Name the project MyStocks.Forms.UWP and click OK.

Next, you’ll see the New Universal Windows Project dialog, which asks you to choose the minimum platform versions that your UWP app will support. Click OK to select the defaults.

Now that you’ve added a UWP project to your Xamarin solution, right-click the new UWP project’s References node and select Manage NuGet Packages.

When the NuGet package window appears, select Browse, type “forms” into the search box to narrow the list and then select Xamarin.Forms from the list. Select the latest stable version from the dropdown on the right, note which version it is and click Install (see Figure 3).

Figure 3 The NuGet Package Manager

Ensure Your Projects Target the Same Version If you have other Xamarin.Forms projects in your solution, ensure they’re using the same version of Xamarin.Forms that you added to your UWP project. To see what version of Xamarin.Forms the other projects are using, select a project (for example, MyStocks.Forms.Android), right-click its References node and choose Manage NuGet Packages. Ensure Installed is selected, type “forms” into the search box to narrow the list and then find Xamarin.Forms in the list of installed NuGet packages. Verify that the version matches the version of Xamarin.Forms you’re using in your MyStocks.UWP project. Update it if it’s an earlier version (see Figure 4).

Figure 4 Verifying the Versions of Xamarin.Forms Match

Add a Reference to the PCL that Contains the Shared Forms You want the UI for the UWP project to use the shared UI in the Xamarin.Forms project. To accomplish that, the new UWP project needs to reference the PCL that contains the shared forms. In the My.Stocks.Forms.UWP project, right-click the References node and choose Add Reference. In the Reference Manager that appears, ensure that Projects | Solution is selected, and then select MyStocks.Forms to add the reference (see Figure 5).

Figure 5 Adding a Reference to the Portable Class Library

Modify the Code in the UWP Project to Use Xamarin.Forms and Load the App from the Shared PCL Project Now I need to override code in the app template, which was added as part of the new UWP project, so it will use Xamarin.Forms to load the app from the shared PCL project. Insert the following highlighted code into the start of App::OnLaunched, which is in MyStocks.Forms.UWP | App.xaml | App.xaml.cs:

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
  // Initialize Xamarin.Forms here
  Xamarin.Forms.Forms.Init(e);
  #if DEBUG
  ...
}

In the MainPage constructor, which is in MyStocks.Forms.UWP | MainPage.xaml | MainPage.xaml.cs, add the following highlighted code to load the Xamarin.Forms project:

public MainPage()
{
  this.InitializeComponent();
  this.LoadApplication(new MyStocks.Forms.App());
}

In the same file, remove MainPage’s inheritance from Page:

public sealed partial class MainPage : Page

Then make the following changes to MainPage.xaml (MyStocks.Forms.UWP | MainPage.xaml):

• Inside the <Page> tag, add: xmlns:forms=“using:Xamarin.Forms.Platform.UWP”:

<Page
    x:Class="MyStocks.Forms.UWP.MainPage"
    xmlns:forms="using:Xamarin.Forms.Platform.UWP"
    ...

• Change the opening <Page> tag to <forms:WindowsPage and ensure that the closing tag changes from </Page> to </forms:WindowsPage>

Now the page will inherit from Xamarin.Forms.Platform.UWP.WindowsPage.

Add the MyStocks.Forms.UWP Project to the Build Configuration After adding a UWP project to your Xamarin.Forms project, ensure it’s configured to build. First, right-click on the MyStocks.Forms.UWP project node and select Set as StartUp project.

Then right-click on the solution node and select Configuration Manager. In the Configuration Manager dialog, ensure the MyStocks.Forms.UWP checkboxes for Build and Deploy are checked.

If you’ve been following these steps, you initially removed the MyStocks.Forms.UWP project. The new MyStocks.Forms.UWP project doesn’t have the background image  or the NuGet packages that were added to the original project to get the value of a stock symbol, access the Twitter API and so on. To view the result of the steps taken to add a UWP project to James Montemagno’s sample app, clone a fresh copy of his GitHub project at the link provided earlier, or install the following NuGet packages to your MyStocks.Forms.UWP project: linqtotwitter, Microsoft.Bcl, Microsoft.BCL.Build, Microsoft.Bcl.Compression, Microsoft.Net.Http, Newtonsoft.Json and Xam.Plugins.TextToSpeech.

You’ve now added a UWP project to your Xamarin solution. The UWP project will load and run the Xamarin.Forms app from the UWP Blank App template. Figure 6 shows the app running on Android, iOS and Windows 10.

Figure 6 App Running on Various OSes

Xamarin.Forms does the work of mapping controls from the shared forms project to the UWP project that was added. Xamarin.Forms also provides a way to introduce platform specificity, if you need to, while still sharing other parts of the UI. Check out Charles Petzold’s article, “Embedding Native Views in Your Xamarin.Forms Apps,” in this issue and Kevin Ashley’s September 2016 article, “Cross-Platform Productivity with Xamarin” (bit.ly/2dYKr8a), for more details.

Functionality specific to your UWP app, such as Live Tiles, custom icons, notifications and so on, will go in the UWP project.

Wrapping Up

If you aren’t using Xamarin.Forms for your UI, you can still add a UWP project to your solution. You can share code using a Shared Asset Project, PCL or .NET Standard Library. See “Building Cross-Platform Applications” on the Xamarin developer site (bit.ly/2e3bV0C) for information about best practices.

Microsoft bought Xamarin and continues to invest in the open source project (bit.ly/1MZsCFE). We encourage your feedback and contributions!

Tyler Whitney is a senior content developer at Microsoft. He’s written about Windows Embedded Compact and now writes about Windows 10 development.

Thanks to the following Microsoft technical experts for reviewing this article: Jim Cox, Norm Estabrook, James Montemagno and Jason Short
Jim Cox. Principal Program Manager at Microsoft.

Jason Short, Senior Program Manager at Microsoft.

James Montemagno, Xamarin Principal Program Manager at Microsoft.

Norm Estabrook (Senior Content Developer at Microsoft).