Now is the time to Develop Windows Universal Apps!

by Michael Crump on September 02, 2014

I’d like to take a moment and time travel back to late 2010, when Windows Phone 7 officially launched. Microsoft developers everywhere were excited that they could reuse their existing skillset and begin to build native mobile applications. Not only were Microsoft developers happy, but so was Telerik. We had been working closely with Microsoft to deliver a CTP of our Windows Phone control suite right at launch and become the first vendor to enter this space.

By mid-2011, Microsoft released the first public beta of Windows 8 to developers which included another SDK specific to the platform. Windows 8 was publicly released in mid-2012 and was a milestone in the company’s history as it was designed for touch. This meant Microsoft’s OS was headed for the tablet for the very first time. This was another victory for Microsoft developers as they could now develop for tablets running Windows 8. Again, Telerik had been working with Microsoft to deliver our Windows 8 control suite right at launch and we were the first commercial library available on the market.

Fast forward to //Build in April 2014, Microsoft acknowledged the convergence of Windows 8.1 and Windows Phone 8.1 and gave it the title of Windows Universal Apps. For the first time in history, you could now create applications that target the phone and tablet and share a single code base. It should come to no surprise that Telerik is yet again among the first vendors on the market to release a control suite for Windows Universal Apps. This shows our commitment over the years to Microsoft and, more importantly, to you as the developer. So now that we’ve had our history lesson, let’s go to class and learn more about Windows Universal Apps and how Telerik fits in.

Let’s begin by Looking at the Structure of a Universal App

Before we jump in, Windows Universal Apps require Visual Studio 2013 Update 2 or later. Once installed, expand the “Store Apps” node and you will see a category called “Universal Apps”. Select “Blank App” and give it a name. A blank app simply creates a single-page app that uses the Windows Runtime and targets both Windows and Windows Phone. The solution explorer looks like the following as shown in Figure 1.


Note that there are actually three projects created upon launch:

  1. Windows 8.1 App
  2. Windows Phone 8.1 App
  3. Shared Project – This is a container for code that runs on both platforms. Everything in this project is automatically included in both projects and in their build output.

If you look under references, then you will notice that both the Windows 8.1 and Windows Phone 8.1 have a reference to the Shared project. This is where the magic starts to happen. Notice that the App.xaml and App.xaml.cs is only included in the Shared project. By using preprocessor directives such as the following, we can isolate sections of code to a specific platform:

#if WINDOWS_PHONE_APP  //run Windows Phone specifc code #endif #if WINDOWS_APP  //run Windows specific code #endif
Now that we’ve examined the structure of an app, let’s dive deeper and add some functionality.

A Quick Windows Universal App Demo

If you examine the contents of the MainPage.xaml in each project, then the only difference you will see is how the background color is set in each project. Windows 8.1 defines it in a Grid, whereas Windows Phone 8.1 declares it in the Page. Either approach works, so for this demo, lets drag and drop the MainPage.xaml file to our shared project and delete it from our Windows Phone 8.1 project.

Go ahead and open the MainPage.xaml file from the Shared Project folder and take a look at the Toolbox and you will notice that Microsoft has supplied several controls that work just like they did in Windows 8 and Windows Phone 8. For the purpose of this demo, we are going to drag and drop a TextBlock onto the MainPage.xaml, and provide text and a font size. We can see our changes as we switch between Windows 8.1 and Windows Phone 8.1 in the designer as shown in Figure 2:


This application will run successfully if deployed to the Windows 8 simulator or Windows Phone emulator since the OnLaunched event in the App.xaml.cs has the following code looking for the MainPage file:

if (!rootFrame.Navigate(typeof(MainPage), e.Arguments))
    throw new Exception("Failed to create initial page");

Since both projects are using the Windows Runtime, you could even use some common classes previously only found in Windows 8 in the MainPage.xaml.cs. This would trigger an appropriate MessageDialog on either platform.

public MainPage()
    Loaded += MainPage_Loaded;
async void MainPage_Loaded(object sender, RoutedEventArgs e)
    var dialog = new MessageDialog("Telerik Rocks!");
    await dialog.ShowAsync();

Cleaning up our Shared Project

While we have a working application, as you continue to build Windows Universal Apps, you should adhere to the structure provided below to organize your code better. Using the HubApp as a Template, my Shared project now looks like Figure 3:

Here you can see we have the following folders:

  • Assets – Contains Images, Video, etc. that we would like each project to have access to.
  • Common – Is great for helper classes, process lifetime management, etc.
  • DataModel – Contains your data model which is specifically useful if you are using the MVVM pattern.
  • Strings – Store your .resw files to allow your application to be localized.

With a properly structured app, we are now ready to create an app!

But wait, something is missing. Where is my Chart, AutoCompleteBox and Rating control? What about a BusyIndicator that supports various animations instead of the one supplied by MS, or even a BusyIndicator that allows me to create my own animations. How about a customizable Date and Time Picker?

This is where Telerik fills in the gaps with Telerik UI for Universal Windows Apps.

Upon downloading and extracting it, you will have the binaries to reference all the UI controls mentioned earlier in your Windows Universal App, Help Documentation and a complete sample application that simulates a sales dashboard as shown in Figure 4.

Follow us