How to change VisualState in WP7

Question

I defined the following two states in Expression Blend. I tried to follow this guide, but I feel that it leaves me hanging up when I need information on how and when to change state.

According to the manual, I have to attach behavior to my UserControl (I assume GotoState)). Unfortunately, I don’t think I really have User Control - and even if I did, would I have to attach the behavior to both my PortraitState and my LandscapeState ?

It seems I can attach a GotoState to a LayoutRoot element. So do I apply my behavior to this in both states? Any help would be greatly appreciated.

* edit: I played in my xaml.cs file and thought it might be a way to do this programmatically. when debugging and changing orientation, I enter my switch and find the correct orientation. However, the state never switches. What am I doing wrong?

  protected override void OnOrientationChanged(OrientationChangedEventArgs e) { switch (e.Orientation) { case PageOrientation.Landscape: ExtendedVisualStateManager.GoToElementState(root:this.LayoutRoot, stateName: "LandscapeState", useTransitions: true); break; case PageOrientation.LandscapeRight: ExtendedVisualStateManager.GoToElementState(root:this.LayoutRoot, stateName: "LandscapeState", useTransitions: true); break; case PageOrientation.LandscapeLeft: ExtendedVisualStateManager.GoToElementState(root:LayoutRoot, stateName: "LandscapeState", useTransitions: true); break; case PageOrientation.Portrait: ExtendedVisualStateManager.GoToElementState(root:this.LayoutRoot, stateName: "PortraitState", useTransitions: true); break; case PageOrientation.PortraitUp: ExtendedVisualStateManager.GoToElementState(root:this.LayoutRoot, stateName: "PortraitState", useTransitions: true); break; case PageOrientation.PortraitDown: ExtendedVisualStateManager.GoToElementState(root:this.LayoutRoot, stateName: "PortraitState", useTransitions: true); break; default: break; } } 

edit2: Trying above. It seems that GotoElementState returns false and, according to MSDN: "returns true if the control successfully transitions to a new state, otherwise false."

Now I have a question: what can lead to the failure of my condition?

Answer 1

I managed to find a solution to my own problem by following these steps.

It turns out that using ExtendedVisualStateManager.GotoElementState (UIElement, String, bool) does not currently work very well, so I was forced to find a way to use VisualStateManager.GotoState.

I solved my problem by simply wrapping my LayoutRoot in UserControl as such:

 <UserControl x:Name="userControl"> <Grid x:Name="LayoutRoot" Background="Transparent"> <VisualStateManager.VisualStateGroups> ... </UserControl> 

State switching was now just a matter of calling VisualStateManager.GotoState, as I tried to do.

  protected override void OnOrientationChanged(OrientationChangedEventArgs e) { base.OnOrientationChanged(e); switch (e.Orientation) { case PageOrientation.Landscape: case PageOrientation.LandscapeRight: case PageOrientation.LandscapeLeft: VisualStateManager.GoToState(control: userControl, stateName: "LandscapeState", useTransitions: true); break; case PageOrientation.Portrait: case PageOrientation.PortraitUp: case PageOrientation.PortraitDown: VisualStateManager.GoToState(control: userControl, stateName: "PortraitState", useTransitions: true); break; default: VisualStateManager.GoToState(control: userControl, stateName: "PortraitState", useTransitions: true); break; } } 

Answer 2

change VisualState in WP7 as follows:

<i>

  switch (e.Orientation) { case PageOrientation.Landscape: VisualStateManager.GoToState(this, "LandscapeState", true); break; case PageOrientation.Portrait: VisualStateManager.GoToElementState(this,"PortraitState", true); break; default: break; }