你好，老七！

      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退出應用程序。

　　上課啦！

      上課啦？什么課？哪里上？看到這些問題，有沒有一種親切的感覺？說不定你今天就問了這些問題哦，那時你是不是在找課程表呢？如果課程表就在手機里該多好?。∈虏灰诉t了，我們自己弄一個吧。

      右擊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充滿整個Grid（Pivot項默認有一個Grid子元素）：

圖 18

　　嗯，不錯，每個列表項都包含了課程名稱、上課時間、下課時間以及上課地點，可是，這些內容各占一行，字體大小也是一樣，每個列表項之間又沒有明顯的間距，顯然不是那么好看，下面我們給它調整一下，右擊ListBox里的任何地方，然后選擇Edit Additional Templates/Edit Generated Items (ItemTemplate)/Edit Current進入列表項模板的編輯狀態：

圖 19

　　此時，Objects and Timeline面板會發生變化，上面的對象不再是我們之前看到的那些，而變成列表項里的對象：

圖 20

　　從上圖不難看出，每個列表項都包含了四個TextBlock，這些TextBlock是用一個StackPanel裝著的?，F在，你可以發揮你的創造力，把它調整成你喜歡的樣子，下面是我的調整結果：

圖 21

　　此時，Objects and Timeline面板上面的對象應該是這樣的：

圖 22

　　單擊上圖紅框那個箭頭退出列表項模板的編輯狀態。此時，Objects and Timeline面板回復"原狀"了，你可以在上面看到Pivot控件和Pivot項。選中第二個Pivot項，按照上面的步驟把星期二的課程數據導入，并把它拖到Pivot項上（注意，是第二個Pivot項哦），然后調整ListBox的大小，使之充滿整個Pivot項。那么，列表項的顯示方式怎么辦？要重復編輯一次嗎？當然不用！我們只需應用剛才那個就可以了。右擊ListBox里的任何地方，然后選擇Edit Additional Templates/Edit Generated Items (ItemTemplate)/Apply Resource/courseCollectionItemTemplate：

圖 23

　　此時，你會發現列表項的風格已經變成和前面的一樣了：

圖 24

　　好了，我們現在可以把其它幾天的課程都加上去，然后在主頁（即第一個頁面）添加一個按鈕打開這個頁面就……慢著！我怎么編輯課程表？

　　編輯課程表

      顯然，如果這個課程表不能編輯，那么它就等同花瓶了，所以我們要為它增加編輯功能，包括新建、編輯和刪除，我們可以把這些功能放在Application Bar上。在Expression Blend里添加Application Bar非常簡單，右擊Objects and Timeline面板上的PhoneApplicationPage，然后選擇Add ApplicationBar：

圖 25

　　接著右擊ApplicationBar，然后選擇Add ApplicationBarIconButton：

圖 26

　　確保剛才添加的Application Bar按鈕處于選中狀態，在Properties面板上把它的IconUri屬性值改為New，并把它的Text屬性值改為"新建"：

圖 27

　　按照上面的步驟添加另外兩個按鈕，完成之后你的課程表頁面應該是這樣的：

圖 28

　　刪除功能只需獲取選中的課程并把它刪除就可以了，新建和編輯則不同，它們都需要另一個頁面來處理，我們知道，新建功能和編輯功能在用戶界面上的最大區別是前者的頁面有內容而后者的沒有，所以我們可以為它們創建一個共用頁面。

      創建一個Windows Phone Page，并把它命名為NewOrEditCoursePage.xaml：

圖 29

　　完了之后把ApplicationTitle的Text屬性值改為"課程表"，但PageTitle保留原樣：

圖 30

　　因為新建功能和編輯功能共用同一個頁面，所以PageTitle的Text屬性值可能是新建課程或者編輯課程，這將會在打開此頁面時通過傳入參數設置。標題下面那塊空地將會放置四個控件，分別對應課程名稱、上課時間、下課時間和上課地點，首尾兩個將會是TextBox控件，而中間兩個將會是Silverlight for Windows Phone Toolkit的TimePicker控件。

      右擊Projects面板上的References節點，選擇Add Reference…：

