Nick's .NET Travels

Continually looking for the yellow brick road so I can catch me a wizard....

Debugging WebView in a Windows Phone application

In a previous post, Debugging Internet Explorer on Windows Phone 8.1, I covered how you could use the new debugging support for IE on Windows Phone to diagnose rendering issues. What I didn’t cover is how you could debug web pages when they’re hosted within an application using the WebView control.

As we’re now building for Windows XAML, we can actually use the same mechanism that’s available for Windows 8 applications (see for instructions). All we need to do is change the Application process option under Debug.


Set this to Script and when you debug your XAML application Visual Studio will attach to the WebView allowing you to debug your script and DOM.

//learn/ Windows Phone – How to Register

Following a conversation with another developer last week I realised that it’s not particularly obvious how to register for the upcoming //learn/ Windows Phone event. If you haven’t heard about this event it’s an online webcast series hosted by Microsoft and delivered by MVPs in a number of different languages (hopefully one that suits you!). Over 6 hours you’ll learn about a lot of the key new features of Windows Phone 8.1 and how you can build awesome Universal applications for the Windows platform. If this sounds interesting, here’s how you register.

Step 1:    Go to

Step 2:    Scroll down until you find the section entitled “Find events and consulting times”


Step 3:    Select your preferred language (in this case English)


Step 4:    Select “Online” from the second dropdown


Step 5:     DON’T select Country as this will most likely eliminate all online events


Step 6:     Scroll down to see the list of available events and click through on the appropriate Register button for the //learn/ event


Note:    If you want to see the full list of languages available for //learn/ reset the Language dropdown, whilst leaving the middle dropdown set to “Online”.


Look forward to seeing you all online on the 24th April.

Important: Please make sure you have the correct times in your calendar – The English series starts at 11am Australian EST on the 24th (which is 6pm US PST on the 23rd!!!)

Debugging Internet Explorer on Windows Phone 8.1

The desktop version of Internet Explorer now has quite a good selection of developer tools available on any site by just pressing F12


Unfortunately on Windows Phone it’s been quite difficult to debug websites and so developers typically had to resort to alert(‘hello’); style debugging. With Update 2 for Visual Studio 2013 there is a new Debug menu item “Debug Windows Phone Internet Explorer”


This gives you the option to select the device/emulator and specify a launch site to debug.


The debugging experience is pretty cool as it’s actually in Visual Studio and includes the ability to set breakpoints and inspect variables.


Do also get the DOM Explorer


And the Javascript Console


This has got to make our jobs easier!

Upcoming Windows Platform Events for Windows and Windows Phone

Hot off the heals of //Build/ are a whole slew of local activities to get you updated and building for the new Windows platform (aka Windows and Windows Phone). Here they are:

24th April 2014    //Learn/ 

Whether you are a New Windows App Developer or an Experienced one- we have something for you!

Join us and take a deep dive into the latest features and technologies for Windows Phones, PCs and Tablets.//learn/ from our community in this “to the community, for the community and by the community” event where our MVPs and Expert Developers will help you better understand all that’s new with Windows.

Want to learn how to easily share code between store apps of different form factors? or Want to build your own Universal App? You are at the right place. These sessions will cover all the basic concepts to develop Universal Windows apps –One App for all form factors (PC, Table and Phone), Windows Phone 8.1 apps: the new application lifecycle, the new XAML etc.-with live chat and Q&A with our speakers

No need to dress up or step out you can watch and learn from the comforts of your home/office in this online webcast of informative sessions delivered by our community experts. That’s not all, our local experts will deliver these sessions in not 1 but 8 languages from across the globe(each accommodating the local time zone) to help you learn and leverage the new features and technologies.

So get started and Register Now!

17th May 2014    //Publish/

Locations TBA but Sydney, Melbourne and Brisbane are likely – more announcements to come

Whether you’re looking for expert guidance to help you get started or to cross the finish line at a local event, Microsoft experts are here to help you out every step of the way.

You can even win awards and prizes just for publishing before June 1, 2014.

Windows Phone 8.1 Developer Community Workshop

2nd May 2014 – Melbourne
9th May 2014 – Sydney
16th May 2014 - Brisbane

