metadevblog

Windows Phone 7 App Development

WP7 Portrait to Landscape Reorientation

leave a comment »

I thought I was pretty close to being done with the first version of Password Vault but have now discovered the joys of having to cope with reorienting the display from my chosen default Portrait view (where it looks good) to Landscape (which is not enabled by default) means that the display remains in Portrait mode when the device is rotated. The default setting in the XAML when the new page is Portrait is:

SupportedOrientations="Portrait" Orientation="Portrait"

Simply changing this to the following will at least allow the reorientation to occur and the screen will re-render when the orientation of the device changes:

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

However the display looks terrible! All my careful positioning of content to make it look good in Portrait mode results in a jumble of missing content and ugly layout in Landscape.

It is worth noticing that the there is an option to change the orientation when you right click on the page layout.  It simply flips the Orientation setting above.

It takes quite a bit of additional effort to rework the page so that it can handle the reorientation however in some respects this additional effort is quite rewarding as it can simplify the page.

I have chosen to implement a compromise solution which is to optimise the page layout for Portrait mode and then rework it to make a ‘best fit’ for Landscape.  I also wanted to avoid using code to manipulate XAML during the orient event.

There are two controls that can be used to help with the layout, StackPanel and WrapPanel (the WrapPanel is part of the Windows.Phone.Contols.Toolkit.dll that has to be referenced in the project and also included as a namespace in the XMAL.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

The StackPanel has an Orientation property which will stack content controls either horizontally or vertically.

The WrapPanel is quite useful as the page can be designed so that it will work well in both orientations without having to resort to code to change the layout.

In this example a WrapPanel is used so that the prompt text and data entry look lay out nicely in both orientations.  I achieved this by setting the Width of the text box in the Portrait mode to the fixed size of the grid. 

image

When the orientation is changed to Landscape there is enough room to put the text box next to the prompt.

image

<toolkit:WrapPanel x:Name="StackPanelPassword" >
    <TextBlock Height="30" Name="textBlock2" Margin="12,0,0,0" Text="enter password:" Width="180" HorizontalAlignment="Left" />
    <TextBox Height="72" Name="textBoxPassword" Text="" Width="444" />
</toolkit:WrapPanel>

It has taken a few hours to sort out the layout for all the pages so that they can handle both orientations dynamically.  In doing so I have learnt quite a bit about the XAML and also tidied up the layout so that it is far less reliant on absolute positioning and now makes much greater use of the inherent capabilities of the layout containers.

See also:

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

http://stackoverflow.com/questions/2226841/resolution-issue-in-silverlight/2237110#2237110

Written by metadevblog

March 16, 2011 at 11:30 pm

Posted in WP7

Tagged with

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: