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控件并添加椭圆等简单的形状以加强可视化设计。当您构建应用程序时，您须要花不少时间调整外观并关注细节。