The Windows Phone 8.1 SDK is now available, and with it brings a wealth of new features and capabilities to take your Windows Phone applications further than before.

We've taken the best from //Build, it'll be a big day, jam packed with topics including:-

  1. The new WP 8.1 runtime
  2. Universal applications and building across WP 8.1 and Windows 8.1
  3. Bluetooth and NFC and the internet of things
  4. People Hub
  5. Notifications
  6. Javascript WinJS comes to phone Geofencing And more...

With trainers from Nokia, Microsoft, Build To Roam, and your local Windows Phone super stars, you don't want to miss out. Seats are limited, so get in fast.

Windows Phone 8.1 Emulator

In my previous post on Windows Phone 8.1 Developer Power Tools I looked at the developer power tools that are available from within Visual Studio. In this post we’ll look at the new Windows Phone 8.1 emulator and how it is an enabler for building better applications. The first thing to note is that there are a number of different emulator images available:


In this brave new world of varying screen sizes Windows Phone 8.1 departs from the fixed addressable width of 480 units. Instead each device has a scale factor which results in an effective resolution – in essence this means that two devices of the same size but differing hardware resolution will display the same amount of content, whereas two devices with the same resolution but differing size, will show more/less content depending on their relative size. What this means is that we now need emulators that not only vary in resolution but also in size.


Here you can see both the WVGA 4inch and the 1080p 6inch alongside each other – the beauty of it being in an emulator is that it can then be resized on the screen. The thing to notice is that the 1080p emulator has an additional column of tiles which will be a typical behaviour within applications when dealing with a higher effective resolution.

The next thing to note are the additional tools that are available. Here is a quick set of screenshots – we’ll go into more details on each of these in coming posts:

image image

image image

image image

 image image

Developing for Windows Phone 8.1 using XAML

By far the most common way to build Windows Phone applications is to use XAML and C# (or VB). In this case the XAML is a variant on Silverlight, which made it very easy for developers building Silverlight applications to switch across to building Windows Phone applications. 4 years on and the number of Silverlight developers has dropped (well at least the appeal of being a Silverlight developer has), and all the focus now is on becoming a Windows developer.

Unfortunately somewhere along the lines the Windows team decided that having three XAML frameworks (WPF, Silverlight and WP) wasn’t enough and that they needed to come up with another, only marginally different, framework. This we’ll refer to as Windows XAML.

With the announcements around Windows Phone 8.1 we’re entering a new time of convergence between phone and desktop applications where we can reuse not just the code (eg Portable Class Libraries and code file sharing) but also the XAML markup. This doesn’t come for free and relies on migrating our applications, or starting new applications, using Windows XAML instead of Silverlight.

So where does this leave us? What it means is that there are now three ways to develop for Windows Phone 8.1:

1) Windows Phone 8.0 Silverlight

Use this if you want maximum reach from a single application package; you don’t need or want to use any of the new platform features. This type of application will run on all Windows Phone 8.0 and 8.1 devices.

2) Windows Phone 8.1 Silverlight

By running the  “Retarget to Windows Phone 8.1” option after right-clicking on your application in Solution Explorer, your application will be migrated forward and will run against the new runtime. This means you can take advantage of some of the new platform features without having to redevelop your application. Whilst in most cases the retargeting process doesn’t modify the behaviour of your application, you will need to verify your application functionality before publishing the new version.

Once retargeted your application will only run on Windows Phone 8.1 devices, so it is recommended that you take a backup or a branch of your code and keep the 8.0 version alive to support those users who haven’t upgraded.

3) Windows Phone 8.1 Windows XAML

New applications, not wanting to maintain backward support for Windows Phone 8.0, can be created using Windows XAML. Ideally this would be all new applications as it allows for reuse across phone and tablet. The Universal projects concept introduced into Visual studio makes it easy to share code between projects, whilst still having platform specific functionality included in the “head” projects (ie the Windows and Windows Phone projects).

There is one thing that isn’t being highlighted is that each option has some limits on what you can and can’t do. 8.0 SL projects can’t access any of the new platform features. Windows XAML can’t do things like lock screen background provider….. it’s worth reading up on this before you make a decision

Windows Phone 8.1 Developer Power Tools

Last week at BUILD, Microsoft announced the availability of Visual Studio 2013 Update 2 RC, which includes the new Windows Phone 8.1 SDK.