圖 31

　　在彈出的Add Reference對話框里把C:/Program Files/Microsoft SDKs/Windows Phone/v7.0/Toolkit/Sep10/Bin/Microsoft.Phone.Controls.Toolkit.dll引用進來。添加完引用之后就可以把控件添加到頁面了：

圖 32

　　需要說明的是，TimePicker控件已經自帶標題功能，你只需設置它的Header屬性就可以了，而普通的TextBox沒有標題功能，只能自行添加TextBlock來模擬，為了使它的顏色和TimePicker控件的標題的顏色一樣，我們需要把它的Foreground屬性值改為PhoneSubtleBrush。此時，我的Objects and Timeline面板是這樣的：

圖 33

　　好了，課程表的用戶界面已經設計完了，是不是很想看看運行效果呢？沒問題！

      回到CourseTimetablePage頁，在Objects and Timeline面板上選中第一個Application Bar按鈕，然后在Properties面板上單擊Events，并雙擊Click旁邊的編輯框：

圖 34

　　此時，Expression Blend會打開CourseTimetablePage頁的代碼隱藏文件，并為Application Bar按鈕添加一個事件處理程序方法，我們只需在TODO下面加上一句就可以了：

代碼 2

　　接著，回到MainPage頁，把上面的TextBlock去掉，拖一個Button到中間，然后右擊這個Button，選擇Navigate To/CourseTimetablePage：

圖 35

　　好了，按F5吧：

圖 36

　　當你單擊屏幕中間那個按鈕時，課程表就會顯示：

圖 37

　　向左或者向右滑動屏幕可以在不同的Pivot項之間來回切換，而向上或者向下滑動屏幕則可以查看當天課程。當你單擊Application Bar上的新建按鈕時，新建課程表的界面將會顯示：

圖 38

　　你可以輸入課程名稱和上課地點，當你單擊上課時間或者下課時間下面那個TimePicker控件時，設置時間的界面將會顯示：

圖 39

　　你可以通過滑動設置時間，這個界面下面有兩個Application Bar按鈕，左邊那個是確定，右邊那個是取消，但為什么這兩個圖標是一樣的？其實它是找不到圖標才這樣的，如果你下載了它的代碼，你會在TimePickerPage.xaml里看到它已經把圖標位置硬性規定為/Toolkit.Content/ApplicationBar.Check.png和/Toolkit.Content/ApplicationBar.Cancel.png了，你可以在PhoNEToolkitSample/Toolkit.Content文件夾里找到這兩個圖標，在項目里創建一個Tooklit.Content文件夾，把它們復制進去，并把它們的Build Action設置為Content，重新運行就能看到了。

      到目前為止，我們只寫了一行代碼（其實這行代碼也可以省掉的），應用程序的功能和操作就基本上體現出來了，此時，你可能會問，在我們設計用戶界面的過程里，Expression Blend到底在背后為我們做了什么呢？

　　Expression Blend如何提供設計時數據的支持？

      首先我們來看看Expression Blend為我們生成了哪些文件：

圖 40

　　由于我們的數據是從XML文件導入的，所以你會看到一個XSD文件，這是從我們那個XML文件生成的XML Schema，這個XSD文件將會用來生成相關的類，這些類都放在對應的C#文件里，而我們的數據最終是以XAML的形式存在的。當我們導入XML數據時，Expression Blend不但為我們生成這些文件，還在App.xaml的Application.Resource里添加了相應的對象：

代碼 3

　　為什么添加到App.xaml而不是某個頁面的XAML文件里呢？這是因為我們在Import Sample Data from XML對話框里選擇了Define in Project（參見圖16），如果我們當時選擇Define in This document，它就會添加到某個頁面的XAML文件里。那么，Expression Blend又是如何得知我們的數據保存在哪個XAML文件里呢？答案就在courses類的構造函數里：

