Windows Phone 7 development on the 31st day-4th: Device direction

By Jeff Blankenburg

This article is"Discussion on Windows Phone 7 development on the 31st day"4th day of the series.

Yesterday we discussed a dedicated hardware button for Windows Phone -- The Return key. Today we focus on another hardware feature: Device direction.

Vertical and horizontal

The difference between the two terms is not very obvious. The vertical direction is the vertical direction of the device, and the horizontal direction is the horizontal direction. Both directions are supported in Windows Phone 7, but by default, SilverlightProgramThe xNa program starts horizontally (the game usually performs better on a wide screen ). This articleArticle.

The default project is "vertical only"

If you look at the header information of the mainpage. XAML file, you will find two attributes:

 
Supportedorientations ="Portrait"Orientation ="Portrait"
 

You can think of supportedorientations as a list of possible situations that you are going to support in the program. You can set supportedorientations to any of the following three values:
 

• Portrait (default)
• Landscape
• Portraitorlandscape

The orientation attribute is how your program is presented at startup. It has more optional values, but remember to include them horizontally in supportedorientations if you want to start them in Landscape mode. The following is a list of orientation values:

• Landscape
• Landscapeleft (flip the phone to the left and the head to the left)
• Landscaperight (flip the phone to the right, with the head on the right)
• Portrait
• Portraitdown (normal vertical direction)
• Portraitup (inverted)

You can see that in the above table, you can not only specify the vertical or horizontal direction, but also specify the arrangement of these directions. This allows you to start your application in your preferred direction.

Change Direction

There are two ways to change the device direction. First, set supportedorientation to portraitorlandscape so that the operating system can implement it for you. In most cases, this is not recommended because your application interface may no longer adapt to the screen. The second method is throughCode. Let's look at an example.

This simple interface occupies the entire vertical screen.

You can see that many buttons are not in the screen at the horizontal corner. This is not an ideal user experience. The simple solution is to remove the title. I'm sure our users can see that this is a calculator. We can relay the buttons. If it makes sense for the program, do it! The purpose of this article is to tell youHowChange your program, instead of telling you to changeWhat. I used the following code to remove and reproduce the title bar (this is all the content of the mainpage. XAML. CS file ):

Code Using System;
Using System. Collections. Generic;
Using System. LINQ;
Using System. net;
Using System. windows;
Using System. Windows. controls;
Using System. Windows. documents;
Using System. Windows. input;
Using System. Windows. Media;
Using System. Windows. Media. animation;
Using System. Windows. shapes;
Using Microsoft. Phone. controls;

Namespace Day4_deviceorientation
{
Public   Partial   Class Mainpage: phoneapplicationpage
{
// Constructor
Public Mainpage ()
{
Initializecomponent ();
This . Orientationchanged + =   New Eventhandler < Orientationchangedeventargs > (Mainpage_orientationchanged );
}

Void Mainpage_orientationchanged ( Object Sender, orientationchangedeventargs E)
{
If (E. Orientation = Pageorientation. landscaperight) | (E. Orientation = Pageorientation. landscapeleft ))
{
Titlepanel. Visibility = Visibility. collapsed;
}
Else   If (E. Orientation = Pageorientation. portraitdown) | (E. Orientation = Pageorientation. portraitup ))
{
Titlepanel. Visibility = Visibility. visible;
}
}
}
}

Because I only care about whether the program is horizontal or vertical (rather than all directions), I can detect both States and adjust the interface accordingly. You can separate each case to make the interface look different.

Note the handler I created for the orientationchanged event. This is the easiest way to identify changes in the direction. Generally, you can use the accelerator sensor that will be introduced on the seventh day. Let's take a look at the final example after using the new code:

Download Sample Code

This is not a calculator that can be used, but you can try it as a beginner project. Download this project and add the missing features.

Address: http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-4-Device-Orientation.aspx