Windows 8 XAML Objects and Snapped View

Question

So I have made an app and set the layout so it appears ok in portrait mode. For the snapped view I created a ListView that contains different instances of the same objects. This ListView is initially collapsed and then when it changes to snapped the listview becomes visible and the portrait mode objects become collapsed.

This works fine, but as they are two different sets of objects it messes up the user experience. If they enter text into the boxes in portrait mode and then switch to snapped view all of their text will have gone (as they put it in the now collapsed text box).

The question is is it possible to just change the position / size of the elements so that they are the same objects just in a different place, depending on if we're in snapped mode or not?

Hope this is clear. Thanks.

Answer 1

Yes, in fact, that functionality is built-in to the LayoutAwarePage class, which is the type of Page you get when you add a Basic Page (vs. Blank Page) to your project. If you started with the Grid or Split App template, the provided pages likewise extend LayoutAwarePage .

These pages have some boilerplate XAML that leverages the VisualStateManager and defines states for the various application layouts. What you can do is design your layout for the full landscape mode and then use the Device window to record changes to your layout (placement, colors, etc.) for Snapped, Filled, and Portrait.

For instance, here's a simple UI in landscape mode:

Then by switching Visual state to Snapped and turning on Enable State Recording , I made changes to the layout:

At runtime, the app looks like the following in each of the two states. No code needed - it's all being handled by LayoutAwarePage switching between VisualStates as the orientation of the app changes.