How to detect orientation changes and change layout?

Question

Lets say that I have a grid with 2 rows, 2 columns and many controls inside each cell.

When the application is changed to snap mode, I meant 1/3 of the screen I would like the application to be only, one Column, 2 rows and show only some controls I would decide.

What kind of control do I have for this?

thx

Solution 1

You should make use of the VisualStateManager in xaml, for a full xaml solution:

<Grid x:Name="LayoutRoot">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="OrientationStates">
            <VisualState x:Name="Full"/>
            <VisualState x:Name="Fill"/>
            <VisualState x:Name="Portrait"/>
            <VisualState x:Name="Snapped"/>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

Create StoryBoards for each VisualState and hide/show elements in your xaml. Microsoft examples use the same solution.

--

Update

I searched the net and found the proper states, an example is behind this link: MSDN.

 <VisualStateManager.VisualStateGroups>
     <VisualStateGroup x:Name="ApplicationViewStates">
        <VisualState x:Name="FullScreenLandscape"/>
        <VisualState x:Name="Filled"/>
        <VisualState x:Name="FullScreenPortrait"/>
        <VisualState x:Name="Snapped"/>
    </VisualStateGroup>
 </VisualStateManager.VisualStateGroups>

The states reflect the ApplicationViewState enum. Even more information can be found here.

Solution 2

Using DisplayProperties.OrientationChanged event (as suggested by @Jan K.) may not be exactly what you are looking for, considering the remarks section to this event:

The DisplayProperties.OrientationChanged event occurs only when orientation of the display or monitor changes and not necessarily when the orientation of your app changes. To determine the orientation of your app for layout purposes, use the ApplicationView.Value property.

but since ApplicationView.Value probably will be abandoned after Windows 8.1 release MS suggest to use ApplicationView.GetForCurrentView() instead:

ApplicationView static methods may be altered or unavailable for releases after Windows 8.1 Preview. Instead, use ApplicationView.GetForCurrentView() to get an instance of ApplicationView.

So for now I've end up with that code (have a kind of dynamic view and can't pre-design everything in XAML via VisualStateManager, unfortunately):

public MainPage()
{
    InitializeComponent();
    Window.Current.SizeChanged += (sender, args) =>
    {
        ApplicationView currentView = ApplicationView.GetForCurrentView();

        if (currentView.Orientation == ApplicationViewOrientation.Landscape)
        {
            // when args.Size.Width > args.Size.Height
        }
        else if (currentView.Orientation == ApplicationViewOrientation.Portrait)
        {
            // when args.Size.Width < args.Size.Height
        }
    };
}

Solution 3

Have a look on the DisplayProperties.OrientationChanged-Event. When it fires you can modify your grid and rearrange your controls.