Tag Archives: winrt

Building 2Day for Windows 8: under the hood

In this (long) post, I share some of the techniques I used to build 2Day for Windows 8 using C# and XAML.

2Day is a powerful todo-list app with synchronization capabilities. If you haven’t given it a try yet, grab it here for Windows 8 and here for Windows Phone.

placeit

Data access layer: SQLite (but not only)

No surprise here I’m using SQLite. Because I’m not big fan of SQL queries embedded deep in the C# code, I’m using sqlite-net (GitHub repo here) as the data access layer over SQLite. It’s very lightweight and provides a thin layer of abstraction. My business objects are decorated with attributes such as [PrimaryKey], [AutoIncrement], etc.

From the GitHub repository:

sqlite-net is an open source, minimal library to allow .NET and Mono applications to store data in SQLite 3 databases. It is written in C# and is meant to be simply compiled in with your projects. It was first designed to work with MonoTouch on the iPhone, but has grown up to work on all the platforms (Mono for Android, .NET, Silverlight, WP7, WinRT, Azure, etc.).

sqlite-net was designed as a quick and convenient database layer. Its design follows from these goals:

  • Very easy to integrate with existing projects and with MonoTouch projects.
  • Thin wrapper over SQLite and should be fast and efficient. (The library should not be the performance bottleneck of your queries.)
  • Very simple methods for executing CRUD operations and queries safely (using parameters) and for retrieving the results of those query in a strongly typed fashion.
  • Works with your data model without forcing you to change your classes. (Contains a small reflection-driven ORM layer.)
  • 0 dependencies aside from a compiled form of the sqlite2 library.

What I like: easy to setup, easy to use, no additional dependencies

SQLCompact (Windows Phone) vs SQLite (Windows 8)

The challenge I had here is that the Windows Phone version of 2Day relies on SQLCompact: back in the Windows Phone 7 days, this was the only option and I hadn’t the chance to upgrade so far to SQLite…

SQLCompact has a nice “automatic change tracking” feature: when you turn this on, your objects are tracked automatically by the data access layer (using the INotifyPropertyChanging interface). When you call Save() on the database, it knows exactly what objects must be updated. Pretty handy isn’t it ?

In the SQLite world, I created a small piece of code to mimicthis feature. The implementation is straightforward: I register change notification callsbacks (from INotifyPropertyChanged interface) and push updated objects in a list. When I want to save the changes, I just go over this list and send each update in the database.

Crash handler (and the invisible stack trace)

When 2Day has an unhanded exception, I try to achieve 3 goals:

  • mitigate the effect of the exception (decide whether the execution can continue or not)
  • inform the user “something” went wrong
  • log the maximum amount of information so that I can then fix the crash later on

The 8.1 update of WinRT introduced the ability to setup crash handler in a WinRT XAML app:

?View Code CSHARP
1
2
3
4
5
Application.Current.UnhandledException += this.OnUnhandledException;
 
private void OnUnhandledException(object sender, UnhandledExceptionEventArgs e)
{
}

 However, this technique has an important limitation: most of the time the stack trace will be null or empty (apparently due to the interop between the native and managed world). That’s a big deal because when the exception will be logged it will not have the stack trace. Good luck with that to debug a NullReferenceException occurring somewhere in your app…

The Windows Store Dev Center also some quality diagnostic tool. Basically, crashes of your app are sent automatically to Microsoft. You can read more about this here (picture from the blog post):

devcenter-crash-report

GridView and drag/drop support

The main page in 2Day make heavy use of the GridView control. Here are some highlights about its usage:

  • Basic options
    • IsItemClickEnabled = true
    • SelectionMode = multiple
    • CanDragItems = true
  • Items panel
    • ItemsWrapGrid to have pixel-based UI virtualization

I wrote a “DragDropManager” tool that listens to drag events on the GridView and provide this nice drag/drop experience to organize your tasks:

