|
In this article we will discuss about orientation in Windows Phone 7. Silverlight programs runs in portrait mode in Windows Phone 7. If you run the program Part 1 - Windows Phone 7 and turn the emulator sideways, you will notice that orientation doesn't change.
Let's see how we can do this.
In fact it is very simple to achieve the orientation when phone or emulator is moved sideways. Change SupportedOrientations to PortraitOrLandscape from Portrait in the PhoneApplicationPage tag in MainPage.xaml.
From SupportedOrientations="Portrait" to SupportedOrientations="PortraitOrLandscape"
SupportedOrientations can be set to Portrait, Landscape or PortraitOrLandscape.
In my last article we used HorizontalAlignment and VerticalAlignment to center text.
Let's see how different combination of HorizontalAlignment and VerticalAlignment can be used.
Place nine TextBlock in the contentpanel of the Grid.
<TextBlock Text="Top-Left" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Text="Top-Center" VerticalAlignment="Top" HorizontalAlignment="Center" />
<TextBlock Text="Top-Right" VerticalAlignment="Top" HorizontalAlignment="Right" />
<TextBlock Text="Center-Left" VerticalAlignment="Center" HorizontalAlignment="Left" />
<TextBlock Text="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBlock Text="Center-Right" VerticalAlignment="Center" HorizontalAlignment="Right" />
<TextBlock Text="Bottom-Left" VerticalAlignment="Bottom" HorizontalAlignment="Left" />
<TextBlock Text="Bottom-Center" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
<TextBlock Text="Bottom-Right" VerticalAlignment="Bottom" HorizontalAlignment="Right" />
Set the SupportedOrientations property of PhoneApplicationPage tag to PortraitOrLandscape, now run the program.
The emulator should be like below image.

Now rotate the emulator, you will notice that orientation of text is also changing.

One can set the position of TextBlock using margin.
< TextBlock Text="Top-Left" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="100" />
Margin can be set using two numbers and four numbers
Margin="100 50" or Margin="100 50 200 100"
If the margins are too large the text or parts of the text will diappear. Another important point is if HorizontalAlignment and VerticalAlignment is set to be center and marging to four different numbers, text won't be centered in the content area.
TextBlock also had padding property which is used same as margin but there is slight difference in padding and marging. Margin is used to specify space outside TextBlock, padding is used to specify space inside TextBlock.
<TextBlock Text="Top-Left" VerticalAlignment="Top" HorizontalAlignment="Left" Paading="100" />
This ends the Windos Phone 7 orientation article.
|