Windows Phone 8初学者开发—第13部分:设置LongListSelector中磁贴的样式-阿里云开发者社区

开发者社区> 大数据> 正文

Windows Phone 8初学者开发—第13部分:设置LongListSelector中磁贴的样式

简介: 原文 Windows Phone 8初学者开发—第13部分:设置LongListSelector中磁贴的样式 第13部分:设置LongListSelector中磁贴的样式 原文地址: http://channel9.

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
大数据
使用钉钉扫一扫加入圈子
+ 订阅

大数据计算实践乐园,近距离学习前沿技术

其他文章