《101 Windows Phone 7 Apps》讀書筆記-Alphabet Flashcards

課程內容

Ø 投影片效果的切換

 

    最近有人問我如何來寫一個投影片的應用程式，在這個應用程式中，他們可以在不同的頁面之間切換，就像在Pictures hub或者Facebook應用程式中瀏覽一個圖片集一樣。我仔細思考後發現，當前並沒有可用的panel或者其他UI元素來實現這種互動的效果。一個簡單的scroll viewer並不行，因為我們需要每個圖片具有“魔力”，而且所有剩餘的圖片視圖不能處於不對齊的位置。

    雖然Pivot和Panorama控制項要比這個任務的需求更具特色，但是它們提供了最簡單的方法來建立這種互動模式。我們只需要隱藏title 和 header，對布局做一些調整就可以了。由於具備LoadingPivotItem和UnloadingPivotItem事件，Pivot控制項更加適合記錄的動態載入/卸載；但是，Panorama使得我們可以用切換的方式來瀏覽前一張或後一張圖片，因此，它更加適合模仿投影片的效果。

    因此，Alphabet Flashcards應用程式採用Panorama控制項來提供26個字母中每個卡片的投影片瀏覽效果。父母可以使用這個應用程式來教孩子認識英文字母。

   注意，不要在Panorama中放置太多的記錄！

   Panorama的設計初衷並不是用來放置太多的記錄。對於本應用程式的27個記錄來說，效能還可以接受。但是如果加入更多更複雜的記錄，會導致應用程式的效能明顯下降，並且佔用更多的記憶體。

 

The User Interface

 

    Alphabet Flashcards使用了27個Panorama Item的Panorama控制項：一個用來作為標題頁面，另外26個頁面用來展示26個英文字母。圖28.1顯示了從第一個頁面（標題）切換到第二個頁面（字母A）的使用者體驗。

 

圖28.1 從第一個Panorama頁面切換到第二個頁面的效果

 

    為了獲得全屏投影片的效果，本頁面的Panorama和它的Item並不使用任何Title和Header。Item還利用負的頁面上邊距來佔用那些浪費的空間。控制項右邊的48像素空間由以下兩個部分組成：頁面邊界佔用12像素，下一個頁面中左邊部分的內容佔用36像素。因為我們不想在本應用程式中加入預覽的功能，所以只要確保每個頁面中的內容有36像素寬度的左邊距。本應用程式在使用者切換圖片之前，不僅需要將下一個頁面的內容緩衝，而且要把內容進行置中布局。但是，在橫屏模式下，它確實強制內容的最大寬度為384（480 - 48×2）。圖28.2清楚地展示了這種情景，它將Panorama的背景設定為橙色，第一個頁面的背景為綠色，第二個為藍色，第三個為紫色。

 

圖28.2 頁面切換中Panorama的背景

 

    如果我們想要在邊距上留較小的空間，可以將Panorama的邊距設定為“0,0,-48,0”。如果我們想要進一步豐富Panorama的外觀，可以給Panorama應用一個新的風格，並且給Panorama Item一個經過調整的控制項範本。

 

    注意：

➔我們並不是在XAML布局中加入27個Panorama Item，而是在使用代碼將Panorama 的ItemsSource設定為一組圖片的URI字串。Panorama使用Item模板把每個圖片嵌入到Grid中去，為了得到28.1所示的效果，需要留出一些頁面邊界。

➔Panorama包含的東西要比PanoramaItem更多，例如本應用程式中使用的字串，而每個Item的主要內容和Header用來顯示記錄的詳細資料。因此，應用程式明確將每個Item的HeaderTemplate設定為空白，這樣就可以避免text block中使用的每個URI顯示在每個圖片的上方。

➔ 本應用程式中使用的圖片，其Build Action屬性設定為Resource，使得Panorama控制項和背景圖片在程式運行時同時載入。

 

The Code-Behind

    除了為Panorama填充Item以外，cs代碼還為應用程式儲存並恢複使用者已選擇的Item，使得應用程式可以恢複它之前的狀態。

    這裡，DefaultItem用得恰當好處。在本應用程式中，將不再受到前一章所討論的DefaultItem問題的困擾，因為這裡沒有明顯的Panorama標題或者是背景。