如何为 Windows Phone 创建全景应用程序

2012/2/9

本主题介绍如何在 Windows Phone 中创建全景应用程序。对于全景示例,请参阅 Windows Phone 的代码示例

本主题演示以下步骤:

  • 创建一个包含三个 PanoramaItem 控件或部分的全景应用程序。

  • 设置 Panorama 控件的背景图像。

  • 向每个 PanoramaItem 控件中添加各种控件和内容

  • 更改 PanoramaItem 控件上的方向和内容布局

在本节中,您将在 Visual Studio 中创建一个全景应用程序并添加三个 PanoramaItem 控件。此过程将向您的项目中添加一个“Windows Phone 全景页面”,该页面预填充一个 Panorama 控件和一些 PanoramaItem 控件。您将另外添加一个 PanoramaItem 并对 Panorama 控件应用背景图像。

创建基本全景应用程序的步骤

  1. “开始”菜单启动 Visual Studio 2010 Express for Windows Phone

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

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

  4. 选择“Windows Phone 应用程序”模板。填写所需的项目“名称”

  5. 单击“确定”。将创建一个新项目并在 Visual Studio 设计器窗口中打开 MainPage.xaml

  6. “解决方案资源管理器”中,右键单击该项目,单击“添加”,然后单击“新项”。选择“Windows Phone 全景页面”,然后单击页面底部的“添加”。对该项目使用默认名称 PanoramaPage1.xaml

  7. MainPage.xaml 中,向名为 ContentPanel 的网格中的 XAML 代码中添加以下代码:

    <HyperlinkButton Content="Panorama Application Example" Height="57" HorizontalAlignment="Left" Margin="49,116,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="383" NavigateUri="/PanoramaPage1.xaml"/>
    
    
    
    注意注意:

    创建此超级链接的目的是为您的应用程序创建一个起点。在应用程序运行时,用户将点按此超级链接以前移到此全景体验。您不必使用超级链接作为全景应用程序的默认条目机制;超级链接仅用作本练习中使用的一个示例。可以将全景体验配置为当用户启动应用程序时立即可见。

  8. PanoramaPage1.xaml 中,XAML 代码中的以下代码应该可见:

       <!--LayoutRoot contains the root grid where all other page content is placed.-->
        <Grid x:Name="LayoutRoot">
            <controls:Panorama Title="my application">
    
                <!--Panorama item one-->
                <controls:PanoramaItem Header="item1">
                    <Grid/>
                </controls:PanoramaItem>
    
                <!--Panorama item two-->
                <controls:PanoramaItem Header="item2">
                    <Grid/>
                </controls:PanoramaItem>
            </controls:Panorama>
        </Grid>
    
    
    注意注意:

    前面的代码创建一个“全景”控件并为其分配一个标题。接下来,您将创建两个 PanoramaItem 控件,每个控件分配一个标头。对于此项目,我们将创建三个 PanoramaItem 控件,在下一步中将再创建一个 PanoramaItem

  9. <!--Panorama item two--> 部分后面,向以下代码中再添加一个 PanoramaItem 控件:

    <!--Panorama item three.-->
           <controls:PanoramaItem Header="item3">
               <Grid/>
          </controls:PanoramaItem>
    
    

下图演示了基本的全景控件并且 PanoramaItem 控件应该出现在此阶段的练习中:

AP_CoreCon_PanoBase

在本节中,您将对 Panorama 控件应用图像。对于本主题,使用示例图像 samplePhoto.jpg。在应用程序中使用大小适当的图像。背景图像应当在 480 x 800 像素和 1024 x 800 像素(宽 x 高)之间,以确保较高的性能、最少的加载时间,以及不需要缩放处理。如果您的图像高度不为 800 像素,则将其拉伸到该高度,而不保持纵横比。

设置背景图像的步骤

  • Panorama 控件代码 <controls:Panorama Title="my application"> 后面的 XAML 代码中添加以下代码:

    <!--Assigns a background image to the Panorama control.-->
         <controls:Panorama.Background>
            <ImageBrush ImageSource="samplePhoto.jpg"/>
         </controls:Panorama.Background>
    
    

    或者,您也可以在代码隐藏文件或页面中采用编程方式更改控件的 Background。向代码隐藏文件中添加 System.Windows.Media.Imaging 命名空间的 using 指令。若要采用编程方式更改 Background,请向页面构造函数、一个 OnNavigatedTo 重写中或者代码中要设置 Panorama 控件的 Background 的某个其他位置添加以下代码。该代码假定您拥有名为 Panorama 的控件 PanoControl

    
    BitmapImage bitmapImage = new BitmapImage(new Uri(“samplePhoto.jpg”,UriKind.Relative));
    ImageBrush imageBrush = new ImageBrush();
    imageBrush.ImageSource = bitmapImage;
    PanoControl.Background = imageBrush;
    
    

