[Windows Store] Universal Apps across all Windows devices

Posted on Edited on In , , Disqus:

At the BUILD 2014 conference, Microsoft talked about the Universal App — an app that can run on both Windows and Windows Phone

And right now, starting with the Update 2 RC of Visual Studio 2013, you can already build an app like that

1. Updating Visual Studio 2013 to Update 2 RC

April 13, 2014: download link: http://blogs.msdn.com/b/windowsazure/archive/2014/04/09/deep-dive-visual-studio-2013-update-2-rc-and-azure-sdk-2-3.aspx

2. Creating a Universal Project

Once it’s installed, you get a few new options in Visual Studio

Pick New Project

Pick Visual C# > Store Apps > Universal Apps

Once the project is created, you get a Solution like the one in the picture below

Just looking at it we already know: a Windows 8.1 Project and a Windows Phone 8.1 project

And the “Shared” Project holds the shared files, specifically the Model and View Model

Let’s build a simple RSS news reader app

3. Building the Model and ViewModel

Create 2 new folders named Model and ViewModel in the Shared Project

Say we take this page as our news source: http://nhipsongso.tuoitre.vn/RssFeeds.aspx?ChannelID=430

Then the Model consists of a title and a content

We create a News class with 2 Properties, Title and Content, backed by 2 variables, title and content

Create the class file in the “Model” Folder

The result

Create 2 private variables and use Resharper to generate the Properties

Oh, I forgot — you have to inherit from the INotifyPropertyChanged Interface

Then use Resharper’s Generate Code

Pick Property

Pick exactly what’s in the picture and hit finish

The Model is done

Create a NewsViewModel class in the ViewModel Folder

In that class, declare an ObservableCollection

Create one more class, StaticViewModels, in the ViewModel Folder. This class file holds the static ViewModel variables we will use across the whole App (previously you would declare them directly in App.xaml.cs; now we gather them in one place so they are easier to manage)

In this file, declare an Instance of NewsViewModel

Create a Utilities folder and, inside it, a StaticMethod class. We’ll stuff the HTML-fetching code in here

In here, type the following

Open NewsViewModel again and add a GetNewsAsyncTask method

The HtmlDocument library comes from HtmlAgilityPack on Nuget; you have to add it to the References of the Windows 8.1 Project

Once that’s done, open the MainPage.xaml file of the Windows 8.1 Project and add a ListBox to display the news list

Then open the Code Behind file and add the following lines:

Run it

4. Building the Template

Open the MainPage.xaml file in the Windows 8.1 Project

Right click the ListBox > Edit Additional Template > Create Empty

In the dialog that shows up, name it DataTemplate

Edit it into this

Hit the Local Machine button to run it

Great, isn’t it?

5. Doing the same thing on Windows Phone 8.1

Open the MainPage.xaml file of the Windows Phone 8.1 Project, copy and paste the parts that are the same

Then open the code behind and do the same

Switch the Startup Project

Oh no, an error :’(

When you set the Startup Project to Windows Phone, since the Windows Phone References don’t have the HtmlAgilityPack library yet, every reference to that library errors out

We add that library through Nuget

An error shows up

It complains that this package contains no file targeting Windows Phone 8.1.

Because it shares one library set with Windows 8.1, Windows Phone 8.1 is able to add DLLs that are only compatible with Windows 8.1.

Pick References > Add References…

Pick Browse > hit the Browse button, find the bin > Debug folder of Windows 8.1 and add the HtmlAgilityPack library

And once it’s added, voila, every error is gone and the code is “green” again

Note: copy the Annotation.cs file from the Property folder of the Windows 8.1 Project and Paste it anywhere in the Windows Phone Project (do this Copy and Paste in the Solution Explorer). If you have Resharper, you can let Resharper regenerate this file by deleting the OnPropertyChanged methods in the News Model and letting Resharper Implement it again

Run the WP8.1 Project

Done — you just built a UniversalApp yourself

6. Sharing XAML and CodeBehind

As you can see in the picture above, the XAML and CodeBehind in both Projects are very similar, almost unchanged

A long time ago, at a training session in the Microsoft office, someone asked “why not share the XAML for both Windows 8 and Windows Phone?”. The answer back then was that Windows 8 and Windows Phone have slightly different library sets, so some controls differ too. Now Microsoft has brought that “sharing” capability

Create a Folder named View in the Shared Project

Add New a BlankPage and name it MainPage

Copy and Paste the code from the Windows Phone Project (both the XAML and the code Behind)

At the very top of the XAML Editor you’ll see an interesting Drop down list

Here you can change the View type this XAML Code is compiled against; in the picture Windows Phone is selected

Try switching it to Windows and you’ll see the Visual Editor UI change

Open App.xaml.cs, scroll down to line 98 and change it to View.MainPage

Set the Startup Project to Windows

Run it

Set the Startup Project to Windows Phone and hit run

That’s it — you now have one Page that renders on both UIs.

In future Blog posts I hope to explain more clearly which Controls are shared and how they render on the UI. In any case this is only a Release Candidate. Plenty will still change in the future.