Orientation and Behaviours in WP7

As I’ve pointed out in a number of previous posts, one of the things that sets Windows Phone development apart from other mobile platforms is the awesome set of tools we have to work with. In this post we’re going to look at how you can handle the different phone orientations by defining different layouts in Expression Blend.

Let’s get started with a new Windows Phone Application. My preference is to create the new project in Visual Studio, and then immediately flip over to Expression Blend. Since we want our page to respond to orientation changes of the device, we need to change the SupportedOrientations property to PortraitOrLandscape. This can be set in the Properties window for the PhoneApplicationPage.

Locate the States window (if it’s not visible, you can display it via the Window menu). Initially your page won’t have any states or state groups defined, so the first thing to do is to create a new state group by clicking the Add state group icon. We’re going to call the state group OrientationStates as it’s going to include the different visual states, in other words the different layouts, for the different orientations of the page.

As an aside on state groups: You can have multiple state groups; each state group represents a set of mutually exclusive states. In other words your page can’t be in two different states that belong to the same state group at the same time. However, the page can be in two different states that are in different state groups.
We’re then going to add two states, Portrait and Landscape, by clicking the Add State button on the right side of the States window, under the OrientationStates heading. You should have a States window that looks similar to this.

The next thing to do is to define what the screen is going to look like for each of the two layouts. Portrait is easy, since it is going to be the same as the current layout, and the way that the design surface currently appears (the left image below). To define the layout for the Landscape state we’re first going to change the layout of the design surface (click on the Base in the States window to ensure you’re not in state editing mode – there should not be a red border around the design surface). From the Device window change the Orientation to Landscape (top image) which should change the design surface into Landscape, visible in the bottom image here

Now you’re ready to define the Landscape state. So, go back to the State window and click on the Landscape state. You should now see the red border appear around the design surface, indicating that you’re in state editing mode. For this example we’re simply going to translate the “page name” heading so that it appears alongside the other heading at the top of the screen. Select the heading and in the Properties window, then locate the RenderTransform attribute under the Transform heading. Change the Translate X value to 350 and the Translate Y value to -54 (see Figure 3).

Lastly, change the Default transition to 1s and enable transitions by clicking the Turn on transition preview button in the top right corner of the States window. Now if you click between Portait and Landscape you should see the “page name” title animate across the screen.

With the two different layouts defined we need to handle the OrientationChanged event, then depending on the new orientation of the device we need to change the state of the page. We can do this quite easily in code:

public MainPage() {
   InitializeComponent();
 
   OrientationChanged += PageOrientationChanged;
}
 
void PageOrientationChanged(object sender, OrientationChangedEventArgs e) {
   if(Orientation==PageOrientation.PortraitUp) {
       VisualStateManager.GoToState(this, "Portrait", true);
   }
   else {
       VisualStateManager.GoToState(this, "Landscape", true);
   }
}

Alternatively we can make use of the GoToStateAction behavior that is available in the SDK. In the Assets window in Expression Blend locate the GoToStateAction behavior and add two instances to the page (at this stage don’t worry about which element they’re attached to). You can use this behavior to change the state of a control (in this case the page) as a result of an event being raised on the source control. Now, the trick with handling the orientation changed event (we’ll get to wiring this up in a minute) is that the resulting state change is conditional on which orientation the device is now in. Luckily you can use the Properties window in Expression Blend to define Conditions for the GoToStateAction behavior.

Select the first GoToStateAction and in the Properties window change the StateName to Portrait, which should be available in the drop down. Next, in the Conditions section, click the Add Condition (+) button to add a condition into the listbox (Figure 4, left image). Click on the Advanced Options (the little square) button next to the first Value line and select Data Binding from the context menu. From the Element Property tab of the Create Data Binding window, select the PhoneApplicationPage element (left pane) and the Orientation property (right pane) and click OK (Figure 4, right image).

Enter the value “PortraitUp” into the second Value line. The Condition List should look similar to the left image of Figure 5. Now, repeat the same process for the other GoToStateAction. However, this time make sure the StateName is set to Landscape and you’ll need to create to conditions. One should test for a value of LandscapeRight, the other for LandscapeLeft. You’ll also need to change the Match from “all” to “any” since you want it to match either of the two conditions.

I mentioned earlier that we still had to wire up these GoToStateAction behaviors to the OrientationChanged event on the page. To do this you simply need to change the SourceObject property to point at the phoneApplicationPage (click the small square on the right of this property, select Data Binding, then select the phoneApplicationPage element from the Element Property tab in the Create Data Binding dialog). Then select the OrientationChanged event from the EventName dropdown list.

And there you have it – when you run your application you will see that when you change the orientation of the device (or the emulator using the rotate right/left buttons) you can see the layout of your page changing.