by vbandi via VBandi's blog on 3/8/2011 3:14:22 PM
It is pretty well known that an app can be notified of the phone’s orientation changes via the PhoneApplicationFrame.OrientationChanged event. However, if you are as serious about sharing the work between the designer and the developer as I am, you will not be happy with this – the changing of the layout should be the responsibility of the designer, not the developer.
Of course, the best way to achieve the different layouts is via Visual States. You can define two states like this in Blend:
And move your controls around. For example, in SurfCube V2.2, we wanted to have the tabs and the tab buttons below each other in Portrait mode, but in a totally different arrangement in Landscape.
In this example, the buttons are placed inside a WrapPanel, and the WrapPanel’s Row and Colums are changed – in Landscape, they are moved to the first column of the second row. You can even throw in some fluid state changes for added effect. This is all nice, but how do you switch between the two states?
The first idea that comes to mind is to use GotoStateActions, triggered by the OrientationChanged event. Unfortunately, you cannot attach an event to the PhoneApplicationPage:
(In the above screenshot, the invisible mouse cursor points to the PhoneApplicationPage.)
Even if this worked, we would have problems – the tab page shown above is actually a UserControl, which doesn’t have the OrientationChanged event.
Like so many times before, behaviors are here to save the day. By creating a simple OrientationToStateBehavior (ok, so the name is not so simple), designers can once again have total control over how they want the UI to look in the different orientations. Just attach the behavior to the UserControl:
Set up the different states for the different orientations:
And that’s it!
As for the code of the behavior, you can find it below.
The most interesting parts are:
The rest is pretty self-explanatory, enjoy Windows Phone 7 coding!
1: using System;
2: using System.Windows;
3: using System.Windows.Controls;
4: using System.Windows.Interactivity;
5: using Microsoft.Phone.Controls;
6:
7: namespace My3DBrowser.Behaviors
8: {
9: public class OrientationToStateBehavior : Behavior<UserControl>
10: {
11: public OrientationToStateBehavior()
12: {
13: IsEnabled = true;
14: }
15:
16: protected override void OnAttached()
17: {
18: base.OnAttached();
19: InitWhenReady();
20: }
21:
22: private void InitWhenReady()
23: {
24: PhoneApplicationFrame main;
25: Dispatcher.BeginInvoke(() =>
26: {
27: main = Application.Current.RootVisual as PhoneApplicationFrame;
28: if (main != null)
29: {
30: main.OrientationChanged += MainOnOrientationChanged;
31: SetState(main.Orientation);
32: }
33: else //If rootvisual is still not set, wait some more
34: InitWhenReady();
35: });
36: }
37:
38: public bool IsEnabled { get; set; }
39:
40: [CustomPropertyValueEditor(CustomPropertyValueEditor.StateName)]
41: public string PortraitUpStateName { get; set; }
42: [CustomPropertyValueEditor(CustomPropertyValueEditor.StateName)]
43: public string PortraitDownStateName { get; set; }
44:
45: [CustomPropertyValueEditor(CustomPropertyValueEditor.StateName)]
46: public string LandscapeLeftStateName { get; set; }
47: [CustomPropertyValueEditor(CustomPropertyValueEditor.StateName)]
48: public string LandscapeRightStateName { get; set; }
49:
50: private void MainOnOrientationChanged(object sender, OrientationChangedEventArgs orientationChangedEventArgs)
51: {
52: if (IsEnabled)
53: SetState(orientationChangedEventArgs.Orientation);
54: }
55:
56: private void SetState(PageOrientation orientation)
57: {
58: string stateName = "";
59:
60: switch (orientation)
61: {
62: case PageOrientation.PortraitUp:
63: stateName = PortraitUpStateName;
64: break;
65: case PageOrientation.PortraitDown:
66: stateName = PortraitDownStateName;
67: break;
68: case PageOrientation.LandscapeLeft:
69: stateName = LandscapeLeftStateName;
70: break;
71: case PageOrientation.LandscapeRight:
72: stateName = LandscapeRightStateName;
73: break;
74: default:
75: throw new ArgumentOutOfRangeException();
76: }
77:
78: VisualStateManager.GoToState(AssociatedObject, stateName, true);
79: }
80: }
81: }
Original Post: Handling WP7 orientation changes via Visual States
The content of the postings is owned by the respective author. Silverlight Feeds is not responsible for the contents of the postings. This site is automatically generated and cannot be reviewed for abusive content. If you find abusive content on Silverlight Feeds, please contact us. Designated trademarks and brands are the property of their respective owners. All rights reserved.
