WP7有约（一）：课程安排

WP7终于发布了到目前为止有关它的新闻和介绍我相信你已经看过不少了所以这里将会直接跳过不过在开始之前我认为还是有必要提醒你做好相关的准备Expression Blend 4 for Windows Phone和Visual Studio 2010 Express for Windows Phone你并不需要完整的Expression Studio 4 Ultimate和Visual Studio 2010 Ultimate不过如果你有的话*可能*会更好。白开水大量白开水接下来你将会与我一起进行大量脑力活动你需要补充足够的水分才能让大脑更好地工作。零食最好是坚果类薯片也可以人无法长时间集中精力也不该迫使自己长时间集中精力当你感到注意力开始涣散时不妨抓一把零食放到嘴里嚼注意别弄到键盘上哦。最后也是最重要的你没错是你仅当你准备好接受新的知识时你的大脑才会对它们进行积极的处理否则就会把它们挡在外面。那么你准备好了吗首先打开Expression Blend创建一个Windows Phone Panorama Application项目图 1项目创建好之后你会看到一个充满整个页面的Panorama控件里面有两个Panorama项每个Panorama项里面有一个ListBox而ListBox里也有了示例数据。你可以调整Artboard的缩放比例以便显示整个UI图 2注意这里所说的整个UI是指手机屏幕所能显示的部分而Panorama控件具有延伸到屏幕以外区域的特性所以我们无法一次过把整个Panorama控件尽收眼底这确实是一件憾事。接着我们来看看Panorama控件如果你对它的效果没有感性认识不妨到先看看WP7的6个内置Hub。认识Panorama控件的最简单方法是结合Objects and Timeline面板和Artboard来体验一下图 3如上图所示每个Panorama控件都是由一个标题和若干Panorama项构成的而每个Panorama项又会包含一个标题和一些内容在这里这些内容是通过ListBox来展示的你可以根据实际的需要把它换成任何其它控件。此外需要说明的是Panorama控件和Panorama项的标题都已经内化成自身的属性只需通过Properties面板设置就可以了无需额外添加TextBlock或者其它控件。现在我们的Panorama控件包含了两个Panorama项但从上图可以看到只有第一个能完全显示出来由于截图的关系Artboard的一部分隐藏在滚动条下面而第二个只能看到一小部分那么如何才能显示第二个Panorama项以便操作上面的控件呢答案非常简单只需在Objects and Timeline面板上单击第二个Panorama项就可以了图 4值得提醒的是为了在操作时不影响其它Panorama项我们还可以通过Objects and Timeline面板把其它Panorama项锁定正如上图所示的那样。在继续阅读下面的内容之前我强烈建议你稍稍暂停一下把注意力集中在Objects and Timeline面板上熟悉一下各个对象之间的关系试着单击每个对象然后看看它对应了Artboard上的哪个对象。如果你已经迫不及待想要亲自体验一下Panorama控件的效果你现在可以按F5了。接下来我们要执行以下任务修改Panorama控件的标题去掉Panorama控件的背景删除现有的两个Panorama项添加一个新的Panorama项第一个任务非常简单确保Objects and Timeline面板上的Panorama控件处于选中状态在Properties面板上的搜索框里输入Title第一个搜索结果就是我们要找的属性了修改这个属性的值然后按回车图 5第二个任务也挺简单在Properties面板上的搜索框里输入Back然后选择No brush就可以了图 6第三个任务更简单按下Ctrl键依次选中两个Panorama项然后按Del键就可以了。最后一个任务是添加新的Panorama项打开Assets面板在搜索框里输入Pan图 7然后把PanoramaItem拖到Panorama控件上就可以了。注意你可以把PanoramaItem拖到Objects and Timeline面板的Panorama控件上也可以拖到Artboard的Panorama控件上如果Artboard上的控件比较多并且把Panorama控件挡住了那么当你把PanoramaItem拖到Artboard上时有可能会把它误加到其它控件上。这是添加控件的一般方法针对添加PanoramaItem我们还有更简单的方法那就是右击Panorama控件然后选择Add PanoramaItem就可以了图 8现在向Panorama项添加一个TextBlock内容随你调整一下位置和大小然后按F5图 9一般地Panorama控件至少包含两个Panorama项而这里只有一个属于边界情况细心观察上图表面上右边好像还有一个Panorama项但当你在屏幕上向左滑动时你会发现这其实是同一个Panorama项。那么向右滑动呢情况一样。利用这个特点我们可以创建一个简易计数器把Panorama项的TextBlock绑定到一个计数变量上当我们向左滑动时计数变量加1向右时则减1其效果就像我们拥有一个无限延伸的Panorama控件而边界情况就是这个计数变量的最大值和最小值尽管如此我们也无需太过担心假设计算变量的类型是Int32我相信没有人会向左或者向右滑动超过20亿次吧如果你有兴趣的话不妨把它当做课后练习。现在按Back退出应用程序。上课啦上课啦什么课哪里上看到这些问题有没有一种亲切的感觉说不定你今天就问了这些问题哦那时你是不是在找课程表呢如果课程表就在手机里该多好啊事不宜迟了我们自己弄一个吧。右击Projects面板里的项目节点选择Add New Item图 10在弹出的New Item对话框里选择Windows Phone Pivot Page输入页面的名字然后按OK图 11和Panorama页一样Pivot页也有一个充满整个页面的Pivot控件刚创建好的Pivot控件默认附带两个Pivot项我们可以把它们分别用于星期一和星期二。确保Pivot控件处于选中状态在Properties面板上寻找Title属性并把它的值改为课程表图 12接着在Objects and Timeline面板上选中第一个Pivot项在Properties面板上寻找Header属性并把它的值改为星期一图 13完了之后把第二个Pivot项的Header属性值改为星期二。此时你的 Pivot控件应该是这样的图 14嗯看起来像个样了然而标题下面那么大的一块空位应该怎么处理呢毫无疑问以列表的方式呈现一天的课程是比较适合的但是我希望列表的每一项除了显示课程名称之外还能显示上课时间和上课地点。在继续设计UI之前我们需要导入一些示例数据以便在设计时就能看到最终效果。当然你也可以让Expression Blend为你生成这些数据不过它无法为我们生成课程名称以及适合的上课地点这样当你在设计时调整控件外观时就会感到缺了点儿什么而这正是使用真实数据的好处。假设我们要导入下面这个XML文件的数据代码 1我们可以在Data面板上单击Create sample data按钮然后选择Import Sample Data from XML…图 15在弹出的Import Sample Data from XML对话框里单击Browse按钮浏览并指定数据文件然后按OK关闭对话框图 16此时Expression Blend会很努力地在后台帮你生成一大堆东西等它做完之后你会看到Data面板上多了一堆东西现在确保Data面板上的List Mode按钮处于按下状态然后把courseCollection拖到Pivot项标题下面的空白处图 17此时Expression Blend会为你创建一个ListBox并把它的ItemsSource属性绑定到courseCollection上现在右击ListBox里的任何地方然后选择Auto Size\Fill以便让ListBox充满整个GridPivot项默认有一个Grid子元素图 18嗯不错每个列表项都包含了课程名称、上课时间、下课时间以及上课地点可是这些内容各占一行字体大小也是一样每个列表项之间又没有明显的间距显然不是那么好看下面我们给它调整一下右击ListBox里的任何地方然后选择Edit Additional Templates\Edit Generated Items (ItemTemplate)\Edit Current进入列表项模板的编辑状态图 19此时Objects and Timeline面板会发生变化上面的对象不再是我们之前看到的那些而变成列表项里的对象图 20从上图不难看出每个列表项都包含了四个TextBlock这些TextBlock是用一个StackPanel装着的。现在你可以发挥你的创造力把它调整成你喜欢的样子下面是我的调整结果图 21看到这里你可能会问怎么让上课时间和下课时间水平排列呢很简单你可以把它们放在一个StackPanel里然后把StackPanel的Orientation属性的值设为Horizontal就行了。此时Objects and Timeline面板上面的对象应该是这样的