Handling Orientation in Windows Phone7 - [Part-5]

In this part we are discussing about the orientation change event handling and how to supports application in both (portrait & landscape) mode. Windows Phone 7 basically supports two types of screen orientation – portrait and landscape. However there are several type orientations available.

Windows Phone screen orientation can be handled from the XAML for a specific page. To set two properties for a page: SupportedOrientations and Orientation.

In the above code snippet SupportedOrientations property is responsible for types of screen orientation support page portrait or landscape. An Orientation property is specified for specific orientation of a page.

Apart from that we can also handle orientation in the code behind using SupportedOrientations property see below code snippet.

SupportedOrientations = SupportedPageOrientation.Portrait;

In this part I have consider two mechanisms for displaying contents in portrait or landscape mode.
For understand the in portrait or landscape mode I have taken two example here.
Example-1: Auto-sizing and scrolling: This example I have used a StackPanel control and ScrollViewer control to support both orientations. This mechanism is simple to use if we have to show contents in portrait or landscape mode.
Example-2: Grid Layout: in this example I have used a grid layout control and move element positioning within the grid cells based on the selected orientation mode.
Let us start with example-1 development.
Step-1: Create a Windows Phone 7 project and select File -> New Project menu.

Step-2: Enter the project name and press OK button.
Step-3: In MainPage.xaml, in the XAML code, by default portrait set with SupportedOrientations and Orientation property. Now we are modifying these properties PortraitOrLandscape with SupportedOrientations and Orientationis Portrait. See below code snippet.

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

Step-4: In this step, I have added two button controls in grid layout by defining two rows. This page is developed for navigate the both examples. See below screenshot and code snippets.

<Grid x:Name="LayoutRoot" Background="Transparent">
   <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
   </Grid.RowDefinitions>
   <!--TitlePanel contains the name of the application and page title-->
   <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
      <TextBlock x:Name="ApplicationTitle" Text="Orientation App" 
Style="{StaticResource PhoneTextNormalStyle}"/>
      <TextBlock x:Name="PageTitle" Text="Main Menu" 
Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>           
   </StackPanel>

   <!--ContentPanel - place additional content here-->
   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <Button Content="My Pictures" 
Height="72" HorizontalAlignment="Center" Margin="0,20" 
Name="btnMyPictures" VerticalAlignment="Top" Width="200" Click="btnMyPictures_Click" />
      <Button Content="My Controls" 
Height="72" HorizontalAlignment="Center" Margin="0,100" 
Name="btnMyControls" VerticalAlignment="Top" Width="200" Click="btnMyControls_Click" />
    </Grid>
</Grid>

Step-5: Now add a views and images directory in the project to keep all UI and images. Here I have added two xaml pages (MyPictures.xaml and MyControls.xaml) in view directly and added few images in images directory see below picture.

Step-6: Now add the code for navigate the MyPictures.xaml page using Navigation Service API see below code snippet.

private void btnMyPictures_Click(object sender, RoutedEventArgs e)
{
     NavigationService.Navigate(new Uri("/views/MyPictures.xaml", UriKind.Relative)); 
}

private void btnMyControls_Click(object sender, RoutedEventArgs e)
{
     NavigationService.Navigate(new Uri("/views/MyControls.xaml", UriKind.Relative));
}

Step-7: Now we can go ahead with Example-1 for Auto-sizing and scrolling concept in MyPictures.xaml page. In this page I have used ScrollViewer control and added a StackPanel control inside the ScrollViewer control. The ScrollViewer control allows scrolling through the StackPanel if the UI controls fall up the screen. See the blow code snippet for MyPictures.xaml page.

<ScrollViewer x:Name="ContentGrid" Grid.Row="1" VerticalScrollBarVisibility="Auto">
   <StackPanel Background="Transparent" >
      <Image Height="125" HorizontalAlignment="Left" Name="image1" Stretch="Fill" 
VerticalAlignment="Top" Width="133" Source="/WP_HandleOrientation;component/images/f1.jpg" />
      <Image Height="125" HorizontalAlignment="Center" Name="image2" Stretch="Fill" 
VerticalAlignment="Center" Width="138" Source="/WP_HandleOrientation;component/images/f2.jpg" />
      <Image Height="125" HorizontalAlignment="Right" Name="image3" Stretch="Fill" 
VerticalAlignment="Bottom" Width="138" Source="/WP_HandleOrientation;component/images/f3.jpg" />
      <Slider Height="84" Name="slider1" 