I’m sure there will be a lot of blog posts talking about the new Universal project, the additional capabilities introduced in Windows Phone 8.1, Windows Phone XAML applications, the new application lifecycle model etc. I want to take a different approach and talk about some of the additional tools that come with the SDK.

One of the benefits Windows Phone development aligning with Windows app development is that more of the experiences along the development lifecycle will be similar. For example from the Project menu, Windows Phone developers now have the Store sub-menu with the ability to Create App Package.


One of the other additions is under the Tools menu, where there is a Windows Phone 8.1 sub-menu. This includes the Developer Power Tools, Developer Unlock and the Application Development tools. Whilst the last two are not new to Windows Phone development, they can now be reached from within Visual Studio.


The Developer Power Tools, not to be confused with the Windows Phone Power Tools, is a standalone tool which can be used to inspect what’s going on across either emulator or device. Help is available via MSDN


One of the most interesting thing about these tools is that you can start them, disconnect your device, put your application through its paces in real world scenarios, then reconnect and review the data at a later stage. For example, using the Performance Recorder you can check the data you want to record (eg CPU and Power) and hit Start. You can then disconnect the device, or in this case the emulator, open and run your application, and then reconnect and Stop the recording. This will prompt you to save a .etl file which includes all the data recorded.


The .etl file can then be opened using Windows Performance Analyzer (just double-click the file in Windows Explorer).


Hopefully these tools will help you track down issue in performance and usage of your application

Coded Design Time Data using Mvvmcross for Windows and Windows Phone

A question came in today regarding the use of design time data in conjunction with Mvvmcross. My initial response was “it just works” because I assumed that everyone does design time data in Blend….. and I’m still not sure why you won’t do this, since it promotes better design by giving designers the freedom to dictate the information architecture of each page. As it happens what they were really after was a way to plug in design time data that is generated in code. Without using mvvmcross this was relatively easy using a ViewModelLocator pattern – as part of serving up the view models, you could simply change the data source to be design time data when running in the dev tools. Because mvvmcross abstracts a lot of the work involved in associating pages with view models, it also means that it’s a bit harder to wire up coded design time data. In this post I’ll provide a summary (read “crude”) way I found to do this:

The assumption here is that your Mvvmcross project follows how Stuart describes a typical project in any of his getting started videos. Essentially this means a UI project (eg a Windows Phone project), that would contain your views (eg pages) and a Portable Class Library, that would contain your view models. There is also an App class in the PCL which is used to initialise mvvmcross. In this example we’re just going to work with the FirstView and its corresponding FirstViewModel but we’re going to add in support for a service which is used to populate data. Here’s the FirstViewModel:

public class FirstViewModel
    : MvxViewModel
    private IDataService Data { get; set; }

    public FirstViewModel(IDataService data)
        Data = data;

    public string Hello
        get { return Data!=null?Data.TestData:"Missing"; }

The IDataService has two implementations: DataService and DesignData, as illustrated here:

public interface IDataService
    string TestData { get; }

public class DesignData : IDataService
    public string TestData
            return "Designtime";

public class DataService:IDataService
    public string TestData
            return "Runtime";

At runtime we don’t need to worry about creating an instance of the DataService as it is automatically picked up by mvvmcross and injected into the FirstViewModel constructor. However, the DesignData is a little harder to use. At design time we somehow have to coerce mvvmcross to generate the FirstViewModel and populate it with an instance of DesignData. One option would be to go down the ViewModelLocator path again and use it only at design time to create our view model using design time data. However, this is rather clumsy given we have a perfectly good DI framework that we can leverage. The other thing is we’d have to continually update it to expose properties for each view model we want.

An alternative is to use a Factory pattern coupled with a Converter to dynamically create the appropriate view model. This is a bit of a chicken-and-egg thing to describe so I’ll start with how we wire it up in the UI project. Firstly, in the App.xaml we need to create both the Factory and Converter as resources:

   <codedDesignTimeData:DesignFactory x:Key="Factory"/>
    <codedDesignTimeData:DesignTimeConverter x:Key="DesignConverter" />

