windows phone 7 31天学习笔记 16: Panorama控件
原文地址:http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-16-The-Panorama-Control.aspx本文将会讨论一种新的控件:Panorama(全景)控件
什么是全景控件?
如果你看到了Windows phone 7中的视频或是图片hub,全景控件就已经在那里被使用了。简单来说,他就是一个不同的页面连接在一起,通过菜单导航展现数据。示例图如下:
创建一个全景工程
前15篇文章,每一个都是默认工程,但是对于全景,你需要创建全景工程。如下:
一件重要的事实你不需要必须使用这个工程模板才能够创建全景试图。这个工程模板给你了一个MVVM的框架来展示数据,他含有一些预定义的数据将全景控件放到页面是很容易的,稍后将会说到。
将全景控件添加到工具箱
添加全景到工具箱之前需要知道他不是默认存在的,所以并不是可见。需要添加特定的命名空间,然后才能在页面中使用它。一种简单的方式是将他添加到工具箱,然后复用他。
第一件事是打开工具箱,右键单击“Windows Phone Controls”标签,然后选择“Choose Items…”。
在对话框中自动添加了手机组件标签,你将会看到有几个已经默认选上了。他们是现在呈现在你的工具栏中的,向下滑动知道你找到了全景,添加他。
添加以后就可以轻松使用了。
添加全景到你的页面
我们通过这些前面的工作让你的工作更加轻松,删除所有的xaml元素,然后添加全景试图。通过拖拽,他已经被方式好了。默认如下:
不需要套多的东西。你已经注意到这些xml命名空间同样被添加到了页面中:
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
现在我们已经得到了最小代码的视图,让我们把全景做的好看点。下图是全景视图的不同块:
设置全景背景以及标题
一个比较cool的特色是设置一个比其他部分滑动起来慢点的大背景图。找到一个呈现你的程序的酷图,下面是我的:
为了将图片设置到全景视图中,我只需要添加起到工程中的图像刷即可。你注意到,我设置了透明度为50%。这是因为白色的字在图片上展示不好:
下图:
好了我们已经有了背景图片,下面添加内容吧。
创建全景内容
现在,我们的程序并不正常工作。他只是展示背景图片,他没有显示其他内容。通过添加全景内容,我们创建了独立的全景块,在全景内容内部,我们可以田间xaml来显示这些块区。
每一个全景内容都是独立的,所以你可以在技术上让他们全都不同,我将会带领大家浏览代码,然后讨论如何自定义内容。你注意到我已经定义了三个全景内容的头部:
看到我们如何让背景图片随同标题滚动,但是他们是速度不同的。这样能够给用户一个明显的视觉差。现在还是有些空旷,我们继续添加内容:
为全景项添加内容
你不是必须要做,但是我建议你从ListBox开始。这将会给你一个垂直滑动的内容。你有很多选择,但是listbox给你更多方便。
对于我的例子,我有5个程序想展示在屏幕上,我创建了定义的xaml,然后将他们放置在我的listbox中。如下:
这就是全部内容了。我通过连接将每一个图标单独放置在xaml文件中,但是全景给了我的用户通过程序引导至不同程序的能力。
页:
[1]