代碼 4

　　這個URI看起來有點古怪，如果你用Visual Studio打開這個項目，你將會看到這個XAML文件的Build Action是Page，事實上，它會被編譯成BAML，并且嵌到Iridescent程序集里，這種古怪的URI就是引用程序集內嵌資源的表示方式。

      接著，當我們從Data面板把courseCollection拖到Pivot項上時（參見圖17），Expression Blend會把它所屬的MondayCoursesSampleData綁到Pivot控件的父容器的DataContext屬性上，在當前Pivot項的子容器里創建一個ListBox，并把courseCollection綁到它的ItemsSource屬性上：

代碼 5

　　還記得Import Sample Data from XML對話框里有個選項是Enable sample data when application is running嗎？當時它是選中的，如果我們把這個選項去掉，DataContext屬性前面就會多一個"d:"：

代碼 6

　　這個前綴告訴編譯器在生成最終程序集時忽略這個屬性，這樣你就不會在程序運行的時候看到這些數據了。

      如果你細心觀察Projects面板，可能會發現幾個我們從未提及過的文件：

圖 41

　　它們是干嘛的呢？事實上，這些文件在我們剛創建完項目時就存在了，還記得最初的Panorama頁嗎（參見圖3和圖4），里面的Panorama項是有數據的，而這些數據就是來自MainViewModelSampleData.xaml文件的。那么，這些數據又是如何關聯到Panorama控件的呢？打開MainPage.xaml，在文件的頂部，你會發現它的蛛絲馬跡：

代碼 7

　　這里使用的不是我們常見的Binding，而是d:DesignData，正如你所看到的，它用來指定數據文件的位置，但這些數據是在設計時使用的，所以你會看到DataContext前面有個"d:"，事實上，我們把這些帶有"d:"前綴的屬性稱為設計時屬性。和這些數據相關的類分別定義在MainViewModel.cs和ItemViewModel.cs文件里。如果你打開MainViewModel.cs，你會發現里面的LoadData方法包含了另一份不同的數據，為什么，它們分別用來干嘛的？我給你截兩個圖，看你能否找到什么蛛絲馬跡：

代碼 8

代碼 9

　　看到了嗎，XAML文件里每個ItemViewModel對象的LineOne屬性值都是"design XXX"，而C#文件的則是"runtime XXX"，事實上，這已經道出它們的用途了，XAML文件里的數據是設計時使用的，而C#文件里的則是運行時使用的。但是，MainPage.xaml的根元素的DataContext屬性前面有"d:"前綴啊，之前不是說編譯器會在生成程序集的時候忽略它嗎，那應用程序又如何找到運行時使用的數據呢？答案就在MainPage.cs里：

代碼 10

　　App類的ViewModel是一個靜態屬性，它的任務只是創建一個MainViewModel對象，當MainPage的構造函數被調用時，會把這個MainViewModel對象綁到自己的DataContext屬性上，當Loaded事件觸發時，如果數據還沒裝載，就調用LoadData方法裝載數據。

      從上面的討論不難看出，Expression Blend的確為我們做了很多，而這些知識將會協助我們完成后面的開發任務。

　　保存課程表

      說了那么多前端的東西，是時候看看后端了。課程表軟件說到底就是一個管理課程表數據的軟件，所以數據存儲是一個非常重要的環節。如果說用戶界面的設計是Expression Blend的強項，那么業務邏輯的開發就是Visual Studio的地盤，既然接下來的著眼點是后端，當然要切換到Visual Studio啦。

      右擊Projects面板里的解決方案節點，選擇Edit in Visual Studio：

圖 42

　　此時，Visual Studio會打開，接下來，我們將會在Visual Studio里完成后端部分的開發。

      首先，創建一個Models文件夾，在里面添加一個Course類，并讓它實現INotifyPropertyChanged接口：

