How to make dynamic grid layout in WinRT?

Question

I want a grid in my page to have a single column in portrait mode and have two columns in Landscape mode. Some of the content should move to the second column when the device is Landscape. I've tried to do this but couldn't.

I'm doing everything from code behind. Generating the grid, adding children etc. When Orientation changes, I destroy the current layout and create a new one. The problem with this approach is, any entered data will be gone. It's a huge code and not possible to put here. I want this layout change to happen automatically. So, any data that is entered is preserved after the orientation change.

Any help would be appreciated.

Answer 1

The trick is to have one grid that accommodates both states. You can use VisualStates to assign different Grid.Row, Grid.Column, Grid.RowSpan and Grid.ColumnSpan values to controls. This is done using Blend and is declarative in XAML. you give each state a name. In the code you detect size change of the window to trigger the different states using the VisualStateManager.

You can also do this without VisualStates. In that case in the event handler of the SizeChanged you have to set the appropriate values for all the controls yourself.

In Windows 10 UWP it got much simpler using RelativePanel. You can position controls in a more flexible way then with grids.

Martin