技术开发 频道

Windows Phone7 Pivot应用程序开发实践

  【IT168技术】如果你使用微软的Zune播放器或Windows Media Center,我敢肯定你一定看到过Pivot(透视)控件,如果没有看到也没关系,读完本文就明白了。

  使用Windows Phone 7 SDK的最新版本,开发人员可以创建两种新的应用程序:Pivot和Panorama(透视和全景),在这篇文章中,我将介绍如何开发Pivot应用程序,展示它是什么,以及在什么情况下它可能非常有用。

  你需要安装Windows Phone 7开发工具的最新版,以便符合我的示例需要,如果你已经安装好一切,只需要启动Visual Studio 2010,并创建一个Windows Phone 7 Pivot应用程序。

Windows Phone7 Pivot应用程序开发实践
▲图 1 在Visual Studio 2010中创建一个新的Windows Phone Pivot应用程序

  项目创建好后,你会看到它和其它Windows Phone 7应用程序没有太大的不同,项目结构和XAML布局都一样,但有一个重大的差别是,辅助Grid控件变成了Pivot控件。

Windows Phone7 Pivot应用程序开发实践
▲图 2 Pivot控件取代了传统的Grid控件

  Pivot控件允许你拥有多个Pivot项目,实际上是独立的面板,在点击或选中时自动切换,为了向你解释它是如何工作的,我创建了一个简短的视频演示Pivot控件在Windows Phone 7模拟器中的行为。

  你可以在任何Windows Phone 7应用程序中使用Pivot控件,只要你有合适的控件命名空间引用,下面让我们通过在一个非Pivot应用程序中使用它近距离看一下控件的结构。

  首先,添加一个Microsoft.Phone.Controls引用:

Windows Phone7 Pivot应用程序开发实践
▲图 3添加Microsoft.Phone.Controls引用

  现在,在你想使用Pivot控件的页面上,为它声明XML命名空间,确保在页面头部,添加下面的xmlns引用:

xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
Now on yor page, you can create an instance of the Pivot control:
<controls:Pivot>

</controls:Pivot>

  就其本身而言,它不是真的有用,你需要显示在不同小节的真实内容,Pivot控件基本上依赖于它的子元素 — PivotItem实例,PivotItem是和Pivot控件本身命名空间相同的成员,因此你可以创建多个PivotItem实例:

<controls:Pivot>
    
<controls:PivotItem></controls:PivotItem>
    
<controls:PivotItem></controls:PivotItem>
    
<controls:PivotItem></controls:PivotItem>
    
<controls:PivotItem></controls:PivotItem>
    
<controls:PivotItem></controls:PivotItem>
</controls:Pivot>

  PivotItem实例本身也是毫无意义的,因此你需要设置一些附加属性让它们工作,如果你看了我制作的视频介绍,你应该看到每个可切换的面板都绑有特殊的头,它们是由每个PivotItem实例的Header属性定义的,我给每个PivotItem实例设置了Header属性,而XAML表现并没有太多变化:

<controls:Pivot>
    
<controls:PivotItem  Header="red"></controls:PivotItem>
    
<controls:PivotItem Header="green"></controls:PivotItem>
    
<controls:PivotItem Header="blue"></controls:PivotItem>
    
<controls:PivotItem Header="purple"></controls:PivotItem>
    
<controls:PivotItem Header="white"></controls:PivotItem>
</controls:Pivot>

  现在我可以在Pivot控件中看到代表特定内容的独立面板:

Windows Phone7 Pivot应用程序开发实践
▲图 4 代表不同颜色的独立面板

  当然,每个PivotItem里面都可能有内容存在,这可以通过Content属性设置,或在PivotItem标签之间简单地插入一个组件实现,有一件重要的事情需要记住,你只能设置一次Content属性,因此下面的代码是无效的:

<controls:PivotItem  Header="red">
    
<TextBlock></TextBlock>
    
<Image></Image>
</controls:PivotItem>

  Content被设置为TextBlock,然后又被设置为Image,在这种情况下,你需要多个控件,然后将它们放在一个容器中,如Grid,也就是说,下面的代码才是有效的: 

<controls:PivotItem  Header="red">
    
<Grid>
        
<TextBlock></TextBlock>
        
<Image></Image>
    
</Grid>
</controls:PivotItem>
 

  为了实验目的,我在每个PivotItem中插入了一个Grid,Background设置的颜色分别和它们的名字对应,XAML代码如下:

<controls:Pivot>
    
<controls:PivotItem  Header="red">
        
<Grid Height="630" Background="Red" />
    
</controls:PivotItem>
    
<controls:PivotItem Header="green">
        
<Grid Height="630" Background="Green" />
    
</controls:PivotItem>
    
<controls:PivotItem Header="blue">
        
<Grid Height="630" Background="Blue" />
    
</controls:PivotItem>
    
<controls:PivotItem Header="purple">
        
<Grid Height="630" Background="Purple" />
    
</controls:PivotItem>
    
<controls:PivotItem Header="white">
        
<Grid Height="630" Background="White" />
    
</controls:PivotItem>
</controls:Pivot>

  结果看起来如下图所示(显然,我不能在这里显示滑动动画):

Windows Phone7 Pivot应用程序开发实践
▲图 5 输出结果

  在PivotItem实例之间切换也可以在隐藏代码中完成,如果那样,你需要为主Pivot控件和所有PivotItem设置x:Name,每个控件有一个唯一的识别符后,你就可以设置PivotItem实例的Pivot.SelectedItem属性。

  PivotControl.SelectedItem = PivotItemInstance;

  正如你在本文看到的,当用户面对多个内容块通过相似的标准分组时可以使用Pivot控件,我们一起来看一些现实中的例子:

  设置 — 用户可以修改应用给不同参数组(如音乐播放,专辑封面大小等)的不同设置。

  搜索结果 — Kirupa Chinnathambi展示了一个非常有趣的例子。

  广播流 — 如果你开发一个流应用程序,用户可以通过简单的滑动面板在广播台之间切换。

  还可以列出数百个这样的应用实例,我感肯定,开发人员可以在任何应用程序中使用Pivot控件,它可以让导航变得简单快速(而不是像某些时候需要在页面之间切换)。

0
相关文章