1.3　Blend的控件、绑定与样式

以前版本的Blend关注的是XAML开发者，而Blend的Windows 8版增加了对HTML的支持，允许开发设计Windows应用商店应用程序，特别是Blend还具有以下特性：

●　与Visual Studio深度集成：可以在Visual Studio 2012和Blend中同时加载同一个项目。事实上，对于正在VS中工作的项目，可以在“解决方案资源管理器”（Solution Explorer）中右击该项目，选择“在Blend中打开”（Open in Blend），从而在Blend中把它打开。

●　项目模板：Visual Studio 2012和Blend拥有相同的项目模板集。

●　为HTML提供WYSWYG（所见即所得）的设计：应用程序在运行时的每一个页面都按照之前看见的方式呈现，因为Blend在实际运行应用程序时会精确地根据编辑时的样子来显示。

●　交互模式：从页面间导航定位时，可以在Blend中拨动一个开关，以便用交互模式运行应用程序；之后如果要对某一页面进行编辑，可以再次把开关拨回去，就可以在当前的视图中对页面上的元素进行设计^[20]。

●　HTML工具面板：工具面板和属性编辑器中包含了所有可用控件和选项的集合。

●　布局模拟器：和VS提供的设备模拟器一样，Blend允许以各种尺寸和旋转方向来运行和编辑应用程序。

图1.9显示了Blend在RSS阅读器示例中的实际应用。

图1.9　Microsoft Blend for Visual Studio 2012

在图1.9中，可以注意到，即便是在Blend当中，我们的JavaScript代码也仍然在执行，它生成了订阅源的标题列表。Blend执行HTML、JavaScript和CSS，是因为它要对发生的变化进行检测，以确保用户确实是在编辑应用程序的“现场”版本。虽然有时候会有点儿混乱，不过我们可以手动去解决它，使用设计界面的右上角的“刷新”按钮就可以。

为了利用这一功能，我们要在Blend里面做点儿事情。现在这些JavaScript代码生成了一堆div元素，而没有使用为Windows应用商店开发提供的控件。而我们在这里要专门使用一个ListView控件来显示那些订阅源标题。不过在此之前，要在Blend里面（通过左上角的“项目”（Projects）选项卡）或者Visual Studio 2012里面（确保先进行保存，当Blend询问的时候让它重新加载）打开home.js文件，去掉ready函数中的代码：

在上面的代码中，除了把ready函数中为订阅源的标题生成div元素的代码去掉之外，还要在ready函数之前的代码中把订阅源的数据封装在一个WinJS.Binding.List对象的实例中，让ListView可以通过数据绑定来使用该对象。

一旦更新了home.js，Blend就没有可以用来显示订阅源数据的元素了。（如果看起来不是这样，使用设计界面右上角的“刷新”按钮即可正常显示。）如果没有更新，它就会显示段落元素告诉大家，“内容在这儿呢。”这时可以通过两次单击来把它删除——第一次是选中default.html中的contenthost元素，然后还要选择放在home.html文件中的段落——之后再按下Delete键。

要查看WinJS的控件集，以便添加一个ListView控件，可以单击左上方的"Assets"（资产）选项卡，选择JavaScript控件。图1.10展示了Assets选项卡和ListView控件。

图1.10　使用Blend把ListView控件添加到Windows应用商店应用程序中

添加ListView之前，要确保先定位到我们要在其中放置所选内容的section（节），使之成为主要目标。最简单的办法是，进入左下方的Live DOM中并找到它，如图1.10所示。然后就可以把ListView从"Assets"（资产）选项卡中拖动到Live DOM中的section标签或者设计界面上，这完全取决于你。

在DOM中放入了ListView之后，就可以在右侧编辑它的HTML属性和CSS属性了，如图1.11所示。

图1.11　使用Blend把ListView绑定到数据列表上

