Geek Answers Handbook

Windows Phone 7 Applications - Reorienting

Hi fellow developers! I am working on a Windows Phone 7 application and I can’t understand what I consider a simple problem for more experienced ones. Let's say I have a layout consisting of two elements: ListBox (filled with many elements) and TextBlock (providing the user with some basic instructions).

I want them to be one above the other when the device is in portrait orientation, and I want them to be next to each other when the device orientation is changed to “Landscape”.

For the Portrait orientation, I use the Grid layout manager, since it allows me to determine the row heights so ... row 0 Height="2*" , row 1 Height="*"

The listbox sits on row 0, the TextBlock on row 1. Now, what would be really neat is to simply change the RowDefinition to ColumnDefinition and reassign listbox / textblock to grid columns instead of rows when the device switches to Landscape.

But this is just my idea. I don’t know how to do it elegantly. Maybe there is a better approach to this? Or maybe this is the right approach, and is there some kind of method built specifically for this purpose?

Thanks for your suggestions!

+4
source share
3 answers

How to do this for default portfolio configuration: -

 <Grid> <Grid.RowDefinitions> <RowDefinition Height="2*" /> <RowDefinition Height="*" /> </Grid.RowDefintions> <Grid.ColumnDefinitions> <ColumnDefinition Width="2*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <ListBox x:Name="ItemList" Grid.ColumnSpan="2" /> <TextBlock x:Name="Instructions" Grid.Row="1" Grid.ColumnSpan="2"> Content </TextBlock>

Then in your case of OrientationChanged use: -

 if ((e.Orientation & PageOrientation.Portrait) == PageOrientation.Portrait) { Grid.SetRow(ItemList, 0); Grid.SetRowSpan(ItemList, 1); Grid.SetColumn(ItemList, 0); Grid.SetColumnSpan(ItemList, 2); Grid.SetRow(Instructions, 1); Grid.SetRowSpan(Instructions, 1); Grid.SetColumn(Instructions, 0); Grid.SetColumnSpan(Instructions, 2); } else { Grid.SetRow(ItemList, 0); Grid.SetRowSpan(ItemList, 2); Grid.SetColumn(ItemList, 0); Grid.SetColumnSpan(ItemList, 1); Grid.SetRow(Instructions, 0); Grid.SetRowSpan(Instructions, 2); Grid.SetColumn(Instructions, 1); Grid.SetColumnSpan(Instructions, 1); }
+3
source

For orientation, Visual State Manager works best.

  • In Blend, define two states, name them "port" and "ground".
  • Place the Device control panel in the Blend workspace.
  • Record the layouts by switching the orientation and creating each layout accordingly.
  • In the orientation change event, use the following code:

code:

 private void PhoneApplicationPage_OrientationChanged (object sender, OrientationChangedEventArgs e) { VisualStateManager .GoToState(this, e.Orientation.ToString().Substring(0, 4), true); }
+2
source

I found a good msdn blog article that pretty much describes this layout conversion and explains other approaches:

http://blogs.msdn.com/b/ptorr/archive/2010/03/27/strategies-for-dealing-with-orientation-changes.aspx

Why haven't I met this before? :-) Happy coding!

+1
source

More articles:


All Articles