Windows Phone 8初學者開發—第13部分：設置LongListSelector中磁貼的樣式

第13部分：設置LongListSelector中磁貼的樣式

原文地址： http://channel9.msdn.com/Series/Windows-Phone-8-Development-for-Absolute-Beginners/Part-13-Styling-Tiles-in-the-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實例以使他們看上去像磁貼而不是行。因此，若是咱們將應用程序用戶界面的當前狀態與咱們的圖紙進行比較，當前的佈局並不合理。在本課中咱們將對它進行改進。

計劃：

1. 咱們將修改該LongListSelector以利用Grid佈局模式。
2. 咱們將完全從新修改每一個DataTemplate以使它們更像磁貼。
3. 由於咱們須要五到六個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控件。

1. 添加一個Grid並設置它的大小爲40 x 40，將它定位到磁貼的右上位置(經過VerticalAlignment and HorizontalAlignment)。我還在頂部和右側各添加了一個小的邊距。
2. 使用Image控件加載箭頭圖像(即play.png文件)
3. 在箭頭旁添加一個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並粘貼三遍，以下所示：

我在前面已經告訴過您複製和粘貼代碼會帶來的危險。您也許會忘記對數據進行一些小的修改，可是缺乏這些修改每一個項目都會顯示相同的內容。因此請注意細節，確認在兩個位置對每一個粘貼項進行修改：

1. 更改PivotItem.Header，使其綁定到正確的SoundGroup名稱，以及
2. 修改每一個LongListSelector.ItemSource，使其綁定到正確的SoundGroup

4.    回顧

綜上所述，本課的重點是如何經過將LayoutMode從List更改成Grid，從而設置LongListSelector的樣式，以及如何設置磁貼的大小。咱們還學習瞭如何提取DataTemplate並在更高層次定義它們以方便使用。咱們還學習瞭如何使用Image控件並添加橢圓等簡單的形狀以加強可視化設計。當您構建應用程序時，您須要花不少時間調整外觀並關注細節。