第一篇文章将帮助您创建将使用WinJS ListView控件的欢迎屏幕。 该控件将显示所有最近通过精美缩略图发布的博客文章。 当您单击其中一项时，第二个将在显示的详细信息视图上工作。 最后，您将在最后找到要下载的最终解决方案。 如果您需要澄清本文的某些部分，可以将其视为有用的补充资源。

 

　　先决条件：要遵循这些教程，您首先需要：

 

　　1 –在您的计算机上下载/购买并安装Windows 8 RTM ： http : //msdn.microsoft.com/zh-CN/windows/apps/br229516.aspx ，其中您还可以使用90天的试用版。

 

　　2 –下载并安装适用于Windows 8的Visual Studio 2012 Express RTM ： http : //msdn.microsoft.com/zh-CN/windows/apps/br229516.aspx ，它是免费的，或者您当然可以使用付费版本。

 

　　注意：如果您拥有Mac，则可以通过BootCamp或在Parallels处理的虚拟机中完美运行

 

　　注意2：本文已于2012年8月21日更新，以实现UI 8和Windows 8 Release Preview与RTM之间的代码更改。 通常，如果需要从RP迁移应用程序，则应阅读以下文档： 重大更改文档 。 在我们的案例中，唯一的影响是与Visual Studio的新UI和命名相关联。

 

　　注意3：我在此处添加了专门针对WordPress和社区服务器的补充文章： Windows 8 HTML5 Metro Style应用：30分钟内的RSS阅读器–构建您的WordPress版本

 

　　这是我们将在本文中看到的简短摘要：

 

　　–步骤1：创建空白应用程序

 

　　–步骤2：创建主页的HTML和CSS基础

 

　　–步骤3：首先与Blend接触

 

　　–步骤4：使用XHR加载数据并将其绑定到ListView控件

 

　　–步骤5：使用模板并使用Blend修改设计

 

　　–步骤6：要下载的源代码

 

　　注意：这些教程基于Chris Sell＆Kieran Mockford提供的BUILD的“构建Metro风格应用的工具 ”部分。 我只是为Windows 8 RTM更新了它。

 

　　您需要做的第一件事是启动Visual Studio 2012，并通过“文件–>新建项目”创建一个新的JavaScript –> Windows Store Blank App项目：

 

　　将其命名为“ SimpleChannel9Reader ”，因为我们将在此处下载Channel9的Coding4Fun部分的RSS流： http ://channel9.msdn.com/coding4fun/articles/RSS

 

　　打开文件，该文件描述了启动应用程序时将显示的第一页。 代替以下HTML部分：

 

　　插入一个：

 

　　现在，我们有了一个全局容器，其 ID嵌入了两个名为和子容器。 标头显然会显示在页面顶部，而内容部分将显示在页面下方。

 

　　通过打开存储在目录中的文件，让我们添加一些CSS。 您将看到由于媒体查询，已经有了一些预定义的CSS来处理各种可用的Windows 8视图。

 

　　在这两篇文章中，我们将仅将精力集中在“ 全屏横向 ”状态。 因此，请跳至本节并插入以下CSS：

 

　　这只是表明我们要占用3个主要容器的所有可用空间。

 

　　通过按F5键或单击以下按钮来运行您的应用程序：

 

　　从逻辑上讲，您现在应该看到以下屏幕：

 

　　而且您还应该看到一个明显的设计问题：后退按钮和标题未对齐。 让我们使用Blend 5解决此问题！

 

　　启动Blend，然后导航到SimpleChannel9Reader项目所在的文件夹。 Blend将显示以下内容：

 

　　这里的目标是创建两个网格。 第一个将用于主容器。 将由一列定义所有可用宽度并由两行定义。 第二个将由一行和两列定义后退按钮和标题。

 

　　让我们从使用“ Live DOM ”窗口选择元素开始：

 

　　跳到“ CSS属性 ”部分，选择#main规则，然后在“ 布局 ”窗口中，将显示切换为“ -ms-grid ”：

 

　　我们将使用IE10目前仅支持的CSS Grid Layout规范，但不久之后它将在其他浏览器中使用。 如果您想了解有关Windows 8 Apps模式支持的布局类型的更多信息，请阅读本文： 为您的应用程序选择CSS3布局 。

 

　　如果您只是想发现CSS3 Grid规范，请随时使用此IE Test Drive演示进行操作： 动手：CSS3 Grid Layout

 

　　好的，既然显示已正确切换到网格，我们需要定义网格。 为此，跳转到“ Grid ”部分并声明以下属性：

 