The collection databound to the GridView is a custom collection I was already using on the Windows Phone version. It manages groups and tasks with user defined sort options.

Message box and the “Access Denied” exception

The first versions of 2Day for Windows 8 had a bug that took me a while to fix. The exception message was “Access is denied”. I first thought it was related to I/O operation but it turns out it was related to the use of the message box !

Basically, you will get an “Access is denied” exception if you try to open a message box while one is already open. That sound silly to do that but I can assure you this kind happens once the app get bigger… and display message box in case of unhandled exception (as it was my case).

A nice blog post by fellow French Microsoft evangelist Eric Vernie provides a workaround here (in French). The idea is to use a SemaphoreSlim structure that we await when we try to display a message box. If 2 (or more) message boxes are shown, they will be shown one after the other.

Live tiles (and how to make it simple)

 I’m using the great Live Tile library that is available in the Windows 8 App tiles and badge sample. It makes very easy to consume a specific tile template in a type safe manner (instead of building a raw XML string).

For example in order to have this live tile:

livetile

Which require this XML:

1
2
3
4
5
6
7
8
9
10
<tile>
  <visual version="2">
    <binding template="TileSquare150x150Text01">
      <text id="1">Text Field 1 (larger text)</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
    </binding>  
  </visual>
</tile>

You can just write in C#:

?View Code CSHARP
1
2
3
4
5
var mediumTile = TileContentFactory.CreateTileSquare150x150Text01();
mediumTile.TextHeading.Text = "heading"
mediumTile.TextBody1.Text = "title1";
mediumTile.TextBody2.Text = "title2";
mediumTile.TextBody3.Text = "title3";

Cool, isn’t it ?

Code sharing with Windows Phone

No surprise here, code sharing with the Windows Phone version is achieved through Portable Class Libraries and Linked Files. However, because of the historical choice of SQLCompact in the Windows Phone version, the data model is not shared (but implemented twice).

Of course the whole XAML UI is implemented twice. In a certain way, that does make sense when we see how different the UI are on both platforms:

2day-win8-vs-wp8

Synchronization (using a Node.js powered backend running on Azure!)

2Day for Windows 8 introduced a new synchronization option for the users of the app: 2Day Cloud. The backend powering this new sync system is Azure Mobile Services (AMS).

ams

I’m using the following services of AMS:

  • Authentication with Microsoft Account
  • Single sign on, for Windows 8 device. You don’t have to even type your email or password
  • Data, to store tasks, folders and other useful information
  • Scripts, using a JavaScript (NodeJS) backend. I’m using this to filter each read query on the database to fetch only the items owned by specific users, storing update dates, etc.
  • Scheduler, to remove old items from the database in order to optimize its size

Both the Windows 8 and the Windows Phone version uses the C# Azure Mobile Services SDK, with 100% code sharing between the two (using linked files).

Miscellaneous control

Other controls or libraries used in 2Day for Windows 8:

  • My simple AppBarHint control (GitHub repo)
  • Callisto, a library built by Microsoft XAML team member Tim Heuer, used in 2Day to have flying popups (GitHub repo)
  • MarkedUp as the analytics engine in the Windows 8 version. The tool is free for up to 10, 000 unique users (see pricing details here) and extremely simple to add in the app:
?View Code CSHARP
1
MarkedUp.AnalyticClient.Initialize(WinConstants.MarkedUpId);

The Windows Phone version of 2Day uses Flurry but it will be soon updated to MarkedUp as well for coherence reason.

I hope you enjoyed this technical overview of 2Day for Windows 8. Please feel free to write a comment to share your thoughts or are questions about specific technical implementation details :-)

Hacking for fun: porting a Silverlight Windows Phone app to WinRT in 9hours

Today I woke up and took a look outside: the weather was so awful I decided to so something cool, at home. Today, I ported a Silverlight Windows Phone 7 game to WinRT in 9 hours. In this post, I share the “journal” I wrote will porting the app so that you can follow this process with many detail. I hope you will learn interesting stuff. Warning: the post is much longer than usual :-)

