Windows Phone 7 开发 31 日谈——第17日：枢轴控件

 

第17日。

昨天，我们讨论了全景视图控件以及它的作用和使用方法。今天，我要讲一个和它很相似但又不同的控件，枢轴控件。

什么是枢轴控件？

    我把枢轴控件看作是一个可以给用户提供相同数据的不同“层”的有效控件。例如，windows phone中的日历，你可以在“日程表”和“天”两个视图间来回切换。它们呈现相同的数据，但却在两个完全不同的视图中。枢轴控件另一个出色的应用是将项目进行分类。电话中的设置功能就是一个很好的例子。你可以对进行设定，或对应用程序进行设定。下面来快速浏览一下这些例子：

 

使用全景视图或枢轴控件有没有特定的场合？

是的，确实有。去这两个好地方你可以看到更多的信息。x" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(51, 51, 51); ">tim heuer写的何时你该使用这两个控件的优秀文章，还有channel 9上的windows phone design days系列视频。

我的原则很简单：

• 使用全景视图控件来介绍你程序中每一个有趣的内容。
• 当你想向用户以不同的方式展示相同的数据时使用枢轴控件。

使用枢轴控件

    如果你没有看昨天的，快去看看。我介绍了如何在visual studio 2010工具箱中获得全景视图和枢轴控件。现在，我们来深入探究枢轴控件的结构，以及如何使用它。

    它的结构非常类似于全景视图控件，但在今天的例子中，不使用静态内容，我要将将数据绑定到listbox控件中，使用datatemplate来实现。下面是我添加任何内容之前的基础枢轴控件（这个例子按性别显示了婴儿的名字）：

 

 

 

代码

<controls:pivot title="baby names">

    <controls:pivotitem header="boys">

    </controls:pivotitem>

    <controls:pivotitem header="girls">

    </controls:pivotitem>

    <controls:pivotitem header="either">       

    </controls:pivotitem>

</controls:pivot>

 

很明显，没有数据我们看不到什么。下面继续，

在listbox中使用datatemplate

对于每个pivotitem，我都添加了一个listbox，并且在listbox中，我会定义一个描述了每个数据项如何显示的itemtemplate。下面是我添加的xaml代码：

代码

<controls:pivot title="baby names">

    <controls:pivotitem header="boys">

        <listbox x:name="boylist" margin="0,0,-12,0">

            <listbox.itemtemplate>

                <datatemplate>

                    <stackpanel margin="0,0,0,17" >

                        <textblock text="{binding name}" textwrapping="wrap" style="{staticresource phonetextextralargestyle}"/>

                    </stackpanel>

                </datatemplate>

            </listbox.itemtemplate>

        </listbox>

    </controls:pivotitem>

    <controls:pivotitem header="girls">

        <listbox x:name="girllist" margin="0,0,-12,0">

            <listbox.itemtemplate>

                <datatemplate>

                    <stackpanel margin="0,0,0,17" >

                        <textblock text="{binding name}" textwrapping="wrap" style="{staticresource phonetextextralargestyle}"/>

                    </stackpanel>

                </datatemplate>

            </listbox.itemtemplate>

        </listbox>

    </controls:pivotitem>

    <controls:pivotitem header="either">

        <listbox x:name="alllist" margin="0,0,-12,0">

            <listbox.itemtemplate>

                <datatemplate>

                    <stackpanel margin="0,0,0,17" >

                        <textblock text="{binding name}" textwrapping="wrap" style="{staticresource phonetextextralargestyle}"/>

                    </stackpanel>

                </datatemplate>

            </listbox.itemtemplate>

        </listbox>

    </controls:pivotitem>

</controls:pivot>

 

在这个系列中我们没有提到databinding。你会注意到对于每个textblock，text属性的值都被定义为“{binding name}”。这意味着不论我向listbox中传入任何对象，textblock都会使用对象的name属性当做它的text属性值。为了向listbox中存入数据，我们要在代码后置的文件中写少许代码（这是mainpage.xaml.cs文件的所有内容）：

代码

using system;

using system.collections.generic;

using system.linq;

using system.net;

using system.windows;

using system.windows.controls;

using system.windows.documents;

using system.windows.input;

using system.windows.media;

using system.windows.media.animation;

using system.windows.shapes;

using microsoft.phone.controls;

 

namespace day17_pivotcontrol

{

    public partial class mainpage : phoneapplicationpage

    {

        babyname[] names = new babyname[10] {new babyname("steve", 1, 0),

                    new babyname("jennifer", 2, 0),

                    new babyname("alex", 1, 2),

                    new babyname("casey", 1, 2),

                    new babyname("quinn", 1, 2),

                    new babyname("anthony", 1, 0),

                    new babyname("sarah", 2, 0),

                    new babyname("parker", 2, 1),

                    new babyname("jessica", 2, 0),

                    new babyname("jeff", 1, 0)};

       

        // constructor

        public mainpage()

        {

            initializecomponent();

            boylist.itemssource = from n in names

                    where (n.gender1 == 1 || n.gender2 == 1)

                    orderby n.name

                    select new babyname(n.name, n.gender1, n.gender2);

 

            girllist.itemssource = from n in names

                    where (n.gender1 == 2 || n.gender2 == 2)

                    orderby n.name

                    select new babyname(n.name, n.gender1, n.gender2);

 

            alllist.itemssource = from n in names

                    orderby n.name

                    select new babyname(n.name, n.gender1, n.gender2);

        }

    }

}

 

你会看到对于每个listbox，我都将babyname对象的数组用简单的linq语法赋给了itemssource属性。如果你不熟悉linq，你就错过了语言集成查询功能。这有一个非常棒的linq学习资源列表。

 

 

 

定义了这些查询后，我就可以轻松的对数据集合进行排序，解析，并将相同数据的不同集合赋予每个pivotitem项。

就是这些内容！通常情况下你不应该在全景视图或枢轴控件中使用超过7个项（如果你这么做了，你应该想想用其他的方式……），这主要是因为那是你的用户能记住的上限。如果他们忘了，就不会去用了，对吗？（7是已知的人类记忆的上限，这也是为什么我们的电话号码也是这个长度。）

下载示例代码

这个例子演示了如何在windows phone 7中实现一个枢轴控件，使用真实数据来填充listbox。下载后可以边玩边学。

 

原文地址：http://www.jeffblankenburg.com/post/31-days-of-windows-phone-7c-day-17-the-pivot-control.aspx