VerticalAlignment="Bottom" />
   </StackPanel>
</ScrollViewer>

Step-8: Now run the application by pressing F5 function key to run application in debug mode.

Step-9: Now select MyControls.xaml page for example-2 and set the SupportedOrientations property as PortraitOrLandscape see below code snippet.

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

Step-10: Now we can go ahead with Example-2 using Grid layout with 2 x 2 Grid, here I have added 2 rows and 2 columns here I have added few controls like picture box, button, link button, radio button and ellipse. First we need to understand that how these controls are added in the grid control, see below scratch diagram of grid.

Now and add an image control to (R0, C0) and (R0, C1). Add StackPanel control to (R1, C0) and (R1, C1). The (R1, C0)’s StackPanel containing buttons and link button to the grid, (R1, C1)’s StackPanel containing RadioButton and Ellipse. See below xaml code snippet for the same.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="204"/>
    <ColumnDefinition Width="252*"/>
  </Grid.ColumnDefinitions>
 
  <Image x:Name="Image1" Stretch="Fill" 
HorizontalAlignment="Center" Height="100" Width="111" 
Source="/WP_HandleOrientation;component/images/c1.jpg" Margin="23,0,70,0" />

  <StackPanel x:Name="buttonList" Grid.Row="1" 
HorizontalAlignment="Center" Margin="2,0,60,0">
  <Button Content="Action 1" />
  <HyperlinkButton Content="Link" Height="36" Name="hyperlinkButton1" Width="111" />
  </StackPanel>


  <Image x:Name="Image2" Grid.Column="1" Stretch="Fill" 
HorizontalAlignment="Center" Height="100" Width="124" 
Source="/WP_HandleOrientation;component/images/c2.jpg" Margin="47,0,81,0" />

  <StackPanel x:Name="buttonList1" Grid.Row="1" Grid.Column="1" 
HorizontalAlignment="Center" Margin="34,0,92,0">
     <RadioButton Content="Radio" Name="radioButton1" />
     <Ellipse Height="83" Name="ellipse1" Stroke="Black" StrokeThickness="1" Width="84">
        <Ellipse.Fill>
          <LinearGradientBrush EndPoint="1,0.8" StartPoint="0,0.8">
             <GradientStop Color="Black" Offset="0" />
             <GradientStop Color="#FFE21414" Offset="1" />
         </LinearGradientBrush>
        </Ellipse.Fill>
      </Ellipse>
      </StackPanel>
  </Grid>
</Grid>

Step-11: To and an OrientationChanged event here two ways to add this event in the page using xaml code and code behind of MyControls.xaml.cs.

Method-1 using xaml code add the following code to the top of the page under phone:PhoneApplicationPage.

OrientationChanged="PhoneApplicationPage_OrientationChanged"

While start typing OrientationChanged event it will display “”. See blow picture.

I have selected this “” option; it will create the handler in code behind with the default name of "PhoneApplicationPage_OrientationChanged."

Method-2 using code behind add the following code in the constructor.

this.OrientationChanged += new EventHandler(OrientationsWithGridLayout_OrientationChanged);

It will create the handler automatically in MyControls.xaml.cs file.

void OrientationsWithGridLayout_OrientationChanged(object sender, OrientationChangedEventArgs e)
{

}

Step-12: The following code will switch the position of the controls in the grid based on an orientation change.
While start typing OrientationChanged it will display “”. See blow picture.

void OrientationsWithGridLayout_OrientationChanged(object sender, OrientationChangedEventArgs e)
{

   if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait))
   {
      Grid.SetRow(Image1, 0);
      Grid.SetColumn(Image1, 0);
      Grid.SetRow(buttonList, 1);
      Grid.SetColumn(buttonList, 0);

      Grid.SetRow(Image2, 0);
      Grid.SetColumn(Image2, 1);
      Grid.SetRow(buttonList1, 1);
      Grid.SetColumn(buttonList1, 1);
   }
   else
   {
      Grid.SetRow(Image1, 0);
      Grid.SetColumn(Image1, 0);
      Grid.SetRow(buttonList, 0);
      Grid.SetColumn(buttonList, 1);

      Grid.SetRow(Image2, 1);
      Grid.SetColumn(Image2, 0);
      Grid.SetRow(buttonList1, 1);
      Grid.SetColumn(buttonList1, 1);
   }
}

Step-13: Now run the application by pressing F5 function key to run application in debug mode.

Thank you!