Next, in the page we set the d:DataContext (ie the design time data context) as follows:

    d:DataContext="{Binding Source={StaticResource Factory}, Converter={StaticResource DesignConverter}, ConverterParameter=FirstViewModel}"
    ... >

Let’s read through what this is saying – at design time, the DataContext for this page is going to be the Factory, passed through the Converter with the parameter “FirstViewModel”. As you can imagine what we’re really saying is that we’re asking the Factory to produce an instance of the FirstViewModel that we can data bind to.

Ok, so now we know what it’s saying, let’s look at the implementation of firstly the Converter, and then the Factory itself:

public class DesignTimeConverter:IValueConverter
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        var typeName = parameter as string;
        if (string.IsNullOrWhiteSpace(typeName)) return null;

        var factory = value as DesignFactory;
        return factory.Create(typeName);

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        return value;

There isn’t much to the converter, it simply passes the parameter (ie the type of the view model to be created) into the Create method on the Factory object.

public class DesignFactory
    private Core.App app;
    public object Create(string typeName)

        if (app==null)

                app = new Core.App();


        var type = app.FindViewModelTypeByName(typeName);

        if (type == null) return null;

        var req = MvxViewModelRequest.GetDefaultRequest(type);
        if (req == null) return null;
        var locator = app.FindViewModelLocator(req);
        if (locator == null) return null;

        IMvxViewModel vm;
        if (locator.TryLoad(type, null, null, out vm))
            return vm;

        return null;

The factory is where all the smarts are. The first thing we do is make sure that mvvmcross is initialized – this is similar to what happens in your app. We then call FindViewModelTypeByName (see below for implementation) to exchange the view model type name with a reference to the actual type. Next we invoke the view model locator infrastructure within mvvmcross to retrieve an actual instance to the view model we’re after, which we then return (and is subsequently set as the DataContext for the page).

public Type FindViewModelTypeByName(string typeName)
    return CreatableTypes().FirstOrDefault(t => t.Name == typeName);

Ok, but wouldn’t is just be better to create an instance of the view model, once we have a reference to the type? No, because that view model may have any number of dependencies, which is why we need to rely on the DI framework provided by mvvmcross. You’ll notice I skipped over one quite important line, which was that we register the type DesignData as the implementation of IDataService we want to use. By default the Initialize method on our App class will look for types that end in “Service” and register them, which is why our DesignData doesn’t end in “Service”, but it also means we have to manually register it.

The upshot of this is that an instance of the DesignData class will be used to service up design time data for our view models in Blend. I hope this helps anyone working with mvvmcross.

Building Apps for OneNote for Windows Phone, Windows Store and other platforms

There are newly published apis for accessing OneNote that you can get started building apps for today.

WPCentral has good coverage on the new OneNote features that were recently announced:  Microsoft introduces new OneNote APIs, free desktop apps for Mac and Windows

Personally the one I find most interesting is the [email protected] feature where you can simply send an email and have the contents appear within OneNote (yeh I know Evernote’s had that for years). What I love is the simplicity – it detects which Microsoft account based on which email address you send it from. All you have to do is remember [email protected]”. To get started:

* Go to 

* Click through to “Email to OneNote”

* Enrol your email address.

* Start sending emails to [email protected]

Build it Beta gets Isolated Storage Exploring in Feedback Tool

If you haven’t already started Windows Phone Application Testing with Build it Beta then I’d encourage you to check it out and start using it to deploy test builds of your Windows Phone applications and gather feedback from users.

If you’re already using Build it Beta then you hopefully realise how easy it is to push out new builds of your application by either emailing them, or simply double-clicking the XAP file and using our Windows 8 application.One thing you may not have found is that you can create feedback items directly from within the application you’re testing. After launching the application your testing, swipe down from near to the top of the screen. After a second or so (as we capture a screenshot of the current screen) you’ll see the feedback form:


The feedback form allows you to enter basic feedback information (bug, new feature etc) as well as attaching information about the navigation history (see navigation tab) and a screenshot (see screenshot tab). The feedback will be associated with this particular version of the application in Build it Beta.

This morning we’ve improved the feedback form to include a storage tab – this iterates through all files and folders currently in Isolated Storage and lists them. Folders are marked in bold and you can tap on a file to launch it for viewing (this is really only useful for known files types: xml, png, doc etc).


