Windows Phone 8初級教程(十三) 設定LongListSelector中磁貼的樣式

原文地址：http://channel9.msdn.com/Series/Windows-Phone-8-Development-for-Absolute-Beginners/Part-13-Styling-Tiles-in-the-LongListSelector

查看本欄目更多精彩內容：http://www.bianceng.cnhttp://www.bianceng.cn/OS/extra/

系列地址：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中添加以下代碼：