Panorama 控件是用于全景应用的基础控件，包含三个不同的层。每个层都包含在用作 Panorama 控件的布局根的 Grid 控件中。

在任何层上执行拖动或平移将导致您应用中的所有三个层一起移动。

背景层

标题层

项层

PanoramaItem 控件是添加到 Panorama 控件的内容的各个部分。Panorama 控件可以支持多个PanoramaItem 控件并且用户可以使用支持的触摸手势浏览这些部分。PanoramaItem 控件自身由两个元素组成。每个元素都包含在用作 PanoramaItem 控件的布局根的 Grid 中。

可以在 XAML 代码中指定 PanoramaItem 控件的内容，也可以采用编程方式通过 Content 属性添加该控件的内容。

PanoramaItem 控件既支持水平方向，也支持垂直方向。下面是这些方向的特征：

• PanoramaItem 控件的垂直方向在手势移动期间将只能对齐到屏幕的左侧。

• PanoramaItem 控件的水平方向在手势移动期间将能够对齐到屏幕的左侧和右侧。

• 将 PanoramaItem 控件设置为水平方向将允许在屏幕外放置内容，而不是裁剪内容。

• 与垂直方向不同，水平方向将允许用户在内容中心平移，但不对齐到新的 PanoramaItem 控件视图   

  如何为 Windows Phone 8 创建全景应用

   

  2014/6/18

   

  适用于：Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

   

  Visual Studio 中有多种方式可以在 Windows Phone 中创建全景体验。

  • 创建新项目时，可以使用名为“Windows Phone 全景应用”的自定义模板。该模板将预填充内容，您可以相应地修改该模板。

  • 在 Visual Studio 中，可以向工具箱中添加 Panorama 控件并将其拖放到您的项目中。

  • 您可以向现有的项目添加 Windows Phone 全景页面。

  本主题将向您演示如何通过向现有的项目添加 Windows Phone 全景页面来创建全景应用。有关全景示例，请参见 Windows Phone 开发人员中心的示例库。

   

  本主题包括以下部分。

  • 创建基本全景应用
  • 设置背景图像
  • 向 PanoramaItem 控件添加控件和内容
  • 相关主题

   

  创建基本全景应用

   

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

  创建基本全景应用

  1. 从“开始”菜单启动 Visual Studio。

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

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

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

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

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

  7. 在 MainPage.xaml 中，向名为 ContentPanel 的网格中的 XAML 代码中添加以下代码：

     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 代码中的以下代码应该可见：

     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>

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

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

     XAML

      

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

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

  

  设置背景图像

   

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

  设置背景图像

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

    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。

    C#

     

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

  向 PanoramaItem 控件添加控件和内容

   

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

  向第一个 PanoramaItem 添加内容

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

  向第一个 PanoramaItem 中添加内容

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

    XAML

     

             <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 控件的方向更改为水平。所得到的效果就是内容超出了屏幕并且用户必须水平平移才能展示其余内容。

  更改第二个 PanoramaItem 的方向

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

    XAML

     

    <controls:PanoramaItem      Header="item2"      Orientation="Horizontal">

  向第二个 PanoramaItem 中添加内容

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

    XAML

     

       <!--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 添加内容

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

  向第三个 PanoramaItem 中添加内容

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

     XAML

      

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

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

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

     XAML

      

     <!--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. 通过选择“调试” | “启动调试”菜单命令运行应用。这将打开模拟器窗口并启动该应用，或者部署到您选择的设备。