信息
您所需的主题如下所示。但此主题未包含在此库中。

如何为 Windows Phone 8 创建 Pivot 应用

2014/6/18

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

 

在 Visual Studio 中,有多种在 Windows Phone 中创建 Pivot 体验的方法:

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

  • 在 Visual Studio 中,可以向工具箱添加 Pivot 控件并且可以轻松放置到您的项目中。

  • 您可以向现有项目添加“Windows Phone Pivot 页面”

本主题介绍如何通过向现有项目添加“Windows Phone Pivot 页面”来创建 Pivot 应用。您可以在 Windows Phone 开发人员中心的示例库中找到 Pivot 应用示例。

本主题包括以下部分。

 

在这部分中,您将在 Visual Studio 中创建一个 Pivot 应用。此过程将向您的项目中添加一个“Windows Phone Pivot 页面”,该页面预填充一个 Pivot 控件和一些 PivotItem 控件。您将另外添加一个 PivotItem

创建基本 Pivot 应用的步骤

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

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

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

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

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

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

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

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

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

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

    <!--LayoutRoot is the root grid where all page content is placed.-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <!--Pivot Control-->
            <controls:Pivot Title="MY APPLICATION">
                <!--Pivot item one-->
                <controls:PivotItem Header="item1">
                    <Grid/>
                </controls:PivotItem>
    
                <!--Pivot item two-->
                <controls:PivotItem Header="item2">
                    <Grid/>
                </controls:PivotItem>
            </controls:Pivot>
        </Grid>
    
    
    说明注意:

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

  9. <!--Pivot item two--> 部分后面,通过以下代码再添加一个 PivotItem 控件:

       <!--Pivot item three.-->
            <controls:PivotItem Header="item3">
               <Grid/>
            </controls:PivotItem>
    
    

在本节中,您将向每个 PivotItem 控件中添加各种控件和内容。

向第一个 Pivot 项中添加内容

对于第一个 PivotItem,您将添加包含环绕文字的 TextBlock 控件。

向第一个 Pivot 项添加内容的步骤

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

    <Grid>
        <!--Added TextBlock control with formatted text.-->
        <TextBlock
           TextWrapping="Wrap"
           Style="{StaticResource PhoneTextLargeStyle}">
           <Run>This is a simple sample for the pivot control adding text.</Run>
           <LineBreak/>
           <LineBreak/>
           <Run>You can put any content you want here...</Run>
      </TextBlock>
    </Grid>
    
    说明注意:

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

向第二个 Pivot 项中添加内容

对于这个页面,您将添加包含背景图像和换行文本的分类内容。对于本主题,使用示例图像 samplePhoto.jpg。您必须相应更改下面的代码以容纳您的图片。

向第二个 Pivot 项添加内容的步骤

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

    <!--Added background image and text content.-->
        <Border
            BorderBrush="{StaticResource PhoneForegroundBrush}"
            BorderThickness="{StaticResource PhoneBorderThickness}">
                 <Grid>
                     <Image
                        Source="samplePhoto.jpg"
                        Stretch="UniformToFill"/>
                     <TextBlock
                        Text="Here is some generic content to take up space."
                        TextWrapping="Wrap"
                        Style="{StaticResource PhoneTextExtraLargeStyle}" />
                </Grid>
         </Border>
    
    说明注意:

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

向第三个 Pivot 项中添加内容

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

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

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

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

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

  2. 向第三个 PivotItem 代码行 <controls:PivotItem 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>
    
    
    说明注意:

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

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

    AP_CoreCon_PivotSample

显示: