Windows 10 Development: Small and Big Screens

With Windows 10 and the fact that it runs on every device, the Universal app as we know in Windows 8.1 is gone. That makes it easier, but also more complex in another way.

image image

Previous you had a project for Windows Phone and the windows in this project are for small screens. Now every size of window is in one project even in one XAML file, you have to deal with that in one way.

Lucky the Windows 10 development SDK has some useful resources. Like a RelativePanel. On a RelativePanel the controls have a relative position to other controls. Way better than before, where you had to play with margins and absolute positions. Which let to strange behavior on different screen sizes etc.

image

Another powerful one is SplitView, then you have a Content and a Pane part. Most of the time we have a master detail on a window.

image

But this is not helpful if manipulation is done by coding stuff in events in the Code behind. Because that is not the way to do it anymore in a XAML / MVVM world. There is a nice solution for.

The VisualStateManager, which contains VisualStates with StateTrigger and StateSetters.

image

From a VisualState you set what the MinimalWidth or Height should be and with the Setters you specify what will happen.

image

In my SDN evaluation app example it looks like this. With the first the minimal width is 720 and from the second the alternative. This will also work on a Windows Phone with Windows 10, where you hold the phone in landscape or portrait.

image  image

As you noticed I have added a hamburger menu, I think a control would be better. It is a toggle button with the Font (Segoe MDL2 Assets) and a Glyph.

image

It works nice, but I hope they make it a bit better.

Nice session on Ignite: BRK2310 From the Small Screen to the Big Screen: Building Universal App Experiences with XAML

(disclaimer I am no XAML expert, I know a little)