WP7有约（五）：回到主页

Written by Allen Lee

 

In this farewell, there is no blood, there is no alibi, cause I've drawn regret from the truth of a thousand lies.
– Linkin Park, What I've done

 

最重要的问题

      还记得当初我们开发这个应用的目的吗？是为了随时随地可以查看课程信息。但你会闲来无事打开课程表查看课程信息吗？我就不会了！那用户要课程表来干嘛？一般情况下，用户查看课程表是为了回答以下问题：

1. 下一节课是什么？
2. 今天要上哪些课？
3. 明天要上哪些课？

我希望在主页上提供直接获取上述问题的答案的途径，比如说，我们可以在主页上添加下面这个格子（Tile）：

图 1

它可以清楚地告诉用户下一节课是什么，几点开始，在哪里上。至于第二、三个问题，我们可以在主页上添加下面两个格子：

图 2

值得注意的是，这两个格子的右上角都有一个箭头记号，这是为了提醒用户单击它们可以获取相关信息。我们不可能在主页上罗列今天和明天的所有课程，这样会导致信息泛滥，同时也会加重用户识别有用信息的负担，因此我们在这里提供一些捷径，以便用户更快到达包含所需信息的地方。此外，用户最常打开的页面应该是当前课程的Course Hub了，在那里用户可以完成当前课程最常用的操作，因此我们可以在主页上再添加一个格子，帮助用户直接到达那个页面：

图 3

值得注意的是，与几点上课相比，用户更加关心几点下课，因此当前课程显示的是下课时间而不是上课时间。

      我们应该把这些格子放在主页上，以便用户随时了解最重要的信息：

图 4

那么，怎样创建这样的用户界面呢？其实不难，上面的刷新按钮可以直接使用Coding4Fun Windows Phone Toolkit的RoundButton控件，而下面的四个格子由于内容结构基本相同，很容易让人想到把它们放到一个集合型的控件里，这里将会选择ItemsControl作为它们的容器。

 

创建用户界面

      首先，在主页上添加一个Panorama项，并把标题设为"课程"：

图 5

新创建出来的Panorama项默认包含一个Grid，我们可以通过Properties面板上的RowDefinitions属性把它分成上下两行，上面那行用来放置刷新按钮，高度设为自动适应，而下面那行用来放置ItemsControl，高度使用默认设置。

      好了之后，从Assets面板上把RoundButton控件拖到Grid里，默认自动放在Grid的第一行（注意，在使用RoundButton控件之前请先引用Coding4Fun.Phone.Control.dll文件）：

图 6

设置ImageSource属性，把图标换成图4里面那个，然后把Content属性的值设为"刷新"：

图 7

默认情况下，RoundButton控件的文字是位于图标下方的，而且无法直接通过设置某个属性使它的文字放在图标右边，想要达到图4的效果，我们需要修改它的样式。右击RoundButton控件，选择Edit Template\Edit a Copy进入模板编辑状态，此时，你的Objects and Timeline面板将会变成这样：

图 8

确保StackPanel处于选中状态，然后在Properties面板上把Orientation属性改为Horizontal。接着，选中StackPanel下面的ContentBody，并在Properties面板上把字体大小设为PhoneFontSizeMedium。好了之后退出模板编辑状态，此时，你的RoundButton控件应该是这样的：

图 9

看到这里，你可能会问，为什么要在模板编辑状态里设置字体大小呢？这是因为直接修改RoundButton控件的字体大小不起作用，我认为这是一个bug。我在CodePlex上提了这个问题，第二天他们就发布了修正的版本，动作好快！

      接着，在里面添加一个ItemsControl，在Properties面板上把它的Row属性设为1，并使它充满Grid的第二行。由于ItemsControl默认使用StackPanel来排列它的子元素，这会导致格子从上到下排成一列，要使格子按照图4所示的那样排列，我们需要把StackPanel替换成WrapPanel。右击ItemsControl，选择Edit Additional Templates\Edit Layout of Items (ItemsPanel)\Create Empty：

图 10

在弹出的Create ItemsPanelTemplate Resource对话框里输入模板名字，然后单击OK关闭对话框：

图 11

此时，你的Objects and Timeline面板将会变成这样：

图 12

把里面的StackPanel删掉，然后从Assets面板上把WrapPanel拖到里面：

图 13

好了之后退出模板编辑状态。

      接下来，我们将会定制每个格子的内容结构。再次右击ItemsControl，选择Edit Additional Templates\Edit Generated Items (ItemTemplate)\Create Empty，然后在弹出的Create DateTemplate Resource对话框里输入模板名字，然后单击OK关闭对话框：

图 14

此时，你会看到屏幕中间有个空白的Grid：

图 15

由于这次我们没有使用设计时数据，数据模板的设计将会比较考究想象力，不过我相信你能跟得上的。确保Grid出于选中状态，把它的Width和Height两个属性都设为190（这个数值是经过多次微调得到的最佳结果），并把它的背景色设为PhoneAccentBrush：

图 16

然后把Grid的Margin设成这样：

图 17

接着，在Grid里添加相应的控件，使它变成这样：

图 18

此时，你的Objects and Timeline面板应该是这样的：

图 19

值得提醒的是，在调整控件的大小和位置时，你可以暂时为控件硬编码一些内容，比如上图的"当前课程"和课程信息。好了之后退出模板编辑状态。

 

实现内部逻辑

      现在是时候为那些格子创建对应的ViewModel类了，不过，在开始之前我们需要搞清楚这些格子的工作方式：

1. 每个格子都有一个标题，标题内容不会改变。
2. 每个格子都有一组信息，用户可以通过单击刷新按钮更新这些信息。
3. 如果用户单击格子时将会执行某个操作，那么格子右上角需要显示箭头图标，否则不显示该图标。
4. "明天课程"有两个状态：明天有课和明天没课，如果明天有课，则显示课程总数，并显示箭头图标，单击将会打开课程表并显示明天的课程；否则显示"明天没课"，且不显示箭头图标，单击也不执行任何操作。
5. "今天课程"有三个状态：今天没课、今天有课和已经放学，如果今天没课，则显示"今天没课"，且不显示箭头图标，单击不执行任何操作；如果今天有课，并且还有课程剩余，则显示剩余课程的数目，否则显示"放学了"，这两种状态都会显示箭头图标，单击将会打开课程表并显示今天课程。
6. "下一节课"也有三个状态：今天没课、今天有课和已经放学，如果今天没课，则显示"今天没课"；如果今天有课，并且还有课程剩余，则显示下一节课，否则显示"放学了"，这个格子不显示箭头图标，单击也不执行任何操作。
7. "当前课程"有五个状态：今天没课、还没上课、正在上课、课间休息和已经放学，仅当它处于正在上课状态时才显示箭头图标，此时单击将会打开当前课程的Course Hu

   补充：移动开发 , Windows Phone ,