How do I change the VisualState in WP7

Question

I've defined the following two states in Expression Blend. I've been trying to follow this guide but I feel like it leaves me hanging when I need information on how and when to change state.

According to the guide I am to attach a behaviour(I assume "GotoState") to my UserControl - Unfortunately I don't think I actually have a User Control - and even if I did, would I have to attach a behaviour to both my PortraitState and my LandscapeState?

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

*edit: I was playing around in my xaml.cs file and figured that this might be the way to do it programmatically. when debugging and changing the orientation I enter my switch case and find the correct orientation. The state, however, is never switched. 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: When attempting the above It seems that GotoElementState returns false and, according to MSDN: "returns true if the control successfully transitioned to the new state; otherwise, false."

Now I'm left with the question : What can cause my state transition to fail?

Answer 1

change the VisualState in WP7 like this:

    switch (e.Orientation)
    {
        case PageOrientation.Landscape:

           VisualStateManager.GoToState(this, "LandscapeState", true);

            break;

        case PageOrientation.Portrait:

            VisualStateManager.GoToElementState(this,"PortraitState", true);

            break;

       default:

            break;
    }

Answer 2

I managed to find a solution to my own problem by doing the following.

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

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

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

Switching states was now simply a question of calling VisualStateManager.GotoState as I initially attempted 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;
        }
    }