　　我们将拥有一个唯一的列，该列跨越屏幕的整个宽度（无论分辨率如何）和2行。 第一行的“固定”高度尺寸为132px，另一行将占用剩余的空间。 您可以在Blend设计器图面中看到以下内容：

 

　　现在，我们将“ content ”元素移至第二行。 将其选择到“ Live DOM ”中，选择#content规则并移至其“ Grid ”属性。 将“ -ms-grid-row ”值更改为2。您也可以将“ banner ”元素移动到第1行，但默认情况下它将位于该行。

 

　　现在，我们将第一行分成两列，以便将每个元素移到正确的位置。 选择“ banner ”元素，将其显示属性切换为“ -ms-grid”，然后定义1fr行和两列120px和1fr：

 

　　由于将“ -ms-grid-row-align ”属性更改为“ center ”，因此将“ maintitle ”元素移至第2列并将其垂直居中 ：

 

　　选择“ 后退按钮”并跳至“ 布局 ”部分。 设置54px的上边距和40px的左边距。 如果您没有错过任何东西，现在应该在设计图面上看到：

 

　　通过“ 文件 ”->“ 全部保存 ”保存所有更改，然后返回到Visual Studio。 打开 ，您会看到Blend按照正确的规则生成了一些“干净的” CSS：

 

　　只需按F5即可检查应用程序是否运行正常。

 

　　好的，现在让我们深入研究一下代码。

 

　　首先要做的是插入将在欢迎屏幕上显示文章缩略图的控件。 我们将为此使用WinJS。

 

　　制作WinJS库或“ 用于JavaScript SDK的Microsoft窗口库 ”是为了帮助JavaScript开发人员轻松实现新的Windows 8 UI体验。 它提供了一组控件，一个模板引擎，一个绑定引擎，处理异步调用的Promise，处理命名空间的帮助器等。

 

　　例如，如果您想了解有关控件部分的更多信息，可以阅读本文： 快速入门：添加WinJS控件和样式

 

　　在Windows Store项目中，您可以在“ 解决方案资源管理器 ”的参考部分中找到此库：

 

　　在内部，您将找到带有两个深色和浅色主题以及JavaScript代码的默认样式表。 随意看看。 通过阅读代码来学习可能会很有趣。

 

　　在我们的例子中，我们将使用ListView控件，该控件创建一个网格布局以显示元素列表。

 

　　打开“ default.html ”，然后在section标记内，键入以下HTML：

 

　　目前，这只是一个简单的古典 。 但是，它带有属性的注释，该属性指示我们希望使用WinJS库将该简单的div转换为JavaScript ListView控件。

 

　　由于在可以找到神奇的JavaScript代码，因此可以完成此操作。 这里是：

 

　　此异步操作将解析DOM，以查找标记有属性的所有元素，以将它们转换为真正的WinJS控件，从而为您实现新的Windows 8 UI体验。 如果您错误地删除了此行，则所有都将再次变为简单的 。

 

　　现在，我们需要使用从RSS提要中获取的一些数据来提供此ListView 。 在绑定到事件的函数中，将以下代码添加到行的上方：

 

　　然后，您需要在函数顶部（例如在下方）声明变量。

 

　　我们在这里声明Binding.List（）类型。 这是用于将数据绑定到WinJS控件的类型。 例如，它包含一些方法，这些方法将借助绑定机制帮助您在后台添加一些数据； 它将自动反映到视图中。

 

　　此外，您可能已经注意到，例如，通过使用诸如“ 模块模式 ”之类的现代模式，我们正在使用一些简洁的JavaScript代码。 为此，我们在有一个匿名的自我执行的JS函数。 然后，我们需要找到一种将某些公共数据公开给外部功能的方法。 这就是为什么我们在关联的WinJS帮助器中实现命名空间的原因。 它可以帮助我们轻松定义要公开的内容。 在我们的例子中，我们将有一个公共对象，该对象将具有一个属性，其中包含要显示的将来元素。

 

　　现在，我们需要一个函数来对RSS feed中的数据进行分级，解析并动态创建一些JS对象，以将其放入著名的绑定列表中。 这是我的：

 

　　此函数通过运行到指定URL的异步XmlHttpRequest开始。 然后，仅在请求完成并接收到数据后，才执行Promise中定义的代码如果需要插入 。 然后在这里，我们需要通过您必须插入到匿名函数中的这段代码来过滤数据：

 

