locked
WP7 Orientation change issue RRS feed

  • Question

  • I have a main page which I am trying to use with different states for each orientation (portrait and landscape). My xaml file has:
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
    

    With this, I created a visual state for landscape in blend. To do this I created a state group called LandscapeLeft. Under this state I went to the device tab and selected landscape orientation (Which didn't rotate my design view by the way). Here I moved some objects around while it was recording and the layout looks exactly as I want it (despite it still being displayed in portrait orientation in my design view).

    Now my on orientation changed method is called as follows:

     

    private void OnOrientationChanged(object sender, OrientationChangedEventArgs e)
      {
       VisualStateManager.GoToState(this, e.Orientation.ToString(), true); 
    
      }
    

     

    When this is called upon rotating the emulator my objects do not appear as I placed them in the design view in expression blend. They move to their proper locations...if it was meant to be a portrait view. Basically it looks like this in landscape view in the emulator (where * = button):

    =============================

    l  *                             *                              l

    l                                                                  l

    l                                                                  l

    l                                                                  l 

    =============================

     

    When in blend the landscape left state looks like this:

    ==================

    l     *                             *  l

    l                                         l

    l                                         l

    l                                         l

    l                                         l

    l                                         l

    l                                         l

    l==================l

    (NOTE: my default portrait view is this image with the button in the top right corner displayed at the bottom left corner.)

     

    And my goal, after changing the orientation to landscape is this:

     

     

    =============================

    l  *                                                             l

    l                                                                  l

    l                                                                  l

    l   *                                                             l 

    =============================

     

    Can anyone tell me why this could be? Maybe I missed a step in blend to do this, although I am fairly sure I followed all instructions. Thanks in advance everyone!

     

    Wednesday, September 22, 2010 5:10 AM

Answers

  • Hi,

     

    This isn't an entire solution, as I'm sure there must be a way to show the visual state in landscape mode in design view, but it works...

     

    I used the same approach as you, but in my OnOrientationChanged override, I still pass the event down to the base, which I guess takes care of the actual orientation change:

        protected override void OnOrientationChanged(OrientationChangedEventArgs e)
        {
          string destinationOrientation = (e.Orientation & PageOrientation.Portrait) != 0 ? "Portrait" : "Landscape";
    
          VisualStateManager.GoToState(this, destinationOrientation, true);
    
          base.OnOrientationChanged(e);
        }
    
    

    I don't see why this is necessary, as each visual state contains an automatically generated storyboard to change the orientation anyway:

      				<Storyboard>
      					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(PhoneApplicationPage.Orientation)" Storyboard.TargetName="phoneApplicationPage">
      						<DiscreteObjectKeyFrame KeyTime="0">
      							<DiscreteObjectKeyFrame.Value>
      								<phone:PageOrientation>Portrait</phone:PageOrientation>
      							</DiscreteObjectKeyFrame.Value>
      						</DiscreteObjectKeyFrame>
      					</ObjectAnimationUsingKeyFrames>
      				</Storyboard>
    
    

    I hope this helps!

     

    Cheers,

     

    Simon

    • Marked as answer by andersra Tuesday, October 19, 2010 1:01 PM
    Monday, October 11, 2010 1:00 AM