Metro Nuggets

There are a number of blog posts, that show off a new feature in Windows 10 development call xaml views, that allow you to have a different xaml file for the same page depending on the device family (a great one here by Morten). There may be genuine reasons where going for an adaptive approach might not be right for your app depending on the design constraints of your app, in which case it makes perfect sense that you’d want device specific views.

Coming soon with the new Lumia devices is a nice feature called Continuum, which allows you to effectively use your phone as a PC, where you can connect it to a monitor, and use a mouse and keyboard with it, and really shows to highlight the universal aspect of Universal Apps as you effectively then have a desktop UI that you can use. So using a desktop on a mobile, what could go wrong?

Turns out, your UI could go wrong. Why? Because although you’re seeing a desktop UI, the OS is still reporting to your app that it’s a mobile device, which means it will use any mobile specific views/code that you may be using. This means that although you have this gorgeous desktop UI, when a user uses your app in Continuum, all they will see is the [still gorgeous, I’m sure] mobile UI, but not the desktop one. So how do you get around this?

The Solution

The funny answer is you actually have to go back to adaptive triggers, but not based on height/width, instead on device family.

My recommended steps are as follows:

• Remove the xaml from your device family specific views and put them into UserControls
• Use a device family based custom Windows State Trigger (like Morten’s one here, he gets everywhere!)
• You may want to customise the aforementioned state trigger to use the new API in 10563 and above, which is the DisplayInformation.DiagonalSizeInInches (call it using DisplayInformation.GetForCurrentView().DiagonalSizeInInches) and check for anything over 6 for desktop, as the biggest Windows phones right now are 6 inches.
• Set both UserControls to Visibility.Collapsed in your page, and use x:DeferLoadingStrategy=”Lazy” so you’re not trying to load either: both UIs, or the wrong UI for the one you’re wanting. In other words, you don’t want to start with the mobile one showing in case the app is launched in Continuum, similarly, don’t start with the desktop in case it’s started on the phone.

What about Xbox One/IoT?

Since neither of these have any interaction with Continuum, you can continue to have device specific views for both of those without any negative impact.

I’ll concede this solution isn’t the most elegant, and it would be better if the device family could be reported as Desktop when being run in Continuum, because the platform *must* know, right? But as it stands, you just can’t rely on it right now.

SL