HTML属性选项卡中的"Windows App Controls"（Windows应用程序控件）部分（如图1.11所示），是针对一个特定的控件可设置所有选项的地方。对于ListView，我们要设置itemDataSource属性，以将它绑定到之前在home.js中生成的订阅源数据。所以这里比较特别，我们要把itemDataSource设置为feeds.dataSource，后者是我们前面创建的WinJS.Binding.List对象的一个属性，专用于列表控件的绑定。完成之后，就可以看到ListView自己立即进行了更新，显示出数据来，如图1.11所示，有些混乱。

之所以出现这样的问题，其实是因为我们没有对订阅源列表中的数据进行分离，分成需要显示的指定部分（标题）以及不想显示的部分（url）。要达到这样的效果，我们需要为ListView提供一个模板。

模板是一个可重用的HTML块，其作用是对项进行绑定，就是我们在这里要实现的功能。要实现这一目标，最简单的方法是单击在itemDataSource属性下方的itemTemplate属性，选择“<新建模板>”（Create new template）选项，会出现一个创建新模板的对话框，如图1.12所示。

图1.12　使用Blend创建数据模板

为新的模板起好名称之后，可以看到显示效果已经有了一些变化，如图1.13所示。

图1.13　使用Blend检验数据模板的内容

从ListView中选择一个项，可以看到该项的textContent被绑定到每个对象整体上，单击textContent字段旁边的小方块并选择“编辑数据绑定”（Edit Data Binding）就可以看到。"Binding value"对话框显示绑定的值是this，我们只想绑定到每一个对象的title属性上，而不是绑定到整个对象上。要解决这个问题，可以把绑定的值设置为text，而非this^[21]。单击一下“刷新”（Refresh）按钮，就可以精确地看到修改后的情况了，如图1.14所示。

图1.14　使用Blend修改数据模板的内容

HTML里面关于绑定和控件的一些重要内容，可以在第2章中学习。

除了对HTML（特别是HTML5，与WinJS在一起可以很好地发挥作用）进行编辑以外——Blend在管理CSS样式方面同样是非常出色的。要查看我们的项目的样式集，单击左上方的"Style Rules"（样式规则）选项卡，如图1.15所示。

图1.15　使用Blend管理项目中的样式

如果我们要增加订阅源标题的大小，使其在视觉上更为明显，首先要做的就是创建一个新的样式，这可以在home.css上单击右键，选择“添加样式规则”（Add Style Rule），然后输入新样式的选择器来实现，例如，输入.feedTitle（包括前面的点号）。要把新的CSS类和订阅源标题关联起来，可以在设计界面上选择一个订阅源标题，然后把HTML选项卡中的class属性设置为新的类，例如feedTitle（没有前面的点号）。图1.16显示了修改之后的样子。

图1.16　使用Blend把类和模板中的一个项关联起来，让模板中的所有项和该类进行关联

把feedTitle类和列表中的一个订阅源标题进行关联，实际上就是对所有的标题进行了设置，因为订阅源标题来源于一个重复的模板，而Blend是知道这一情况的。从"CSS Properties"（CSS属性）选项卡中的"Applied Rules"（应用的样式规则）列表中选择.feedTitle，可以看到这一结果，如图1.17所示。

图1.17　在Blend中选择一条CSS规则，显示应用了该规则的所有元素

图1.18中订阅源标题四周的方框清楚地表明了CSS属性发生改变时，有些什么元素会受到影响。现在，可以很容易地一次性为所有的订阅源标题设置宽度以及字体的大小，如图1.18所示。

Blend允许在应用程序运行的时候交互式地对它进行编辑，这样在设计应用程序的外观和基调的时候，设计与查看的来回周转时间会非常的短。想要更全面地了解在Windows应用商店应用程序中使用CSS可以实现什么效果，以及Blend对样式化和视图模式的支持情况，可以在第3章中阅读相关内容。

现在，我们的订阅源的标题已经变得很吸引人了，只不过还没有什么互动性。当用户调用这些项的时候（无论是使用键盘、鼠标还是手指），我们想把用户带到另一个页面，显示该订阅源对应的所有东西。为了实现这一目的，我们需要进行导航。

图1.18　使用Blend交互式地改变CSS属性

[20]这是在所有平台中出现过的最令人惊奇的开发特性之一，强烈推荐。

[21]此处应该是设置为title。——译者注