Context:

  • The original Windows Phone application is a Silverlight game called Touch’n’Match. This game is available in the marketplace for free. The goal is to select appropriate items from a board creating pairs or sequences. The fastest the player creates pairs, the more points he has.
  • I’m not creating a common code base across the 2 platforms. I’m just “converting” the Silverlight version to WinRT.
  • I’m not targeting a “ready to publish” version of the app today. I just want to be able to play the game on my //BUILD/ slate :-)

Here is a quick video showing the game in action using the WP7 emulator:

Play Video

The video of the game running on the //BUILD/ slate is available at the end of this article :-)

Tooling used:

  • Windows 8 Consumer Preview
  • Visual Studio 2011 Beta + Updates
  • Visual Studio 2010 + SP1
  • Windows Phone SDK 7.1.1 for Windows 8 support
  • Resharper 7 EAP (I’m a big fan of R# and it’s going to be very helpful to map and adjust the namespaces…)

Now, let’s the hackaton begin :D

9:50AM

The source code of Touch’N’Match is stored in SVN using Assembla. I’m performing a clean check out the trunk in my personal folder. I launch VS2010 to build the app and make sure the Windows Phone version works properly:

Everything seems ok. It’s time to launch VS11:

And to create a new project:

9:55AM

I’m going to start porting all the C# which is not linked to XAML. I expect to do that fairly quickly, the only thing I will have to rewrite (at least I think about at this time) is the part which deals with the isolated storage (API in SL for Windows Phone and WinRT are very different even though the principles are very similar).

I’m simply using drag’n’drop between the Windows Explorer and VS11 to add the files in the WinRT project.

I start with what I found the simple first, for example I start by porting the converters used in the XAML of the game. Because the interface has changed from:

?View Code CSHARP
1
2
3
4
5
public interface IValueConverter
{
    object Convert(object value, Type targetType, object parameter, CultureInfo culture);
    object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture);
}

To:

?View Code CSHARP
1
2
3
4
5
public interface IValueConverter
{
    object Convert(object value, Type targetType, object parameter, string language);
    object ConvertBack(object value, Type targetType, object parameter, string language);
}

I’m simply doing a “Search and replace” to fix all those errors in one shot:

The Model folder contains just simple C# code, I have nothing special to do (which is nice!)

The Windows Phone version contains a class named ThemeService. This class was responsible for giving colors to use in the app based on the current accent color of the phone. In WinRT we don’t have the concept of accent colors. The app is supposed to ship with its own accent color. So I’m removing this part entirely for the moment.

The ViewModel folder is linked to the MVVM Light framework. I already have the Windows 8 version installed on my machine, so I just have to reference the new assemblies:

Because I’m Resharper EAP for VS11 I can see very quickly the amount of errors when I open a file, using the indicators sitting next to the vertical scrollbars:

I’m now facing problems with the string resources. In the Silverlight version the app was localized the all the strings contained in .resx files. We were then able to access them using the types auto-generated and a binding in the XAML. This is no longer possible in WinRT. So the first thing I do is to create the new .resw files and put the strings there:

I then create a class to be able to access the string from C# (because the new .resw file does not generate static type automatically):

?View Code CSHARP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public static class AppResources
{
    private static readonly ResourceLoader resourceLoader;
 
    static AppResources()
    {
        resourceLoader = new ResourceLoader("PrototypeZero/AppResources");
    }
 
    public static string GetResources(string key)
    {
        if (string.IsNullOrEmpty(key))
            throw new ArgumentNullException("key");
 
        return resourceLoader.GetString(key);
    }
}

I don’t know if the handling of .resw is going to change or not with the final version of VS11. If it does not I think it could be a good idea to use T4 templates to automatically generates the static types (that would make the porting much easier). But this is out of the scope of this post :-)

I know have to change all the AppResources.Key to AppResources.GetString(Key)…

