Developing for Modern Windows

Tips, tricks, and guides for developing on modern Windows platforms

Use Partial Classes to Share More Code in Universal Apps

Windows universal apps work across different Windows platforms. A universal app solution includes three projects – one for Windows Phone, one for Windows Store (desktops, laptops, and tablets – and various hybrids), and a shared project. Files in the shared project are included in both the Windows Phone app and the Windows Store app generated from the universal app solution.

The more code and data you put in the shared app the better – because you will need less platform-specific code and duplication. This article shows how to use partial classes to move more code into the shared project.

You can use conditional compiling to separate code, but it can get messy when overused, and you can’t use this for app pages. See the previous post on conditional compiling for universal apps.

Partial Classes

Typically, you’d define a class in a single code file (e.g. MyClass.cs or MyClass.vb):


public class MyClass()
{  
//entire class code goes here
}

However, you can use the partial keyword to split a class across multiple files:


public partial class MyClass()
{
//some class code goes here
}

The compiler will combine partial classes with the same name into a single class as if the code was all in the same file.

When you put a partial class in the shared project its code gets added to the corresponding partial class in the platform-specific projects.

If you look at the code behind file for any app page (e.g. MainPage.Xaml.cs) you'll see that they are partial classes. This is because the compiler merges the page's XAML code with the code behind to form a single class.

Sample Project

Overview

We will create a demo with a button. We want this button to behave the same when it's tapped regardless of platform, so we will put the button click handler in our shared project by using a partial class. Therefore we don't have to put handlers in our individual projects, which makes our code more modular and streamlined.

Since this technique is for universal apps, you'll need Visual Studio 2013 or higher. The Windows Phone SDK 8.1 is required to target universal apps, and if using Visual Studio Express you'll need the version Visual Studio Express for Windows. If you're new to Windows development and/or universal apps, please check out my article on creating a simple "Hello World" universal app if you're not sure how to start a new project.

To get started, create a new universal app project using the Blank App template, and call it PartialClassDemo.

Create the shared MainPage.cs

  1. Create a new class in the PartialClassDemo.Shared project called MainPage.cs.
  2. Open the new MainPage.cs and replace all the code inside with the following:


using System;
using System.Collections.Generic;
using System.Text;
using Windows.UI.Popups;
using Windows.UI.Xaml;

namespace PartialClassDemo
{
public sealed partial class MainPage
{
private void TestButton_Click(object sender, RoutedEventArgs e)
{
var msg = new MessageDialog("test", "success");
msg.ShowAsync();
}
}
}

That code sets up a partial MainPage.cs in your shared project, so that code above will be merged with both the Windows Phone and Windows Store versions of your universal app. It just displays a MessageDialog when a button is clicked.

Add the buttons

When you created this new project, Visual Studio added some default content, including MainPage.xaml in both the phone and Windows projects. We want to add a button to each of these versions of MainPage.xaml. Past the following XAML code between the <Grid> and </Grid> tags in both versions of MainPage.xaml (one in the Windows Phone project and one in the Windows Store project):


<Button x:Name="TestButton" HorizontalAlignment="Center" Content="click me" Click="TestButton_Click"/>

Now each version of our MainPage has a button, and clicking the button in either version will run the same code in the shared project and display a message dialog!

Try it out by launching the app and clicking the button. Switch the startup project between the phone and Windows projects to test them both.

As you'll notice, each platform has a different style of MessageDialog that suits its own UI even though the code to display it is the same for both.

What next?

This example is just the tip of the iceberg. Any code that should be shared between both versions of your app can be placed in the shared project, saving you a lot of time and effort. This technique lets you further distance the UI from the code behind so that the UI, which will tend to be quite different for the different platforms, can still interact with the same code behind.

Tags: , ,

One Response to “Use Partial Classes to Share More Code in Universal Apps”

  1. Jamie says:

    I’m going to try this on a Universal project I’ve started.

    I have a LOT of shared resources in resource dictionaries (which, as you say is best to keep shared stuff in the shared project where possible), and I’ve been having trouble wiring up tap or hold events from listviews where the data templates are helped in the shared project.

    Thanks 🙂

Leave a Reply

Your email address will not be published.