記筆記

      俗話說：好記性不如爛筆頭。當然，這并不是說我們的腦子不好使，也不是叫我們不要用腦子記東西，而是提醒我們解放腦力，讓大腦從事更有價值的思考。因此，這節課我們將會創建一個筆記本，用來記錄課堂重點，但是，我們需要什么樣的筆記本呢？我曾經在《你的燈亮著嗎？》里讀到這樣一句話：如果某人能夠解決這個問題，但是他本人卻不會遇到這一問題時，那么你們首先要做的就是讓他也感受到這個問題。最近公司來了一批校招生，我找了個機會混進去聽了一節入職前的技術培訓，我想知道在課堂上把手機掏出來記筆記是一種什么樣的感覺。

      在課堂上，每當我想記點什么時，就會不自覺地拿起紙筆而不是手機，而且，用手機記筆記遠沒用紙筆來得隨意自如。隨后，我找了一些大學生和中學生，分別了解一下他們記筆記的情況，結果發現，他們記筆記的方式真是多種多樣，有的直接記在書上，有的記在專門的筆記本上，有的記在練習冊上，有的記在卷子上，有的甚至用手機把老師的板書直接拍下來……不難看出，他們的做法是怎么方便就怎么記，就目前而言，企圖用一個手機應用來取代他們現有的做法顯然是不現實的，也沒必要，用戶有權選擇他們認為適合的做法，而我們的職責只是提供必要的幫助和支持。

      那么，我們可以提供什么樣的幫助和支持呢？想想看，現有的自由零散的做法會導致什么問題呢？最直接的影響是很難快速找到想要的內容，因為它們可能遍布各處，這種時候要是有個索引或者目錄什么的就好了……Bingo！我們可以創建一個應用，幫助用戶建立這個索引，雖然用戶也可以另外找本小冊子建立索引，但我們可以通過一個標簽系統幫助用戶快速找到相關的內容。這樣，用戶既可以保留現有的自由的記筆記習慣，又可以獲得新的有序的管理效果。那么，用戶應該在何時以及如何建立這個索引呢？

      當然是越早越好！比如說，用戶可以在每晚做完作業之后稍稍整理一下筆記，然后為它們創建一些條目并貼上標簽。用戶不必為所有筆記創建條目，可以挑選重要的來創建，這個過程本身就可以加深對知識的理解和鞏固對知識的記憶。至于條目的內容，用戶可以引用課本或者老師板書的原話，也可以用自己的話來概括復述，還可以直接引用課本或者練習冊的頁碼和位置（段落、題號或者標記）等等，這個過程可以幫助用戶熟悉如何根據條目的內容找到對應的筆記。

      現在，用Visual Studio打開項目，在Models文件夾里創建一個Note類，并讓它繼承NotificationObject類：

代碼 1

　　根據前面的討論，Note類應該包含以下三個屬性：

表 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藏在屏幕下方外面，然后在Application Bar上放置一個按鈕，當用戶單擊這個按鈕時，ListPicker將會從屏幕下方外面向上平移，直至屏幕底部：

圖 3

　　這樣，用戶就可以通過ListPicker切換標簽了。此時，我的腦子里冒出一個問題，為什么不直接以這種方式顯示標簽列表，而是大費周章地通過ListPicker打開一個新的頁面呢？顯然，我找不到合適的理由說服自己把ListPicker留下，同時，這個問題也給我帶來了新的靈感。我們可以讓顯示標簽的ListBox取代ListPicker，當用戶單擊Application Bar上的按鈕時，ListBox將會從屏幕下方外面向上平移，直至覆蓋顯示筆記的ListBox為止，當用戶選好標簽之后，顯示標簽的ListBox將會向下平移，直至屏幕下方外面為止。

      現在，把ListPicker刪除，然后把一個ListBox添加到LayoutRoot，并調整它的大小，使之充滿整個屏幕（覆蓋后面的Pivot控件）。此時，Objects and Timeline面板上面的對象應該是這樣的：

圖 4

　　接著，把它向下平移，直至它的頂部和Pivot控件的底部重疊為止：

圖 5

　　此時，它的Height、VerticalAlignment和Margin三個屬性都會自動做出相應的調整：

圖 6

　　接下來，我們將會為它創建動畫。

      單擊Objects and Timeline面板上的+按鈕：

圖 7

　　在彈出的Create Storyboard Resource對話框里輸入一個名稱，然后按OK關閉對話框：

圖 8

　　此時，Objects and Timeline面板將會變成這樣：

圖 9

　　確保ListBox處于選中狀態，把播放指針拖到0.5秒的為止，然后把ListBox向上平移，直至和Pivot控件完全重疊為止。此時，Objects and Timeline面板將會變成這樣：

圖 10

　　看到這里，你可能會問，為什么只有結束時間的關鍵幀？你也可以手動設置開始時間的關鍵幀，如果沒有設置，那么對象原本的狀態將會默認為開始時間的關鍵幀。

      當用戶選好標簽之后，我們需要把ListBox隱藏起來，不難想象，隱藏動畫其實是顯示動畫的反轉，那么，如何創建反轉動畫呢？非常簡單，單擊+按鈕旁邊的箭頭，然后選擇Duplicate：

圖 11

　　此時，Expression Blend會為你創建一個ShowTagsStoryboard_Copy1動畫。單擊+按鈕旁邊的箭頭，然后選擇Rename把它重命名為HideTagsStoryboard。接著，再次單擊+按鈕旁邊的箭頭，然后選擇Reverse反轉動畫。好了之后單擊+按鈕旁邊的X按鈕關閉Storyboard。