I then encountered an error with a call to ToShortDateTimeString() on a DateTime object. I replaced this call with ToString(“d”) which is supposed to do the same thing. It looks like all formatting and parsing of DateTime structure is now handle by the DateTimeFormatter class.

10:35AM

Conversion of the following folders is completed:

  • Converters
  • Model
  • Services
  • ViewModel

I’m now going to deal with the isolated storage… The API used in the Silverlight app was very simple:

?View Code CSHARP
1
2
3
4
5
6
public class IsolatedStorageHelper
{
    T Load<T>(string name) where T : class, new();
    void Save<T>(string name, T instance);
    void Delete(string name);
}

The conversion was not very complicated. All synchronous methods became asynchronous and I use the new API available in WinRT. One noticeable thing is the fact that we don’t have a File.Exists() API, so I ended up writing the following helper method:

?View Code CSHARP
1
2
3
4
5
6
7
8
9
10
11
12
private async static Task<StorageFile> GetFile(string name)
{
    var folder = ApplicationData.Current.LocalFolder;
    try
    {
        return await folder.GetFileAsync(name);
    }
    catch (FileNotFoundException)
    {
        return null;
    }
}

And the final API in the WinRT project:

?View Code CSHARP
1
2
3
4
5
6
public class IsolateStorageHelper
{
    async Task<T> Load<T>(string name) where T : class, new();
    async void Save<T>(string name, T objectToSave);
    async void Delete(string name);
}

Notice that now, all the methods are asynchronous…

10:50AM

All the code ported in the WinRT project now builds with success. Let’s bring more code in the WinRT project…

I found out that the Storyboard.SetTargetProperty API has changed:

Silverlight version: Storyboard.SetTargetProperty(Timeline, PropertyPath)

WinRT version: Storyboard.SetTargetProperty(Timeline, string)

Also, the EasingFunction property of the DoubleAnimation type has changed from IEasingFunction (Silverlight) to EasingFunctionBase (WinRT).

Finally the GeneralTransform.Transform(Point) API has changed to GeneralTransform.TransformPoint(Point)

11:00AM

It looks like it’s now time to bring some XAML ;-)

The home page of the WP7 version was using a pivot control. I don’t need a pivot and I can display everything on the screen at once. So I’m just replacing the PivotControl with a grid of 3 columns.

The issue I faced while moving the first XAML code was due do localization. In the Silverlight version we used a very common localization approach using a binding to a static resource:

1
<Button Content="{Binding Path=LocalizedResources.OnePlayer, Source={StaticResource LocalizedStrings}}"/>

It looks like it’s not that easy to do that in WinRT… I looked up on the Internet and found this post. Because I’m lucky, Tim Heuer a Program Manager on the XAML team replied 3 days ago to explain how localization now works in XAML WinRT apps. Here is how it works (full documentation available here):

  • Assign a x:Uid to the XAML element you want to localize (for example x:Uid=”buttonOnePlayer”)
  • Create a resource in the resw file with a key buttonOnePlayer.Content (because we want to set the Content property of the button)
  • The resource will be automatically take at runtime

I think I like this approach even though it is too early to come with a conclusion. I would like to have more tooling to pick the resources from the resw right from the XAML editor…

The other thing I must deal with is the fact that the Silverlight version was using multiple behaviors:

This is not available out of the box in WinRT. I found a post describing an approach the port the Silverlight code to WinRT but I didn’t wanted to try it today. So my approach is to find a way to remove each those behaviors…

The Silverlight game was created with the Windows Phone 7.0 SDK, based on Silverlight 3. At this time there was no Command property available on a Button. This is no longer the case and of course neither the case in WinRT. So I can already fix a lot of them.

The other usages of behaviors are trickier and I will see how I fix them later…

A TriggerAction NavigateToPageAction was used to nagivate from page to page right from the XAML. In order to enable navigation from my ViewModel classes, I created a NavigationService class:

