Possible to specify two DIFFERENT layouts for portrait and landscape? - 【StackMirror】|c#|windows-8|microsoft-metro

The C# samples and source code I've seen for Win8 Metro-style apps use storyboard animations to modify a page for different views (not just different full-screen orientations, but snapped and filled view modes as well).

This seems like a good way to adjust your view for different resolutions, orientations, etc, but...

I sometimes get UI specs for portrait & landscape views that require a very different internal structure of <Grid> and <StackPanel> tags. Trying to morph one of these structures into the other using an animation seems like a pretty daunting task, not to mention difficult to maintain as the spec matures.

Before I resign myself to taking the animate-a-single-layout approach, I wanted to make sure that it isn't possible to simply specify two completely separate XAML layouts, similar to how it works in Android?

Anyone know?

Thanks.

2012-04-05 00:29
by Scott Smith

You can definitely switch between layouts using visual state manager. In XAML animations are not just about animating things. You can change style or show/hide different elements using animations - Denis 2012-04-05 20:26

+1 on Denis. You could use the VSM to enable/disable a whole block of controls. It makes a big XAML though - jv42 2012-04-06 08:22

The only downside is that you have a big duplicated XAML, much like you already do for Landscape/Filled vs. Snapped.

However, what you can do is animate some specific properties on your Landscape layout if that gets you where you need to be.

For instance, if have a GridView and your boxes need to go from 250x250 to 200x300, you can just copy the style you use for your ItemTemplate, tweak it so that the width and height values are correct, and use a Storyboard change your ItemTemplate from "Standard250x250" to "MyNewPortrait200x300Style".

Now, if it is a fundamental change, like the difference between a GridView and a ListView, you might just have to live with some duplicated layout code and using some Storyboards to collapse one and show the other (like the templates do with Landscape/Filled vs. Snapped).

Edit

To be clear, I am saying your best options are to either tweak the styling properties via animations, or create an entirely separate Panel (be it a Grid, StackPanel, or whatever) for your other layout and use an animation to set the Visibility on the Landscape one to Collapsed and the Portrait one to Visible. That's how the Grid Template handles Snapped, and it works really nicely. Much easier than trying to morph each and every child control of your root panel.

2012-06-26 16:42
by Andy_Vulhop