　　我希望这段代码是明确的。 它选择节点，访问其有趣的属性以将其映射到 ， 和属性上动态创建的“文章”对象。 请记住这些属性的名称； 我们将在以后使用它们。 最后，通过将此新对象添加到绑定集合中来完成此功能。

 

　　现在，我们需要在应用程序的启动阶段运行此功能。 一旦完成DOM解析以构建WinJS控件，此代码应运行。 因此，使用以下代码行：

 

　　我们必须向控件指定其数据源。 返回HTML代码并修改与ListView关联的div以更改其选项：

 

　　最后，我们需要一些基本的CSS来帮助控件了解如何绘制其每个项目。 跳转到文件并添加以下两个规则：

 

　　该CSS表示ListView控件应占用其容器的所有可用空间，并且其每个项（通过类”）应占用150 x 150像素。

 

　　按F5运行解决方案。 您会遇到这样丑陋的事情：

 

　　但是不要惊慌，这种丑陋的输出是预期的行为！ 我们还有一些设计工作要做。 但是您已经可以看到绑定正确工作，并且控件在“触摸和鼠标”体验下也可以正常工作。 此外，控件会自动缩放到各种分辨率。 这样，您将没有上述情况下的确切布局（显示的列数和行数）。

 

　　现在，我们需要更改每个元素的绘制方式。 这正是模板引擎的目的。 模板只是带有WinJS属性标记的HTML片段。

 

　　导航到页面，并在部分的上方添加以下HTML：

 

　　这是一个标有值的HTML模板。 这将帮助WinJS在执行之后知道如何处理此特殊的HTML。 您还将发现使用来定义绑定表达式。 它将帮助绑定引擎知道数据源中的哪些JavaScript属性可以映射到适当的HTML节点。 除此之外，您可以使用一些经典的HTML。

 

　　现在，我们需要将WinJS控件配置为不再使用默认模板，而是使用上面的新模板。 只需更改选项即可完成：

 

　　如果现在运行该应用程序，则应该具有以下屏幕：

 

　　更好，但是我们还没有完成。 为了进一步进行设计审查，我们需要朋友Blend的帮助。

 

　　因此，让我们回到Blend。 它将要求您重新加载在Visual Studio中所做的所有修改。 完成后，您将拥有：

 

　　你不惊讶吗？ 你应该！ 确实，我们在这里看到的是与在Visual Studio中按F5时相同的视觉输出。 这意味着Blend 5直接在设计器内部动态执行应用程序的JavaScript部分！ 这是一个了不起的功能。

 

　　因此，您将能够直接处理真实数据，而不必强行放置我们所谓的“ 模拟 ”。 这是JavaScript的很酷的部分。 Blend能够执行启动XHR请求并构建WinJS对象的JS代码。

 

　　在 ，我们添加两个新的CSS规则。 单击主要媒体查询上的“ +”按钮：

 

　　并添加以下新选择器：

 

　　。listItemTemplate和。listItemTemplate img

 

　　选择规则，该规则将使用 ID突出显示ListView控件的每个元素。

 

　　将这些元素的大小更改为150px x 150px到250px x 250px 。 您只需要跳到右侧面板的“ Sizing ”部分即可。

 

　　布局应动态更新。 如果没有，您可以通过单击专用按钮来强制刷新设计图面：

 

　　这是您应该获得的结果：

 

　　现在，我们将调整模板图像的大小。 为此，使用“ Selection ”指针并单击其中一张图像：

 

　　您可以在“ 应用规则 ”部分中看到当前应用的CSS规则。 单击并用鼠标调整刚选择的图像的大小。 然后，与相同选择器匹配的所有其他图像将实时动态反映变化。

 

　　除了寻找合适的尺寸，我将为您提供帮助。 跳至“ 尺寸调整 ”部分，然后更改以下尺寸： 234px宽度和165px高度 。

 

　　为了进一步增强我们的设计，我们需要在每个元素之间留出更多空间，并使ListView控件与标题对齐。

 

　　单击选择器，导航到“ 布局 ”部分，然后单击“ 边距 ”区域右侧的“ 锁定 ”图标。 选择任何边距，然后输入8px 。

 

　　最后，要使ListView控件的网格与标题对齐，我们需要将其从左侧移动120px –刚设置的元素边距的8px。

 

　　按下“ +”按钮添加一个新的选择器，并将其命名为 。 固定左边距为112px 。

 

　　返回Visual Studio，接受所做的更改，然后按F5。 您现在应该具有这种布局：

 

　　到目前为止，我们已经取得了良好的进展。 现在，我们需要显示每篇文章的详细信息，以继续发现Blend的功能以及CSS3的一些新功能。