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

如何为 Windows Phone 创建 Pivot 应用程序

2012/2/9

本主题介绍如何在 Windows Phone 中创建 Pivot 应用程序。您可以在 Windows Phone 的代码示例主题中找到 Pivot 应用程序示例。

此练习的目标如下:

  • 创建一个包含三个不同内容页面的 Pivot 应用程序

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

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

创建基本 Pivot 应用程序的步骤

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

显示:
© 2014 Microsoft