Search code examples
wpfpixelsense

How do I change the application orientation of a Surface application


I need to rotate the UI 180 degrees of my surface application in runtime when a user presses a button. How do I do this?


Solution

  • Just apply a RotateTransform on your topmost panel (I think you can even do it on the actual surface window if you want) with an angle of 180 degrees.

    <s:SurfaceWindow x:Class="SurfaceApplication1.SurfaceWindow1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s="http://schemas.microsoft.com/surface/2008"
        Title="SurfaceApplication1">
      <Grid>
        <Grid.LayoutTransform>
          <RotateTransform x:Name="mainOrientation"/>
        </Grid.LayoutTransform>
        <s:SurfaceButton Click="btn_Click" Content="Click to rotate" />   
        ... other content here ...
       </Grid>
    </s:SurfaceWindow>
    

    And in code behind:

    private void btn_Click (object sender, RoutedEventArgs e)
    {
        if (mainOrientation.Angle == 0)
            mainOrientation.Angle = 180;
        else
            mainOrientation.Angle = 0;
    }
    

    As a related topic, you can also listen to the surface's OrientationChanged event to know when a user has changed side of your app. A good practice is to flip the app to the correct side when this happens.