Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to work with Portrait or Landscape mode in Windows Phone 7

This tutorial will assist the developers to manage with diverse orientations that are present in Windows Phone 7 devices.

The approach in which a Silverlight page states its supported orientations is by setting the PhoneApplicationPage, SupportedOrientations and Orientatioproperties, either in XAML or code behind.

<phone :PhoneApplicationPage 
   SupportedOrientations="Portrait" Orientation="Portrait">

Here the mode that is supported by the page is a Portrait mode making use of the Supported Orientations attributes that can be one of the following values:

  • Portrait
  • Portrait Or Landscape
  • Landscape

The default orientation of the page is defined by the Orientation attribute. Assuming in case there is only one orientation that is supported, and then the Orientation property must match the Supported Orientations property. Else it can be one of the below Page Orientation values:

  • None
  • Portrait
  • Landscape
  • PortraitUp-It has the bit flag for Portrait set
  • PortraitDown- This is notused normally because the Windows Phone does will not rotate the screen into an upside down position.
  • LandscapeLeft- It has the bit flag for Landscape set
  • LandscapeRight- It has the bit flag for Landscape set

Both Portrait as well as Landscape orientation has to be handled in case one has assigned a page’s Supported Orientations. The layout panels resize themselves and adjust the positions of their child controls when the orientation of the phone is changed.

To verify the way StackPanel automatically readjusts its children, one require creating a simple application. Also, it would be required to modify the main page to support both Landscape and the Portrait mode.

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

When the modified application is launched, change in the layout can be obtained by pressing one of the rotation buttons that is present on the emulator’s command bar. The page is automatically updated when the emulator changes orientation for the reason that the page makes use of a combination of Grid and StackPanel controls. This works fine in a situation when both orientations display the same basic user interface.

Assuming a situation where the landscape and portrait view are not similar and we will build a sample application now as displayed in the below figure. The figure displays an application title, a picture and a caption. However, the page title gets disappear and only the picture and caption are being displayed when the phone is rotated to landscape.

Sample application demonstrating orientation support

Figure 1: Sample application demonstrating orientation support

In order to initiate a new sample application, one needs to create a new project from the Windows Phone Application project template.

  • Open MainPage.xaml
  • Update the SupportedOrientations property to PortraitOrLandscape.
  • Import a picture into the root of your project
  • Set its Build Action property to Content.
  • Add the code displayed below to the Grid named ContentPanel in MainPage.xaml.

Listing1: Reflecting a picture and a caption

<Grid x:Name="ContentPanel" Grid.Row ="1" Margin="12,0,12,0"> 
      <Grid.RowDefinitions> 
         <RowDefinition Height="*" /> 
         <RowDefinition Height="*" /> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="*" /> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width ="*" /> 
         <ColumnDefinition Wid th="Auto" /> 
         <ColumnDefinition Width ="*" /> 
      </Grid.ColumnDefinitions> 
      <Image x:Name="MyPhoto" Grid.Row="1" Grid.Column="1"
         Source="/photo.jpg" /> 
      <TextBlock x:Name="MyPhotoLabel" Grid.Row ="2" Grid.Column="1" 
         Text="book cover" TextAlignment="Center" /> 
    </Grid>

Also, other than the markup, we would need disappearing of the title in landscape mode and again bring the same back in portrait mode. A new handler needs to be added for the the OrientationChanged event in order to achieve this. Here you would require choosing the entire page and adding a handler for the OrientationChanged event. The below lists the code to implement the rotation:

Listing 2: Managing orientation change

private void PhoneApplicationPage_OrientationChanged( object sender,  
      OrientationChangedEventArgs e) 
{ 
  PageOrientation orientation = e.Orientation; 
 
  if ((orientation & PageOrientation.Landscape) 
        == PageOrientation.Landscape ) 
  { 
     ApplicationTitle.Visibility = Visibility .Collapsed; #A 
     PageTitle.Visibility = Visibility .Collapsed;        #A 
 
     ContentPanel.RowDefinitions[2].Height = GridLength .Auto; 
     ContentPanel.RowDefinitions[3].Height = GridLength .Auto; 
 
     MyPhoto.SetValue(Grid.RowProperty, 0);      
     MyPhoto.SetValue(Grid.RowSpanProperty, 3);    
     MyPhoto.SetValue(Grid.ColumnProperty, 0); 
     MyPhoto.SetValue(Grid.ColumnSpanProperty, 3); 
 
     MyPhotoLabel.SetValue(Grid.RowProperty, 3); 
     MyPhotoLabel.SetValue(Grid.ColumnProperty, 1); 
  } 
  else if ((orientation & PageOrientation.Portrait) 
        == PageOrientation.Portrait) 
  { 
     ApplicationTitle.Visibility = Visibility.Visible;    #B 
     PageTitle.Visibility = Visibility.Visible;           #B 
 
    ContentPanel.RowDefinitions[1].Height = 
      new GridLength (1, GridUnitType.Star); 
     ContentPanel.RowDefinitions[2].Height = GridLength .Auto; 
     ContentPanel.RowDefinitions[3].Height =  
      new GridLength (1, GridUnitType.Star); 
 
     MyPhoto.SetValue(Grid.RowProperty, 1); 
     MyPhoto.SetValue(Grid.RowSpanProperty, 1); 
     MyPhotoLabel.SetValue(Grid.ColumnProperty, 1); 
     MyPhotoLabel.SetValue(Grid.ColumnSpanProperty, 1); 
 
     MyPhotoLabel.SetValue(Grid.RowProperty, 3); 
     MyPhotoLabel.SetValue(Grid.ColumnProperty, 1); 
  } 
} 
#A Hide the titles 
#B Show the titles

The passed-in OrientationChangedEventArgs parameter provides the new orientation to the event handler. Also it makes use of the new orientation value to verify the process that need to be followed to update the layout. In order to determine whether the orientation value is Portrait or Landscape, a bitwise operation is performed. The code is also helpful in adjusting the layout and positioning of the image and caption controls.

Screen orientation does not have to be taken into account always at the time of building Silverlight applications; in fact it is something unique to Silverlight for Windows Phone.

Conclusion

The article tried to assist you on how the application can suit to alterations in the orientation of the phone. For majority of the applications, the best means to support both orientations is by making use of a layout control such as StackPanel orGrid.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login