We’d love feedback on whether this is something that’s useful.

Sochi Apps for Windows Phone but not Windows

The Unwired has a good summary of the two Windows Phone applications covering the Sochi winter Olympics. I had already downloaded them yesterday and must admit I was quite impressed with the attention to details. The apps are clean and responsive – of course, I reserve the right to change this opinion when the event actually starts and I want to see actual results and to be notified when events are on.

I just took a quick look on the Windows Store but alas there are no official applications there. There are a couple of third party applications but no official ones.

Building Charming Apps for Windows and Windows Phone

Fellow MVP and owner of In the Hand, Peter Foot has published a number of helper classes for developers targeting both Windows and Windows Phone. I particularly love that these enable developers to “build charming apps!”

Charming ApplicationModel
Charming Display
Charming NFC Share
Charming Popups
Charming Search
Charming Settings
Charming Share
Charming Storage

Get them directly from NuGet or visit the CodePlex site for more information.

Aligning Characters and Spacing in Windows 8.1

When designing applications for Windows Phone we spend a lot of time aligning the left edge of virtually everything to either each other or to the imaginary grid drawn over the page. Unfortunately the SDK doesn’t make life easy for us as the TextBlock element doesn’t automatically trim white space on the left of the contents. The net effect is illustrated in the left of the following image where the “a” and “b” aren’t left aligned, despite being offset by exactly the same amount from the left edge of the page.


Windows 8.1 includes the OpticalMarginAlignment property which you can set to TrimSideBearings in order to remove excess whitespace. The net effect is shown in the right side of the image where the “a” and “b” are now left aligned.

Intercepting DataContext Change in Windows and Windows Phone

Often when working with UserControls you need to wire/unwire logic when the DataContext of the control changes (eg it’s used on a page and the viewmodel which is bound to the page flows into the UserControl as the DataContext). Unfortunately prior to Windows 8.1 there wasn’t an easy way to do this. In Windows 8.1 you can do the following in order to hook up to the DataContextChanged event handler

public class TestControl : UserControl
    public TestControl()
        DataContextChanged += TestControl_DataContextChanged;

    void TestControl_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
        // Do stuff with the new Data Context

So, how would you do this prior to Windows 8.1 and for Windows Phone? Well, one option, and I’m not saying this is the only option, is to create a different dependency property and connect it using data binding. For example:

public class TestControl : UserControl

   public object CustomDataContext
        get { return GetValue(CustomDataContextProperty); }
        set { SetValue(CustomDataContextProperty, value); }

   public static readonly DependencyProperty CustomDataContextProperty =
        DependencyProperty.Register("CustomDataContext", typeof(object), typeof(TestControl), new PropertyMetadata(null,DataContextChanged));

    private static void DataContextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        // Do stuff with the new Data Context

And when you use this control, you’ll need to data bind to the CustomDataContext property:

<local:TestControl CustomDataContext="{Binding}"/>

The “{Binding}” without a path simply means that the current DataContext for the control will be passed in. You’re then free to do whatever you want with the real DataContext as you can be assured it would have been set at this point.

Data Exchange for Application Extensibility on Windows Phone and Windows

Both Windows and Windows Phone support launching applications based on file extensions or via a custom uri protocol. This is the equivalent of “open in” capability that other platforms have and it is a fundamental mechanism for sharing data from one application to another. For example you might have a dropbox application which can list various files but doesn’t provide a mechanism for opening or editing all possible file types. Instead when a user clicks on a file to open it, the application can simply attempt to launch the file, allowing the platform to pass off the file to the appropriate application. This is implemented by taking a copy of the file and passing it to the destination app. Unfortunately this then means that the view/editing application can’t save it back to dropbox. The round-about way to save the changes is to then launch the file, this time with the file being picked up by dropbox.

What’s interesting is that this is expressly prohibited by the Windows Store App certification requirements. Point 3.1 states that applications can’t implement bi-directional data exchange:


My view is that this clause was written by a completely different team (probably a security “expert”) to the one that actually implemented file/uri handling and doesn’t really understand why they were implemented in the first place. In Windows you can implement Share contracts but this is not really a great way to data exchange between apps – it works well for “share to social” or similar scenarios. Take the Facebook Login for Windows Phone this uses bi-directional data flow to authenticate users via Facebook for applications wanting to connect to Facebook (similar to the way iOS works for Facebook auth). With the current Windows Store requirements I don’t see this as being possible.