?View Code CSHARP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public static class NavigationService
{
    private static Frame rootFrame;
 
    public static void Initialize(Frame frame)
    {
        rootFrame = frame;
    }
 
    public static bool Navigate<T>(object parameter = null)
    {
        var type = typeof(T);
 
        return Navigate(type, parameter);
    }
 
    public static bool Navigate(Type source, object parameter = null)
    {
        return rootFrame.Navigate(source, parameter);
    }
}

Of course this class should be hidden behind an interface to improve testability of ViewModel classes, but again, this is out of the scope of this article…

12:05PM

It’s time to take a look at the most complex page of the app…

The first step was to port the Resources section where converters and storyboard were defined. It was simply a copy-paste from VS2010 to VS11 :-)

Then I copy-paste the content of the page, and started to fix problems:

  • I updated the localization using the techniques I described before
  • I commented (temporarily of course) the use of Triggers and Actions
  • I added a resource dictionary which was missing from the VS11 solution
  • I updated the resource usage, the Silverlight version had reference to phone-specific resources (like PhoneBackgroundBrush…)

I fired Blend in order to find out the new resources available. Unfortunately for me I started by an error message when I wanted to create a new WinRT project or opened an existing one:

I looked up on the Internet but I cannot find the source of this issue. The most interesting thread is this one on MSDN forums… but it does not fix my issue.

So I ended up creating a new folder in the C:\Program Files (x86)\MSBuild\Microsoft\WindowsXaml by copying the V11.0 folder… It was enough to have Blend working like a charm:

And I can see what resources are available in WinRT:

The next step is to use the Find & Replace dialog to fix all the old references… Here is the mapping I used:

Silverlight for Windows Phone XAML WinRT
PhoneForegroundBrush AppBarItemForegroundBrush
PhoneBackgroundBrush ApplicationPageBackgroundBrush
PhoneContrastBackgroundBrush ApplicationHoverTextBrush
PhoneDisabledBrush ControlDisabledBrush
PhoneHorizontalMargin 12,0
PhoneVerticalMargin 0,12

1:00PM

I finally have something which can be launched (sorry for the ugly red background, I was just testing resource picking :p):

It’s time to take a break :-)

2:30PM

I’m back. Even though I was able to launch the app before the break it was not yet functional… I commented a lot of things in the XAML just to make it build. In particular, I know must solve the an issue with sound playback: the WP7 was using an TriggerAction to play a sound. This TriggerAction was used directly in the XAML to play sound when a button was click for example.

3:30PM

I just spent about 1 hour trying to play sound in the app but I cannot get it working! I can play sound if I instantiate a MediaElement in the XAML, but if the MediaElement is instantiated in code, it doesn’t work. Because this issue is driving me crazy, I’m just assuming the version of today will be without sound :D

4:00PM

Another use of the behavior in the WP7 version: switch the current state of a control based on the value of an enum. I’m replacing the behavior with some code:

  • I created a custom control which has the enumeration as a dependency property
  • This dependency property is bound to the enumeration defined in the ViewModel
  • This dependency property has a PropertyChangedHandler callback defined to be notified each time its value change
  • When the value of the enum change, I manually update the current state (VisualStateManager.GoToState)

5:00PM

The idea is described previously is supposed to work… but it doesn’t!

So after spending 30minutes trying to figure out why the animation between the states wasn’t working (+ other strange UI issues) I decided to recreate the template in Blend. It took me about 5minutes using Blend 4 for the original WP7 version and Blend 5 for the new WinRT version side by side:

I now have to fix another issue: the WP7 hardcoded the layout of each item on the board (the number of columns and row was fix). I’m going to update that to be more flexible…

6:30PM

The hardcoded stuff was more complicated than expected but it’s now working… It was mainly due to the fact that we hardcoded the number of columns and rows in the WP7 version. Now because the resolution of the screen can change, I have to compute how many items fit on the board…

