How to change orientation of one component in windows phone 8 page with locked orientation

Question

I'm working on Windows Phone 8/8.1 C#/XAML .NET 4.5 Application and I'd like to know how to change orientation of just one control/item on page (rotate it 90 degrees).

I have a webBrowser on my portrait page (that stays locked on that orientation) and the webbrowser needs to be in landscape orientation (and does not rotate).

How can I set the webbrowser to be rotated 90 degrees and stay that way?

Answer 1

So, I've figured one way to do it on my own.

I'm going to put the answer as community wiki so that anyone who comes later can edit and add more options to do this.

The rotation transformation

One of the options is to rotate the element.

This is done by rotation transformation (answer combined from this ans this question).

It can be done in code behind:

//Create a transformation
RotateTransform rt = new RotateTransform();
//and set the rotation angle
rt.Angle = 90; //number of degrees to rotate clockwise
               //for counterclockwise rotation use negative number

//default rotation is around top left corner of the control,
//but you sometimes want to rotate around the center of the control
//to do that, you need to set the RenderTransFormOrigin
//of the item you're going to rotate
//I did not test this approach, maybe You're going to need to use actual coordinates
//so this bit is for information purposes only
controlToRotate.RenderTransformOrigin = new Point(0.5,0.5);

//the name of the control is controlToRotate in this instance
controlToRotate.RenderTransform = rt;

---

Or in XAML:

• the browser in this instance is taken from my own code and everything is set so that the item is rotated and takes the full place assigned to it

• the browser is in the grid, positioned dynamically, the grid is named so that I can gain access to it simply

• the browser needs to have width and height specified, in this case I'm taking it from the width and height of the grid, otherwise it is set automatically somehow and the result is pretty small somehow

• The vertical and horizontal alignments are set to center so that the resulting rotation is centered too, otherwise it is not (in dynamic layout)

Code:

<Grid x:Name="ContentPanel">            
  <phone:WebBrowser x:Name="controlToRotate"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    RenderTransformOrigin=".5, .5"
                    Width="{Binding ElementName=ContentPanel, Path=ActualHeight}"
                    Height="{Binding ElementName=ContentPanel, Path=ActualWidth}">
    <phone:WebBrowser.RenderTransform>
      <RotateTransform Angle="90"/>
    </phone:WebBrowser.RenderTransform>
  </phone:WebBrowser>
</Grid>