代碼 11

　　接著，我們需要為它添加如下屬性：

　　把前端和后端連接起來

      還記得Expression Blend是怎么做的嗎？它為MainPage頁創建一個與之對應的MainViewModel類，并在代碼隱藏文件里把后者的實例綁到前者的DataContext屬性上，而剩下的事情就交給數據綁定來處理。接下來，我們將會模范這種做法，把前端和后端連接起來。

      我們知道，一個課程表包含若干列，每列都包含了一個標題和一組當天的課程，整個課程表對應于CourseTimetablePage頁，里面的每列對應于一個Pivot項，其中，列的標題將會作為Pivot項的標題顯示，而列所包含的那組當天的課程將會在Pivot項所包含的ListBox里顯示。為了方便理解，我們把它們之間的映射關系制成下表：

　　操作課程表

      我們知道，新增和修改這兩個操作是共用同一個頁面的，但它們的內部邏輯又稍微有點不同， 你可以分別為它們創建兩個不同的ViewModel類，針對不同的操作為頁面創建不同的ViewModel對象，也可以在同一個ViewModel類里通過標記變量和條件語句區分兩種不同的邏輯，你還可以像我這樣，在ViewModels文件夾里創建一個NewOrEditCourseViewModel抽象類，讓它實現INotifyPropertyChanged接口，并創建Title和Course兩個屬性以及Submit和Discard兩個抽象方法：

代碼 32

　　接著，在NewOrEditCourseViewModel類里創建NewCourseViewModel和EditCourseViewModel兩個私有類，并讓它們繼承NewOrEditCourseViewModel類。下面，我們先看NewCourseViewModel類。

      課程表上的每個課程都會關聯到一周的某天，但NewOrEditCoursePage頁上卻沒有地方設置星期幾（參見圖32），這是為什么呢？Pivot控件的一個特點是每次只能顯示一個Pivot項，這意味著整個課程表每次只能顯示一天的課程，如果把這天看做上下文，當用戶單擊Application Bar上的新增按鈕時，應用程序就可以從上下文獲知應該把課程添加到哪一天，從而為用戶省下設置星期幾這個步驟。我們可以通過參數傳遞這個數據，然后在構造函數里使用它創建Course對象：

代碼 33

　　當用戶單擊確定時，就會把課程添加到JsonCourseStore，而單擊取消的話就什么都不做：

代碼 34

      那么，EditCourseViewModel類呢？當用戶單擊Application Bar上的編輯按鈕時，它需要的不是今天星期幾，而是用戶當前選中的課程是什么，我們又該如何告訴它呢？我們知道，同一天的課程在時間上是互斥的，因為同一時間你不可能在不同教室上課（除非你懂影分身術），換句話說，Course類的Day和StartTime這兩個屬性組合起來可以成為唯一標識。通過這個唯一標識，我們可以從JsonCourseStore里獲取用戶當前選中的課程，但是，我們是否把獲取到的課程直接賦給EditCourseViewModel的Course屬性呢？想想看，Course屬性將會和NewOrEditCoursePage頁上的控件進行雙向綁定，當用戶編輯控件的內容時，數據會直接反映在Course屬性上，如果Course屬性就是從JsonCourseStore里獲取到的課程，那么數據就會直接提交到JsonCourseStore。如果你選擇這樣做，你得先做個備份，假如用戶單擊取消，你就可以把備份的數據還原回去。另一個做法是從JsonCourseStore里獲取用戶當前選中的課程，然后克隆一份賦給Course屬性，當用戶單擊確定時，就把Course屬性的數據更新過去，而單擊取消的話也是什么都不做。這里選擇后面那種做法：

代碼 35