Auto-launching apps using file and URI associations for Windows Phone 8

Auto-launching with file and URI associations Windows Store apps

Getting Started with Design for Windows, Windows Phone, iOS and Android

Here’s a summary of some of the design guidelines for the various mobile platforms:

Windows Phone





Another great resource on user experience design is the UX Mastery website

In particular the book Everyday UX is worth purchasing:

Non-Blocking Initialization Code to run at Startup on Windows Phone

One of the challenges often faced by developers is that they have code that needs to run at startup. This code typically has to run before any page begins to load its content; it has to support deep - linking, so shouldn’t be page dependent; and should never block the UI (which if done for long enough would cause the app to crash). In this post I’ll show you one way to achieve this – I’m sure there are plenty of other options.

In the constructor for the application make a call to your initialization method. This initialization method will return almost instantaneously since it simply spawns another thread.

public App()
    // Standard init code for a Windows Phone app ...

    // This can be called here since all it does is pass off to another thread for the long running tasks to run.
    // If this code requires the app to be further in the lifecycle, then you may need to
    // move to launching/activating event handlers


And now for the initialization method. As mentioned, the first thing it does is to spawn another thread using Task.Run. Despite warnings from Resharper we do not await this call, since this would prevent the app from initializing correctly. Inside the Run we can do whatever we want to initialize the application. When it’s done, it simply calls Set on the ManualResetEvent.

private static readonly ManualResetEvent initWaiter = new ManualResetEvent(false);
private async void InitCodeThatTakeAWhile()
    // DON'T wait, or you'll block the caller
    Task.Run(async () =>
        // Put init code here - can take as long as you want
        await Task.Delay(10000);

The App class also exposes a method which is used to wait for the ManualResetEvent to be set. It does this on a separate thread, thus allowing any UI code to continue to execute.

public  static async Task WaitForInitToFinish()
    // Switch to a different thread to wait, thereby allowing UI to process
    await Task.Run(() =>

Lastly, we need to invoke the wait method. This should be done on any page which is, or could be, used as a startup or launch page for the application. In fact, you could create a base class and call the WaitForInitToFinish method by overriding the OnNavigtedTo method.

protected async override void OnNavigatedTo(NavigationEventArgs e)

    // Change to loading states....
    LoadingText.Text = "Loading....";

    // Wait for init to complete
    await App.WaitForInitToFinish();

    // Now do page init code
    LoadingText.Text = "Loaded";

This strategy is useful for triggering startup logic, whilst ensuring the UI doesn’t block

Data Validation and Visual States for Windows Phone and Windows

One of the developers we’ve been working with recently suggested incorporating the INotifyDataError interface into some of the view models on a particular project. As a lot of the applications we typically  work on are more consumption style applications I haven’t seen the need to add complex data validation logic; where we do need to validate one or two values we typically just have a different visual state that represents when the user hasn’t correctly filled in the required fields.

I just had a quick hunt and found This post is a great starting point for implementing visual states into a Windows Phone project. A number of controls support data validation. For example the TextBox has a ValidationStates visual state group, with states for valid and invalid data. The default template doesn’t specify what these states look like but it would be easy to modify the template to provide a visual indicator when data doesn’t validate.

Modifying the validation states for a control is fine for individual controls but if you need to modify the visual state for the rest of the page you’d need to capture the ErrorsChanged event and change the visual state of the page.

One of the biggest weaknesses of the data binding framework for both Windows and Windows Phone is that there isn’t a built in mechanism for changing visual states from within a view model. There are some solutions, such as data triggers or raising an even that is captured by the page and converted into a state change. These could be combined with the ErrorsChanged event in order to build a more versatile data validation framework.

Top Social Apps for Windows Phone from fellow MVP


Having recently published his Windows Phone client for Tinder, I figured it’d be worth calling out some of the awesome apps Rudy Huyn has produced. I already knew most of the popular apps but what surprised me was that none of the app he’s got listed have a rating of under 3 stars. Great work Rudy – here’s a couple of the more recognisable apps for you to download and try.