Windows phone7 Study Notes 08 -- screen orientation

WP7 supports portrait and landscape screens, but by default, the Silverlight program starts vertically and the xNa program starts horizontally (the game usually performs better on a wide screen ). You can change the orientation of screen support and startup by modifying supportedorientations = "portrait" orientation = "portrait.

　　Supportedorientations: Supports screen orientation. There are three options:

• Portrait (default)
• Landscape
• Portraitorlandscape

　　Orientation: Orientation of the startup screen:

• 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)

If supportedorientations is supported, the system will automatically flip the screen when you flip the screen. However, the system's automatic flip processing is generally not good, so we need to relay the layout. This is to rewrite orientationchanged.

public About()        
{           
 　　InitializeComponent();    
 　　OrientationChanged += new EventHandler<OrientationChangedEventArgs>(About_OrientationChanged);        
}

Void about_orientationchanged (Object sender, orientationchangedeventargs E)
{
If (E. Orientation = pageorientation. landscapeleft | E. Orientation = pageorientation. landscaperight)
{
Titlepanel. Visibility = visibility. collapsed; // The landscape is invisible.
}
Else if (E. Orientation = pageorientation. portraitdown | E. Orientation = pageorientation. portraitup)
{
Titlepanel. Visibility = visibility. visible; // portrait visible
}
}

The following two layout tips show how the page looks better after being flipped.

　　1. Use auto-Resize and scroll

This technique requires the use of stackpanel in the scrollviewer control, which is suitable for displaying list data or a control followed by a control. Stackpanel allows the internal controls to be displayed one by one. The scrollviewer control allows the scroll bar to be displayed in stackpanel when the control exceeds the screen.

The steps are to replace the grid (not added below the grid) with scrollviewer and stackpanel. For example:

<ScrollViewer x:Name="ContentGrid" Grid.Row="1" VerticalScrollBarVisibility="Auto">
　　<!--You must apply a background to the StackPanel control or you will be unable to pan the contents.-->
　　<StackPanel Background="Transparent" >
　　　　<!--Adding various controls and UI elements.-->
　　　　<Button Content="This is a Button" />
　　　　<Rectangle Width="100" Height="100" Margin="12,0" HorizontalAlignment="Left" Fill="{StaticResource PhoneAccentBrush}"/>
　　　　<Rectangle Width="100" Height="100" HorizontalAlignment="Center" Fill="{StaticResource PhoneAccentBrush}"/>
　　　　<Rectangle Width="100" Height="100" Margin="12,0" HorizontalAlignment="Right" Fill="{StaticResource PhoneAccentBrush}"/>
　　　　<TextBlock Text="This is a line of text that will wrap in portrait orientation but not landscape orientation." TextWrapping="Wrap" />
　　　　<CheckBox Content="A CheckBox"/>
　　　　<RadioButton Content="A RadioButton" />
　　</StackPanel>
</ScrollViewer>

 

　　2. Use grid layout

The elements of this technique are arranged in the grid. When the direction changes, you can programmatically reposition the row and column of the element in the grid (I .e., change the grid. Row and grid. Column attributes of the child element ).

XAML

            <!--Create a 2 x 2 grid to store an image and button layout.-->
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <!--Add an image to the grid. Ensure that the image height and width are set to 300 and 500, respectively, for this example.-->           
<Image x:Name="Image1" Grid.Row="0" Grid.Column="0" Stretch="Fill" HorizontalAlignment="Center" Source="TestImage.jpg" Height="300" Width="500"/>


            <!--Add a StackPanel with buttons to the row beneath the image.-->
            <StackPanel x:Name="buttonList" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" >
                <Button Content="Action 1" />
                <Button Content="Action 2" />
                <Button Content="Action 3" />
                <Button Content="Action 4" />
            </StackPanel>

C #

(1) In The XAML code of the mainpage. XAML file, add the following code toPhone: phoneapplicationpage.

OrientationChanged="PhoneApplicationPage_OrientationChanged"

(2) Go to mainpage. XAML. CS and find the event handler. The following code changes the Key List position based on the direction.

private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
        {
// Switch the placement of the buttons based on an orientation change.

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

            }

// If not in the portrait mode, move buttonList content to a visible row and column.

else
            {
                Grid.SetRow(buttonList, 0);
                Grid.SetColumn(buttonList, 1);

            }

        }

 

There is also an article is to explain the use of visualstate layout screen direction processing, this has the need of children's shoes can look at: http://www.cnblogs.com/kiminozo/archive/2012/02/12/2347903.html

 

Reference: http://msdn.microsoft.com/zh-cn/library/ff769553 (vs.92). aspx