Another control was still missing and was used to display the scores. I create a new UserControl in VS11 and copy/paste the XAML from VS2010. I must do the usual work:

  • Update the resource to have the appropriate mapping in the .resw file
  • Adjust namespace
  • Remove behavior and replace with standard Command
  • Remove sound effects

7:15PM

At this point, only one minor issue is still bothering me, and I’m starting to get tired… When the app there was a DoubleAnimation animating the FontSize property of a TextBlock element. This does not work in WinRT… Because I don’t want to waste time finding out, I’m just using instead a ScaleTransform to achieve the same effect :-)

7:35PM

I think it’s all for today. I can now launch the app and play the game it was my original objective !

Here is a video showing me playing the game:

Play Video

Conclusion

First of all, I’m kind of happy I finally had the occasion to jump into the WinRT world. Porting this app was a very interesting experience even though I must admit I was kind of angry sometimes!

Because I’m very familiar with XAML and C# it was easy to get into the WinRT world. Here is a summary of the main changes I made today between the 2 versions:

  • Adjust namespaces
  • Rewrite the isolate storage layer
  • Remove any dependency toward behaviors (TriggerAction / Behavior<T>…)
  • Rewrite a part of the game engine because the WP7 version hardcoded the number of items on the board

I was able to reuse most of the XAML, but I think this is true because the app was a game. I have another app I’m thinking to port in WinRT and I think it will need a major rewrite of its UI to leverage the size of the screen.

I hope your learnt interesting things in this post. Feel free to let a comment if you have any specific question.

A lap around Team Foundation Service online

Back in September at //BUILD/ I got an invitation code for a new cloud service powered by Windows Azure: Team Foundation Service. A few days after I created an account but I didn’t had the chance until today to really use it. Now that I have some extra-time + an interesting project (involving Windows 8 and Kinect…) it’s the perfect moment to get started. In this post, I share a couple of images (click any of them for full resolution) to show you what TFS online looks like.

Get a TFS online account

TFS online is available in as Preview as requires an invitation code to get in. If you don’t have a code, you can request on the website: https://tfspreview.com/_account/Signup

I have no idea how long it can take to get an invitation code now… Once you have your code, you can create your account and pickup your server URL: https://your-server-name.tfspreview.com.

Log to TFS online

Once you have created an account, it’s time to log in. To do so, simply navigate to the URL your created previously and you will be prompted for your credentials:

You will then land on the home page of your account:

Create a new team project

You can now create a new team project. You must pick-up a name (which cannot be changed when the project is created) as well as the process template you want to use. In the preview, you have the following templates available:

  • Microsoft Visual Studio Scrum 2.0 – Preview 3
  • MSF for Agile Software Development 6.0 – Preview 3
  • MSF for CMMI Software Development 6.0 – Preview 3

I like the dialog when the message when the creation completes :-)

Connect to TFS online from VS11

Now that the configuration stage is completed, it’s time to log in to TFS from Visual Studio 11.  All I had to do is to open the Team Explorer

And then configure the server URL:

Then the Team Explorer dialog is ready:

Check-in some code

Just for the demo, I created a new WinRT XAML application and check the “Add to source control” checkbox during the creation of the project. Visual Studio asked me where to store this new project:

Then using the Team Explorer, I choose the Source Control Explorer in order to check-in the code, and I got this new dialog right in the Team Explorer panel:

Which in my opinion is very nice and better than the previous version.

Code review

We know have the ability to request a code review right from the Team Explorer. This is another very nice feature:

Project home page

Because I chose the agile process template, the project homepage is “agile-oriented”:

Conclusion

This post was a very quick overview of what Team Foundation Service online looks like. I didn’t dig in any specific feature but I wanted to show you how it looks like. The experience from Visual Studio 11 is very straightforward and the new Team Explorer dialog easy and powerful.

Of course the benefits of TFS in Visual Studio 11 are now restricted in Team Foundation Service Online, it was just easy for me to do so.