WP7有约（三）：课堂重点

Written by Allen Lee

 

Crawling in my skin, these wounds they will not heal. Fear is how I fall, confusing what is real.

– Linkin Park, Crawling

 

记笔记

      俗话说：好记性不如烂笔头。当然，这并不是说我们的脑子不好使，也不是叫我们不要用脑子记东西，而是提醒我们解放脑力，让大脑从事更有价值的思考。因此，这节课我们将会创建一个笔记本，用来记录课堂重点，但是，我们需要什么样的笔记本呢？我曾经在《你的灯亮着吗？》里读到这样一句话：如果某人能够解决这个问题，但是他本人却不会遇到这一问题时，那么你们首先要做的就是让他也感受到这个问题。最近公司来了一批校招生，我找了个机会混进去听了一节入职前的技术培训，我想知道在课堂上把手机掏出来记笔记是一种什么样的感觉。

      在课堂上，每当我想记点什么时，就会不自觉地拿起纸笔而不是手机，而且，用手机记笔记远没用纸笔来得随意自如。随后，我找了一些大学生和中学生，分别了解一下他们记笔记的情况，结果发现，他们记笔记的方式真是多种多样，有的直接记在书上，有的记在专门的笔记本上，有的记在练习册上，有的记在卷子上，有的甚至用手机把老师的板书直接拍下来……不难看出，他们的做法是怎么方便就怎么记，就目前而言，企图用一个手机应用来取代他们现有的做法显然是不现实的，也没必要，用户有权选择他们认为适合的做法，而我们的职责只是提供必要的帮助和支持。

      那么，我们可以提供什么样的帮助和支持呢？想想看，现有的自由零散的做法会导致什么问题呢？最直接的影响是很难快速找到想要的内容，因为它们可能遍布各处，这种时候要是有个索引或者目录什么的就好了……Bingo！我们可以创建一个应用，帮助用户建立这个索引，虽然用户也可以另外找本小册子建立索引，但我们可以通过一个标签系统帮助用户快速找到相关的内容。这样，用户既可以保留现有的自由的记笔记习惯，又可以获得新的有序的管理效果。那么，用户应该在何时以及如何建立这个索引呢？

      当然是越早越好！比如说，用户可以在每晚做完作业之后稍稍整理一下笔记，然后为它们创建一些条目并贴上标签。用户不必为所有笔记创建条目，可以挑选重要的来创建，这个过程本身就可以加深对知识的理解和巩固对知识的记忆。至于条目的内容，用户可以引用课本或者老师板书的原话，也可以用自己的话来概括复述，还可以直接引用课本或者练习册的页码和位置（段落、题号或者标记）等等，这个过程可以帮助用户熟悉如何根据条目的内容找到对应的笔记。

      现在，用Visual Studio打开项目，在Models文件夹里创建一个Note类，并让它继承NotificationObject类：

代码 1

根据前面的讨论，Note类应该包含以下四个属性：

属性名字	属性类型	属性描述
Id	Guid	唯一标识
Course	string	课程名称
Content	string	笔记内容
Tags	string	笔记标签

表 1

其中，Id是只读属性，根据上节课的经验，我们需要给它创建以下两个构造函数：

代码 2

它们分别用于新建和编辑两种情景。Course、Content和Tags三个属性的set访问器均需调用RaisePropertyChanged方法，此方法是从NotificationObject类继承过来的。Tags属性可以包含一个或多个标签，当Tags属性包含多个标签时，标签与标签之间将会使用逗号（,）进行分隔。

      数据存储方面，我们将会直接使用上节课重构的结果——JsonDataStore类。打开App.xaml.cs文件，在App类里创建一个NoteStore静态属性：

代码 3

接下来，是时候考虑一下用户体验了。

 

设计用户体验

      我们知道，每门课都有自己的笔记，就像每门课都有自己的作业一样，所以这里将会仿效作业本的做法，利用Pivot控件的特点，让每个Pivot项显示一门课程的笔记。现在，切换到Expression Blend，创建一个Windows Phone Pivot Page，并把它命名为NoteBookPage.xaml，完了之后把Pivot控件的Title属性设为"笔记本"，把两个Pivot项的Header属性分别设为"销售心理学"和"行为金融学"：

图 1

需要说明的是，Application Bar上的按钮没有设置图标，这是因为我没有找到合适的，下次有时间我自己设计一个放上去。那么，标题下面这么大的一块空位应该怎么安排呢？

      首先，有两点我们是明确的，第一，我们需要列出笔记，第二，我们需要提供某种方式让用户切换标签。根据以往的经验，ListBox最适合用来列出笔记，至于切换标签的方式，我觉得SL for WP Toolkit的ListPicker也是一个不错的选择。此时，我的脑子里浮现出第一个设计：

图 2

然而，很遗憾，我对这个设计并未感到满意。第一，在手机屏幕这样的有限空间里，我们应该始终坚持把尽可能多的空间留给最重要的内容，ListPicker作为一个辅助元素应该只在用户需要切换标签的时候才显示，否则把空间腾出来，这样可以显示更多笔记。第二，笔记本和作业本、课程表有着类似的布局设计，但ListPicker的存在破坏了布局设计的一致性，这点我实在无法容忍。那么，怎样才能让ListPicker"呼之则来挥之则去"？

      我们可以调整ListBox的大小，使之充满整个Pivot项，并把ListPicker藏在屏幕