How to properly adapt the app UI on different screens on W10

Question

I'm about to start porting my WP8.1 app to W10, and looks like I'll have to make it a Universal Windows App. Now, I'm fine as for the back-end code, as I'll be able to reuse 90% of my classes (Models, ViewModels, and most of my helper classes, extension methods and converters).

The problem is for the UI: I understand I'll have to design the app for different screens and aspect rations, and I don't know how to actually implement that in code. I mean, as for the UI scaling, I know I can use the VisualStateManager and AdaptiveTriggers to manually set the properties of the UI elements I want to adapt on any screen resolution, or I can use some converters, and that's fine.

Whan I mean is: what's the best method to have the whole UI adapt to different resolutions?

This is an example:

As you can see: the whole navigation pattern changes along the UI when on different screens. On phones, we have the contact page that covers the whole UI, while on tablets and PCs we have the contact page that's just a fraction of the UI, and the pivot pages are moved into another panel on the right. Also, many of the UI elements are completely rearranged. And of course, some view-level back-end code will change as well.

Now, I'm wondering what's the best approach to do this whole thing.

Should I:

• Have a single XAML file (for every page) with a lot of VisualStates and stuff, and try to rearrange the UI for every screen resolution

• Have different projects with a shared project (like with W8.1 universal apps), so that I can focus on the UI on every specific device? This is the approach I'd be more comfortable with, as I'd be able to design platform specific UI elements without problems. Still, I didn't understand how to actually create a shared project and different projects for each device type in VS2015.

• Use that approach with different XAML pages that share the same code-behind file (even I'm not sure how to implement this, and how to implement platform-specific code-behind parts).

• Some other method

I mean, I'm sure I'm not the only W8.1/WP8.1 developer in trouble here, is there some kind of advice I can use? I already watched all the MVA videos about W10 development, but they didn't get into the implementation details there.

Thank you for your help

Sergio

Answer 1

It really depends on your project. If a UI isn't changing too drastically, I would definitely use AdaptiveTriggers. You can do a lot with very little XAML. Check out Microsoft's sample code if you haven't already: https://github.com/Microsoft/Windows-universal-samples/tree/master/xaml_responsivetechniques

If it is changing drastically, you can do it with AdaptiveTriggers, but it's probably easier to have multiple XAML files. A new way to do this in Win10 is to use DeviceFamily. Essentially, just create a folder called "DeviceFamily-Mobile", and stick a XAML view with the same file name in there. More info: http://sharpgis.net/post/2015/04/01/Creating-DeviceFamily-specific-layouts-in-a-Universal-App

Answer 2

Those two screenshots aren't necessarily that different, if you look at using the SplitView Control and the RelativePanel Control.

See this //build talk for more info.