"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.