在本节中,您将向每个 PanoramaItem 控件中添加各种控件和内容。您还将第二个 PanoramaItem 方向翻转为水平,这样便提供了此内容的唯一视角。例如,内容部分将扩展超出屏幕并且用户必须平移才能展示它的其余部分。

向第一个全景项中添加内容

对于第一个 PanoramaItem,您将添加一对包含换行文本的 TextBlock 控件。这两个控件都将放置在一个 StackPanel 控件中。这是如何显示 PanoramaItem 控件中内容的一个简单演示。

向第一个 PanoramaItem 中添加内容的步骤

  • 向第一个 PanoramaItem <controls:PanoramaItem Header="item1"> 后面的 XAML 代码中添加以下代码。您必须首先删除现有的 <Grid/> 标记。

             <Grid>
             <!--This code creates two TextBlock controls and places them in a StackPanel control.-->
                <StackPanel>
                    <TextBlock
                        Text="This is a text added to the first panorama item control"
                        Style="{StaticResource PhoneTextLargeStyle}"
                        TextWrapping="Wrap"/>
                    <TextBlock Text=" "/>
                    <TextBlock
                        Text="You can put any content you want here..."
                        Style="{StaticResource PhoneTextLargeStyle}"
                        TextWrapping="Wrap"/>
                </StackPanel>
             </Grid>
    
    注意注意:

    第一个 PanoramaItem 应该类似于本主题底部所示的插图。

向第二个全景项中添加内容

在本节中,您将 PanoramaItem 控件的方向更改为水平。所得到的效果就是内容超出了屏幕并且用户必须水平平移才能展示其余内容。

向第二个 PanoramaItem 中添加内容的步骤

  1. 将第二个 PanoramaItem 的方向更改为水平。在 XAML 代码中,将第二个 PanoramaItem 控件的 Orientation 属性设置为 Horizontal

    <controls:PanoramaItem
          Header="item2"
          Orientation="Horizontal">
    
    
  2. 向第二个 PanoramaItem, <controls:PanoramaItem Header="item2" Oreintation=”Horizontal”> 后面的 XAML 代码中添加以下代码。您必须首先删除现有的 <Grid/> 标记。

    
       <!--Assigns a border to the PanoramaItem control and background for the content section.-->
            <Grid>
                <Border
                    BorderBrush="{StaticResource PhoneForegroundBrush}"
                    BorderThickness="{StaticResource PhoneBorderThickness}"
                    Background="#80808080">
                    
                    <TextBlock
                        Text="This content is very wide and can be panned horizontally."
                        Style="{StaticResource PhoneTextExtraLargeStyle}"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" >                  
                    </TextBlock>
                        
                </Border>
             </Grid>
    
    
    
    注意注意:

    第二个 PanoramaItem 应该类似于本主题底部所示的插图。

向第三个全景项中添加内容

对于最后一个 PanoramaItem,您将在 ListBox 控件内放置一系列字符串文本值。目的是表明您能够导航托管的控件。用户将能够上下垂直平移列表内容。

向第三个全景项添加内容的步骤

  1. PanoramaPage1.xaml 中,在 XAML 代码中添加以下命名空间声明:

    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    
    
    
    注意注意:

    引用此程序集是向 Listbox 控件中添加多行字符串文本。

  2. 向第三个 PanoramaItem <controls:PanoramaItem Header="item3"> 后面的 XAML 代码中添加以下代码。您必须首先删除现有的 <Grid/> 标记。

    
    <!--This code adds a series of string text values.-->
    <Grid>
                <ListBox FontSize="{StaticResource PhoneFontSizeLarge}">
                    <sys:String>This</sys:String>
                    <sys:String>item</sys:String>
                    <sys:String>has</sys:String>
                    <sys:String>a</sys:String>
                    <sys:String>short</sys:String>
                    <sys:String>list</sys:String>
                    <sys:String>of</sys:String>
                    <sys:String>strings</sys:String>
                    <sys:String>that</sys:String>
                    <sys:String>you</sys:String>
                    <sys:String>can</sys:String>
                    <sys:String>scroll</sys:String>
                    <sys:String>up</sys:String>
                    <sys:String>and</sys:String>
                    <sys:String>down</sys:String>
                    <sys:String>and</sys:String>
                    <sys:String>back</sys:String>
                    <sys:String>again.</sys:String>         
                </ListBox>
    </Grid>
    
    
    
    注意注意:

    第三个 PanoramaItem 应该类似于本主题底部所示的插图。

  3. 通过选择“调试 | 启动调试”菜单命令运行应用程序。这将打开模拟器窗口并启动该应用程序,或者部署到您选择的设备。

    AP_CoreCon_PanoFinish

显示: