Windows Phone 7 开发 31 日谈——第16日：全景视图

 

第16日。

昨天，我们讨论了独立存储以及如何在程序中将数据保存至设备上。今天，我将完全变换视角，来介绍一个我们可以使用的相对较新的（但十分强大的）控件：全景视图控件。

什么是全景视图控件？

如果你看过windows phone 7“hub”的视频或是截图，全景视图是被广泛运用的。简而言之，它就是选项，导航和数据的多屏幕滚动菜单。下面是一些示例：

好了，现在我们知道全景视图长什么样了，来看看如何实现吧。

创建一个全景视图项目

在这个系列的前15日中，每个项目都是基于默认的windows phone application模板的。对于全景视图来说，如果你喜欢，可以使用windows phone panorama application模板。它在下面的列表中：

然而，很重要的一点是你不是只能使用这个模板来创建一个全景视图。这个项目模板利用了mvvm框架（一种很好的方法），为你预先写好了很多内容。如果想简单一些，全景视图控件是我们可以使用的另一种控件，我们可以将它添加到任意的页面中去。这正是本文想要向你展示的内容。

从工具箱中添加一个全景视图

    添加全景视图到你的页面中的第一件事就是它不是可用的默认控件（这就是它没有显示在你的visual studio 2010工具箱中的原因）。在使用之前你必须在页面中添加特定的名称空间。简单的做法是将它添加到工具箱中，然后从中重用它。

首先打开你的工具箱，右击“windows phone controls”标签。从列表中选择“choose items…”。

在出现的对话框中，它自动载入并为你打开windows phone components标签。你会看到有很多已经被勾选的控件，这些就是当前在你工具箱中的。向下滚动直到找到panorama，并添加它（明天我们会讲解枢轴控件，所以你也可以将它一并添加进来）。

一旦你在工具箱中添加了这些，你就可以很简单地在页面中加入全景视图控件了。

在页面中添加全景视图

做完前面的步骤会让你在后面更加轻松。删除掉页面中的所有xaml元素，然后添加你的全景视图。通过从工具箱中拖拽一个全景视图控件，一切就都被设置好了。默认的语法看起来如下：

<controls:panorama />

哈，开始时的内容不多。你还应该注意，在页面中添加一个新的xml名称空间：

xmlns:controls="clr-namespace:microsoft.phone.controls;assembly=microsoft.phone.controls"

既然我们在页面中使用了最少量的代码，让我们来看看现在这个全景视图控件长什么样。下图展示了全景视图控件每个不同部分的样子：

设置全景视图的背景和标题

    全景视图控件最酷的一个特色就是可以用一张很大的图片当做背景，它比其余的内容滚动的要慢。找一张绚丽的，有代表性的图片用在程序中。这是我的图片（我的应用程序是用于你在饭馆等吃的时消磨时间的。哦，这是在bowling green的corner grill餐馆）：

想将它用于全景视图控件的背景，我需要将图片添加到项目中，然后创建一个imagebrush，用此图作为源。你会注意到我将图片的透明度设为了50%。这是因为白色文字在这种亮图上显示的效果不太好。

 

<controls:panorama title="waiter">

    <controls:panorama.background>

        <imagebrush imagesource="panoramabackground.jpg" opacity=".5" />

    </controls:panorama.background>

</controls:panorama>

在电话上看起来像这样：

 

好了，现在有背景图了。让我们来添加一些内容吧。

创建panoramaitem（全景视图的项）

    现在，我们的程序还不能很好的工作。它仅仅显示了背景图片，还不能滚动，或者显示任何东西。通过添加panoramaitem，我们可以创建全景视图中独立的项，在这些panoramaitem中，我们可以添加xaml来显示这些项。

    每个panoramaitem是完全独立于另一个的，所以你可以从技术上让每个项完全不同。我会向你展示panoramaitem的代码，并且我们会在下一节讨论自定义内容。你会在下面注意到我定义了3个panoramaitem，并为每一个都设置了标题。这样在截图中可以更好地显示，所以我在代码中包含了它们。

 

 

代码

<controls:panorama title="waiter">

    <controls:panorama.background>

        <imagebrush imagesource="panoramabackground.jpg" opacity=".5" />

    </controls:panorama.background>

    <controls:panoramaitem header="learn">

       

    </controls:panoramaitem>

    <controls:panoramaitem header="play">

       

    </controls:panoramaitem>

    <controls:panoramaitem header="all">

       

    </controls:panoramaitem>

</controls:panorama>

 

 

 

  

注意背景和标题是如何滚动的，但实际上它们并不是同一速度的。这样当用户用手划过时程序可以为用户提供非常好的视觉深度。但它现在还是空的。让我们添加一些内容，使它看起来像这样：

向panoramaitem中添加内容

    你完全可以不用，但我还是建议你以listbox开始。如果有很多内容的话它能让这些内容垂直滚动。说到布局你可以有很多很多选项，但一个listbox可能会给你带来最大的便利。（另外，在代码中绑定一个列表的数据项是一种很简单的方法。.net/scottgu/pages/silverlight-tutorial-part-5-using-the-listbox-and-databinding-to-display-list-data.aspx" 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); ">参见来自scott guthrie的教程）

    我的这个例子，提供了5个你可以从这个屏幕中启动的应用程序。我创建了一些自定义xaml，并放到了listbox中。下面是xaml代码，以及模拟器中“play”这个项的截图

 

 

：

代码

<controls:panoramaitem header="play">

    <listbox margin="0,0,-12,0">

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

            <image height="100" width="100" source="icons/tictactoe.png" margin="12,0,9,0"/>

            <stackpanel width="311">                                   

                <textblock text="tic tac toe"  textwrapping="wrap" style="{staticresource phonetextextralargestyle}"/>

                <textblock text="the classic two player game" textwrapping="wrap" margin="12,-6,12,0" style="{staticresource phonetextsubtlestyle}"/>

            </stackpanel>

        </stackpanel>

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

            <image height="100" width="100" source="icons/numbers.png" margin="12,0,9,0"/>

            <stackpanel width="311">

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

                <textblock text="learn your digits from 1 - 20" textwrapping="wrap" margin="12,-6,12,0" style="{staticresource phonetextsubtlestyle}"/>

            </stackpanel>

        </stackpanel>

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

            <image height="100" width="100" source="icons/wordsearch.png" margin="12,0,9,0"/>

            <stackpanel width="311">

                <textblock text="word search"  textwrapping="wrap" style="{staticresource phonetextextralargestyle}"/>

                <textblock text="find as many words as you can" textwrapping="wrap" margin="12,-6,12,0" style="{staticresource phonetextsubtlestyle}"/>

            </stackpanel>

        </stackpanel>

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

            <image height="100" width="100" source="icons/animals.png" margin="12,0,9,0"/>

            <stackpanel width="311">

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

                <textblock text="hear and learn your favorites" textwrapping="wrap" margin="12,-6,12,0" style="{staticresource phonetextsubtlestyle}"/>

            </stackpanel>

        </stackpanel>

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

            <image height="100" width="100" source="icons/alphabet.png" margin="12,0,9,0"/>

            <stackpanel width="311">

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

                <textblock text="learn your letters" textwrapping="wrap" margin="12,-6,12,0" style="{staticresource phonetextsubtlestyle}"/>

            </stackpanel>

        </stackpanel>

    </listbox>

</controls:panoramaitem>

 

 

 

 

好了，就这些！这里的每个图标都链接到它们自己的独立xaml文件，但这个全景视图为用户提供了在实际玩儿任何游戏之前都能从我的应用程序导航的能力。

下载示例代码

这个示例代码包含了我所讲的所有内容。快下载下来并亲自学习全景视图控件吧！

 

 

 

http://www.jeffblankenburg.com/post/31-days-of-windows-phone-7c-day-16-the-panorama-control.aspx