导出 (0) 打印
全部展开

如何处理 Windows Phone 中的方向更改

2012/2/9

本主题介绍如何在应用程序中使用 Windows Phone 中的方向更改来提供井然有序的结构化 UI 内容。Windows Phone 中有三种可能的方向:纵向和横向(向左或向右)。纵向是页面内容的垂直定位,而横向则是页面内容的水平表示。用户可以通过旋转设备轻松启动从一个方向到另一个方向的更改,反之亦然。对于提供方向支持的应用程序,必须在 XAML 或代码中将 SupportedOrientations 属性配置为 PortraitOrLandscape。以下各节提供了以纵向或横向显示内容的两种机制的示例。

  • 自动调整大小和滚动 – 本示例将 StackPanel 控件与 ScrollViewer 控件一起使用以支持两个方向。如果内容显示在列表中或不同控件接连显示于页面中,则本方法是个简单易用的好方法。

  • 网格布局 – 本示例会将控件置于网格中并根据选择的方向移动网格单元格中的元素位置。

注意注意:

本主题基于 C# 开发;但也提供 Visual Basic 代码。

在本节中,将在 SupportedOrientations 属性中启用纵向和横向两种模式,并在 ScrollViewerStackPanel 控件中放置一组控件。

在两个方向自动调整内容大小和滚动内容

  1. 通过选择“文件 | 新建项目”菜单命令来创建一个新项目。

  2. 将显示“新建项目”窗口。展开“Visual C#”模板,然后选择“Silverlight for Windows Phone”模板。

  3. 选择“Windows Phone 应用程序”模板。按需要填写项目名称

  4. 在 MainPage.xaml 文件的 XAML 代码中,确保在 phone:PhoneApplicationPage 下已将 SupportedOrientations 属性设置为纵向和横向方向。如果未设置,请将其修改为以下内容:

    SupportedOrientations=”PortraitOrLandscape”
    
    注意注意:

    通过将 SupportedOrientations 属性设置为纵向和横向,应用程序将支持这两种模式。也可以在选择 PhoneApplicationPage 控件时,在设计器中设置该属性。若要选择 PhoneApplicationPage 控件,请点击模拟器窗口外的白色空白区域。

  5. 在此步骤中,将在 ScrollViewer 控件中嵌入 StackPanel 控件。StackPanel 控件允许您在应用程序中依次排序控件,而 ScrollViewer 控件允许您在 UI 内容超出屏幕范围时滚动浏览 StackPanel 内容。当您在模拟器或设备上切换为横向时就属于这种情况。在 MainPage.xaml 文件中,将以下代码添加到 Content Panel 部分下朝着页面底部的 XAML 代码中。该部分前面的注释为“<!--ContentPanel - 将其他内容置于此处-->。”删除已经填充该部分的打开和关闭 Grid 标记。

    
            <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 sample that will wrap in portrait mode but not landscape.” TextWrapping="Wrap"  />
                    <CheckBox Content="A CheckBox" />
                    <RadioButton Content="A RadioButton" />
                </StackPanel>
            </ScrollViewer>
    
    
  6. 通过选择“调试 | 启动调试”菜单命令运行应用程序。这会打开模拟器窗口并启动该应用程序。应用程序运行时,通过点击模拟器工具栏中的向左或向右按键,可以将屏幕方向从纵向切换为横向。每个按键在框上都有一个弯曲箭头。最终结果是纵向呈现无需滚动浏览的有序 UI 内容,随后横向显示需要滚动浏览的内容。

 

AP_Con_Orien_Scroll1

在此示例中,将创建网格来支持 UI 元素,然后根据方向更改来使应用程序重新放置这些元素。本练习涉及创建一个 2 x 2 的网格来支持图像和按键集合。接着,创建 OrientationChanged 事件处理程序,并提供在从纵向模式切换为横向模式(反之亦然)时,重新组织网格中这些 UI 元素的代码。

使用网格布局实现方向更改

  1. 通过选择“文件|新项目”菜单命令创建一个新项目。

  2. 将显示“新建项目”窗口。展开“Visual C#”模板,然后选择“Silverlight for Windows Phone”模板。

  3. 选择“Windows Phone 应用程序”模板。按需要填写项目名称

  4. 在 MainPage.xaml 文件的 XAML 代码中,确保在 phone:PhoneApplicationPage 下已将 SupportedOrientations 属性设置为纵向和横向方向。如果未设置,请将其修改为以下内容:

    SupportedOrientations=”PortraitOrLandscape”
    
  5. 接着,添加代码来创建 2 x 2 的网格、将图像添加到网格并将包含按键的 StackPanel 控件添加到网格。在 MainPage.xaml 中,将以下代码添加到 ContentPanel 部分下朝着页面底部的 XAML 中。该部分前面的注释为“<!--ContentPanel - 将其他内容置于此处-->。”在已经填充该部分的 Grid 标记间添加代码。

    
                <!--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>
    
    
    
    注意注意:

    在本练习中,您可以使用任何图像。示例 TestImage.jpg 必须替换为有效的图像名称和源路径。此外,还可以为按键控件使用任何名称。

  6. 在 MainPage.xaml 文件的 XAML 代码中,将以下代码添加到页面顶部的 phone:PhoneApplicationPage 下。

    OrientationChanged="PhoneApplicationPage_OrientationChanged"
    
    
    注意注意:

    当键入 OrientationChanged 时,您可以通过 IntelliSense 创建“<新建事件处理程序>”。如果选择此选项,则将使用默认名称“PhoneApplicationPage_OrientationChanged”来为您创建处理程序。

  7. 转到 MainPage.xaml.cs 并找到事件处理程序。下面的代码根据方向更改来切换按键列表的位置。

    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);
    
                }
    
            }
    
    重要说明重要说明:

    如果未向应用程序添加该代码,则按钮内容和图像将保持堆栈显示,而不是横向并列显示。按键可能会部分可见或者完全不可见。

  8. 通过选择“调试 | 启动调试”菜单命令运行应用程序。这会打开模拟器窗口并启动该应用程序。应用程序运行时,通过点击模拟器工具栏中的向左或向右按键,可以将屏幕方向从纵向切换为横向。每个按键在框上都有一个弯曲箭头。应会看到这些按键将从屏幕底部重新定向到屏幕的右侧。

 

AP_Con_Orientation(Port)

显示:
© 2015 Microsoft