How to reflow layout for narrow screen in Windows 8

Question

I have a layout that contains some controls in a red panel and right panel, both contain a listview with some items, so are scrollable by themselves, as seen on the top part of the picture.

I'd like to change the layout on narrow screen (when user resizes my app), because both panels in the same orientation will not fit. I'd like to know what is a good way to achieve this.

So far I've tried to create a grid that initially contains both red and blue panels, and when the window size changes, I "animate" property Grid.Column from 1 to 0 and Grid.Row from 0 to 1 on the blue panel. However, while this does indeed place the blue panel under the red one, I don't know how would I make the entire layout scrollable, because part of the blue layout will now be offscreen.

I think that maybe I could achieve my plan by having both panels in a StackPanel and just changing its orientation, but I'm unsure how to evenly split the StackPanel for its children in the wide layout (and the scrolling problem is still here).

Or should I just prepare two separate layouts and switch between them by using VisualStateManager?

Answer 1

"Just prepare two separate layouts and switch between them by using VisualStateManager"

Basically create layouts for all supported window sizes and put them all in the page with Visibility="Collapsed". Then handle the SizeChanged event and use VSM to switch to the state appropriate for the new size. You can easily define and view the different visual states in Blend. If you don't plan on ever using Blend - you can skip VSM and simply set Visibility of each layout panel manually in the event handler.

There are some other options like dynamically re-configuring the different orientations and ScrollViewer modes or even implementing your own layout panels, but I wouldn't try to optimize prematurely and in most cases the VSM route works well.