第13部分：設定LongListSelector中磁貼的樣式
系列地址：http://channel9.msdn.com/Series/Windows-Phone-8-Development-for-Absolute-Beginners
原始碼: http://aka.ms/absbeginnerdevwp8
PDF版本: http://aka.ms/absbeginnerdevwp8pdf
在上一課，在將新資料模型關聯到MainPage.xaml方面我們取得了很多進展，現在我們需要關注LongListSelector的DataTemplate的佈局。我們希望調整每個SoundData例項以使他們看上去像磁貼而不是行。所以，如果我們將應用程式使用者介面的當前狀態與我們的圖紙進行比較，當前的佈局並不合理。在本課中我們將對它進行改進。
計劃：
- 我們將修改該LongListSelector以利用Grid佈局模式。
- 我們將徹底重新修改每個DataTemplate以使它們更像磁貼。
- 因為我們需要五到六個PivotItem，每個PivotItem都包含自己的LongListSelector，沒有必要為每個PivotItem定義磁貼布局，所以我們會將它們抽象到一個集中的模板中以便MainPage.xaml中的所有LongListSelector均可以使用它。
1. 將LongListSelector的LayoutMode更改為Grid
LongListSelector控制元件包含一個LayoutMode屬性。它接受List(預設)或Grid兩個列舉值。通過將LayoutMode設定為Grid並根據長度和高度設定單元格的大小，我們可以迅速地更改LongListSelector的外觀。
通過新增49和50行，LongListSelector的外觀如下：
每個DataTemplate的例項看上去像一個磁貼。
2. 修改DataTemplate以建立我們需要的佈局
接著我們需要修改DataTemplate以匹配我們希望的佈局。我將高亮顯示並刪除DataTemplate中的內容：
接著我將從僅有一個單元格的Grid開始。在Grid中，我將在磁貼的底部使用TextBlock顯示聲音的名稱。我將使用一個StackPanel將它包圍起來，這樣我就可以稍後在Grid的單元格中設定它的垂直位置。所以我在DataTemplate中新增以下程式碼：
請注意在55行我將Background設定為內建的PhoneAccentBrush資源。
這些程式碼將產生以下結果：
我希望將TextBlock的位置移動到底部並新增一些填充。我將新增以下內容：
我將StackPanel 的VerticalAlignment設定為"Bottom"，並設定TextBlock左
側和底部的邊距。結果如下：
目前為止一切良好。
接著我希望新增我在實體模型中繪製的播放按鈕圖形。為此我將使用在前面課程中新增到專案中的Assets\AppBar\plan.png圖示。
我將新增一個內部的grid，設定它的垂直對齊為top，水平對齊為right。play.png只是一個箭頭，我希望有一個圓圈圍繞它。我猜我可以重新制作影像，但是在XAML中有一個簡單的解決方案。我只需要在image控制元件旁新增一個Ellipse控制元件。
- 新增一個Grid並設定它的大小為40 x 40，將它定位到磁貼的右上位置(通過VerticalAlignment and HorizontalAlignment)。我還在頂部和右側各新增了一個小的邊距。
- 使用Image控制元件載入箭頭影像(即play.png檔案)
- 在箭頭旁新增一個Ellipse控制元件。對Ellipse控制元件，我使用了內建的畫筆。您是否想到這樣使用可能存在一個問題？如何解決這個問題？好好考慮一下，我現在不對它進行修改。
這些更改使得每個磁貼與我們最初的設想一致。現在我們需要將它應用到其它PivotItem的DataTemplate。
3. 將DataTemplate的設計新增到頁面的資源部分以便重複使用
在上一課，我們檢視了XAML設計的行為。如果我們將滑鼠游標放置在不同的PivotItem，則該PivotItem的資料模板將出現在XAML設計器檢視。
我們不需要將剛才建立的DataTemplate複製並貼上到MainPage.xaml中的其它每個PivotItems中，我有更好的辦法。讓我們將DataTemplate定義為頁面級別的資源。
在17和19行我定義了頁面的資源節(Resource section)。我將我們剛才建立的DataTemplate複製並貼上到這裡，然後在每個需要它的PivotItem中引用它。
在我複製並貼上DataTemplate到作為頁面級別資源的新位置之後，我新增了一個關鍵字屬性。這個關鍵字允許我在需要的時候在頁面的其它部分引用這個DataTemplate。
現在我只需要在LongListSelector的ItemTemplate屬性中像這樣引用關鍵字SoundTileDataTemplate：
我對第二個PivotItem重複上述過程：
一些有趣的事情將會發生。當我檢視XAML設計器時，我看到兩個磁貼相互緊挨在一起：
為什麼在之前沒有發現？因為第一個PivotItem只有一個SoundData物件與之關聯。顯然我們需要改進它，因為它看上去不正確，並會使使用者感到疑惑。使用者可能看不到磁貼的形狀，相反只是一個紅色的長條，不管他們選擇什麼主題色。
為了解決這個問題，我為每個Grid的底部和右側新增了一個邊距，它定義了每個資料項磁貼的邊界：
它看上去提供了我希望的視覺化分隔：
非常棒！
最後的任務是為其它每個應用程式支援的資料組建立一個PivotItem，包括嘲諷，警告和自定義聲音(Taunts, Warnings and Custom Sounds)。我僅需要複製現有的PivotItem並貼上三遍，如下所示：
我在前面已經告訴過您複製和貼上程式碼會帶來的危險。您也許會忘記對資料進行一些小的修改，但是缺少這些修改每個專案都會顯示相同的內容。所以請注意細節，確認在兩個位置對每個貼上項進行修改：
- 更改PivotItem.Header，使其繫結到正確的SoundGroup名稱，以及
- 修改每個LongListSelector.ItemSource，使其繫結到正確的SoundGroup
4. 回顧
綜上所述，本課的重點是如何通過將LayoutMode從List更改為Grid，從而設定LongListSelector的樣式，以及如何設定磁貼的大小。我們還學習瞭如何提取DataTemplate並在更高層次定義它們以方便使用。我們還學習瞭如何使用Image控制元件並新增橢圓等簡單的形狀以增強視覺化設計。當您構建應用程式時，您需要花很多時間調整外觀並關注細節。