　　創建好NewCourseViewModel和EditCourseViewModel兩個私有類之后，我們需要考慮一下如何訪問它們的實例，辦法可能有很多，其中最簡單的是在NewOrEditCourseViewModel類里創建兩個靜態方法，分別用于創建這兩個類的實例：

代碼 36

      有了實例之后，我們就要考慮數據綁定的問題了，這個不難處理，我們總共也只有五個綁定需要創建，你可以參照下表修改NewOrEditCoursePage.xaml的內容：

　　菜單·樣品菜色

      還差什么呢？噢，對了，目前我們是通過主頁中間的按鈕打開課程表的，這顯然不好意思拿出來見人，我們還是創建一個正式的主菜單吧?，F在讓我們切換到Expression Blend，如果你的Expression Blend已經關閉了，你可以右擊Solution Explorer的MainPage.xaml，然后選擇Open in Expression Blend：

圖 55

　　菜單的制作方式有很多種，這里選用ListBox：

圖 56

　　菜單創建好后，右擊里面的"課程表"，然后選擇Navigate To/CourseTimetablePage，此時，Expression Blend會為TextBlock添加一個NavigateToPageAction行為，但這個行為默認是關聯到MouseLeftButtonDown事件的，這樣，當用戶按下"課程表"還沒松開手就打開課程表了，而我們的習慣是松手之后才執行相關的操作，為了實現這個效果，我們可以把關聯事件改為MouseLeftButtonUp：

圖 57

      菜單有了，但樣品菜色卻被我們弄沒了，如果你現在打開CourseTimetablePage.xaml，你將會看到此番情景：

圖 58

　　之前我們手動創建兩個Pivot項，然后把它們分別綁到兩個示例數據源，但現在Pivot項是通過數據綁定動態創建的，之前那些示例數據源就排不上用場了，既然用不了，那就刪了吧，打開Data面板，右擊數據源，然后選擇Delete data source：

圖 59

　　此時，Expression Blend會把SampleData文件夾里的相關文件一并刪除。

      在Expression Blend里，沒有設計時數據會為調整控件模板和樣式帶來很大不便，下次你去找設計師調整一下用戶界面，他們很可能會對你大罵一頓，那么，有沒有辦法讓它再次顯示設計時數據呢？答案是有的，而且不止一種，下面來看其中一種。我們知道，CourseTimetablePage頁使用了數據綁定，而綁定表達式只提及了綁定的屬性，并未提及屬性所在的類型，換句話說，只要屬性名字能夠匹配，示例數據就應該綁得上去。首先，準備一份XML，注意匹配綁定表達式的屬性名字：

代碼 48

　　接著，在Data面板上把它導入（參見圖15），注意，這次要把Enable sample data when application is running選項去掉：

圖 60

　　導入之后在Data面板上把自動生成的ColumnCollection和CourseCollection分別改為Columns和Courses，以便匹配綁定表達式的屬性名字：

圖 61

　　現在，把Timetable拖到Pivot控件上，此時你會看到鼠標下方有個小提示，告訴你Expression Blend將會把Pivot控件的DataContext屬性綁到CoursesSampleDataSource：

圖 62

　　當你松開鼠標時，就會看到課程名稱了，但上課時間、下課時間和上課地點卻顯示不出來：

圖 63

　　這是為什么呢？如果你把CourseTimetablePage頁面關閉，然后重新打開它，你就會看到問題所在了：

圖 64

　　這個異常明確地告訴我們調用轉換器時拋出InvalidCastException。還記得嗎，我們的轉換器會把傳入對象強制轉換成DateTime對象，然后調用它的ToShortTimeString方法，但Expression Blend為示例數據生成的StartTime屬性和EndTime屬性是字符串類型的！明白為什么會這樣，問題就不難解決了：

代碼 49

　　重新編譯項目，然后重新打開CourseTimetablePage頁，你就會看到設計時數據了：

圖 65

　　好了，總算對設計師有個交代了。

　　下課了……

it知識庫：WP7有約（一）：課程安排，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。