How to detect orientation changes and change layout?

Question

Suppose 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, two rows and display only some controls that I would decide.

What control do I have for this?

THX

Answer 1

You should use VisualStateManager in xaml for a complete 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 items in your xaml. Microsoft's examples use the same solution.

-

Update

I searched the network and found the correct states, an example 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 enumeration. More information can be found here .

Answer 2

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

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

but since ApplicationView.Value is likely to be left after the Windows 8.1 MS release suggests using ApplicationView.GetForCurrentView () :

Static ApplicationView methods may be modified or not available for releases after Windows 8.1 Preview. Instead, use ApplicationView.GetForCurrentView () to get an instance of ApplicationView.

So now I am done with this code (there is a kind of dynamic view and I can’t pre-create 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 } }; } 

Answer 3

See DisplayProperties.OrientationChanged -Event. When it fires, you can change your grid and change the control order.