在 Blend 中编写 Windows 应用商店应用程序
混合的 Visual Studio 2012 年是强大的视觉创作工具，用于创建 Windows 存储应用程序使用 XAML 或 HTML 生成的。 混合随 Visual Studio 2012 年，它是可以直接从开始屏幕。
如果您熟悉如何创建 XAML 申请 Windows 演示文稿基金会 (WPF)、 Silverlight 或 Windows Phone，你很快会感觉在家里。 此版本的混合提供了类似于早期版本的工具，但它还包括用于 Windows 8 XAML 平台的支持。 此外，混合提供新的、 创新的视觉创作工具创建 Windows 存储应用程序使用 HTML、 CSS 和 JavaScript。
我首先采取快速看看什么是新的建筑与 XAML 中，Windows 存储应用程序和使用 HTML 创建 Windows 存储应用程序然后做混合中的工具更深入地探讨。
使用混合使用 XAML 创建 Windows 存储应用程序
Windows 8 提供了一个新的 XAML 平台，以支持应用程序开发。 该平台支持 c + + 中的不仅是传统托管的语言 （C# 和 Visual Basic），而且是本机开发。 XAML 功能集在 WPF 和 Silverlight 相似，包括一套 Windows 8 特定控件和混合支持的目标设备属性。 此外，在 Visual Studio 2012 和混合的 XAML 设计师现在使用相同的代码库，导致很多更好地兼容比之前。 （总体而言，Visual Studio 2012 和混合提供巨大、 集成的工作流程。 您可以在同一时间在这两种工具中打开同一项目并顺利切换。 我喜欢在 Visual Studio 中利用大代码编辑器和调试器，并设计、 创作和混合中的样式 UX 编写的代码)。
这里是几个 Windows 8 功能建设 Windows 存储应用程序与 XAML 混合中的亮点。
内置支持对于 Windows 8 控件混合了内置创作的 Windows 8 的控件，如 AppBar 和列表视图，使其易于使用这些标志性的控件生成应用程序的支持。 AppBar 是一个飞入控件，通常处于隐藏状态，但混合设计曲面可帮助您使控件用于交互式编辑视图。 列表视图，与所有协会发电模板数据项目、 组样式和更多，还完全支持在混合。
查看创作 Windows 存储应用程序预计对各种形式因素，在不同的显示尺寸和像素密度、 运行并进行调整以适应不同的意见 （人像、 风景、 捕捉和充分)。 设备面板 (图 1) 可帮助您创建、 编辑和修改应用程序与选定在设计图面上的不同意见。 设备面板还结合视觉状态管理器。
.png)
图 1 的设备面板中混合使用 XAML 生成的 Windows 存储应用程序
使用混合使用 HTML 创建 Windows 存储应用程序
混合是一个独特的环境，用于创建、 造型和迭代基于 HTML 的用户界面设计和创造整洁、 专业的、 符合标准的标记。 与传统的 HTML 创作工具，不同的混合可以处理使用 JavaScript 来创建或修改动态内容的应用程序的设计方案。 混合设计曲面作为 Windows 运行时，使用相同的渲染引擎，但它也从加载一个页面，可以确保准确可视化的这两个静态和动态页面元素的时刻运行 JavaScript。 生活的 DOM 小组和混合中的丰富、 生产性 CSS 工具帮助您与您创建标记中的元素以及来自脚本还是是从片段中加载的每个元素。
接下来的几节将介绍这些和其他亮点在混合中的 HTML 功能。
在设计图面上的代码运行生成的代码页的准确地呈现在设计图面上的代码构建 Windows 存储应用程序与在混合中的 HTML 的基石。 例如，在标记图 2 包括标准的 HTML 和 JavaScript。 当此标记粘贴混合，JavaScript 运行中的空页，并且在编辑模式下在设计图面上直接执行。
图 2 混合运行 JavaScript 在设计图面上
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function init() {
var p = document.querySelector('#placeholder');
if (p) {
var fruit = ['apples', 'oranges',
'lemons', 'pears', 'strawberries'];
for (var i=0; i<fruit.length; i++) {
var e = document.createElement("div");
e.textContent = fruit[i];
e.className = 'fruit';
p.appendChild(e);
}
}
}
</script>
</head>
<body onload="init()">
<div id="placeholder"></div>
</body>
</html>
在设计图面上正确地呈现 JavaScript 所生成的元素。 因为在设计图面在编辑模式中运行代码，您可以选择 JavaScript 生成元素，就像任何其他元素。
元素还显示在生活的 DOM 小组 (图 3），它表示文档对象模型 (DOM) 树中，不只是标记文档的内容的动态状态。 在标记中，不存在的元素如创建的 JavaScript 的或动态加载的一个片段，从标有闪电图标，以指示这些元素由脚本生成。
.png)
图 3 活 DOM 面板
生活的 DOM 面板还显示哪些类附加到每个元素。 例如，在代码图 2 生成的类名称"果"为每个生成的元素。 虽然不能直接修改 JavaScript 生成的元素 （有没有标记的混合来修改），您仍可以样式对类，只要生成代码使用 CSS 类名称，或生成的元素可以否则访问同一个 CSS 选择器。
丰富的 CSS 属性编辑器融合提供使复杂的 CSS 属性可访问的以及大量的交互操作的元素支持在设计图面的许多丰富的属性编辑器。 例如，Windows 8 支持一种新的称为 CSS 网格的标准 CSS 布局模型。 CSS 网格是非常有用的布局，特别是为可调整大小的应用程序需要在多个窗体因素上运行。 网格布局一组行和列，类似于一个表，其中的每个行和列可以分配特定的调整大小行为。 要按比例、 调整大小或以自动适合其内容，可以为固定大小，设置行或列。 如果你熟悉的 XAML 网格，你就会正确在家与 HTML 网格中。
在混合编辑出许多 CSS 布局方案应力的 CSS 网格 （见图 4)。 您可以绘制和修改权在设计图面上的网格，看到就地测量 [1]，修改大小和使用中发生的单位对 UI [2] 对象、 插入和删除行和列以及更多。
.png)
图 4 画板编辑 CSS 网格的
混合还提供颜色编辑器和支持为多层背景和 CSS 渐变 （图 5），所有与即时视觉反馈。 此外，您可以方便地编辑 CSS 中混合的过渡。 图 6 显示 CSS 过渡编辑器具有交错过渡为三个属性，其中包括缓动函数定义。
.png)
图 5 色编辑包括视觉反馈
.png)
图 6 编辑 CSS 过渡
CSS 编辑用 CSS 样式是核心的直观地创作基于 HTML 的用户界面。 混合是围绕一套复杂的 CSS 样式使用的工具。 例如，样式规则小组 (图 7） 显示您应用于当前打开的 HTML 文档的所有样式规则。
.png)
图 7 样式规则小组
在图 7，您可以看到的样式表和声明顺序 [1] 中的样式规则的排序方式。 搜索支持的样式规则的大集合。 样式规则面板还显示媒体查询 [2]，并在每个查询中定义的样式规则。 你也看到哪些媒体查询中，如果有，是当前处于活动状态。 因为应用程序使 Windows 存储区使用的媒体查询处理各种视图状态，这是非常重要的应用程序的样式设置。
可以创建、 编辑或删除样式规则面板中 （尽管混合了样式规则创建许多生产力快捷方式） 样式规则。 在创建 CSS 选择器的过程中，混合帮助智能感知的 CSS 选择器。 当您键入一个选择器，融合提供当前文档的上下文中完成选项的列表，您可以看到在图 8。
.png)
图 8 为 CSS 选择器的的智能感知
CSS 选择器的智能感知功能还强调了要在输入时的目标选择器的元素。 此功能称为规则范围装饰。 规则范围装饰器不只会显示的智能感知 ； 它还会出现直接选择样式的任何时间，或间接，使其更容易地确定哪些元素由所选的样式规则受到影响。 在图 9，该规则范围装饰器显示绿色轮廓。 CSS 选择器可以变得相当复杂，所以你会发现这是一个非常有用的实用程序。
.png)
图 9 的规则范围装饰器示例
您可以直接在面板中的样式规则总是选择样式规则，然后编辑 CSS 属性面板中的该样式规则的 CSS 属性。 然而，在许多情况下，是容易在设计图面上，或在生活的 DOM 面板中选择一个元素和查找影响该元素的样式规则。
每当您选择的设计元素表面，CSS 属性面板 （图 10） 显示样式规则应用到的优先顺序中的元素的列表。 这样就很容易地找到您需要的样式。 默认情况下，属性都显示在分类视图，但都还提供按字母顺序排列的视图。 CSS 属性列表是相当长 （现已超过 300 CSS 属性的定义），所以要找到一个属性，您可以搜索属性列表或筛选器，以查看当前正在设置规则中的属性。
.png)
图 10 CSS 属性面板
在许多情况下，属性的元素的样式作出贡献来自许多不同的样式规则。 这可以使难以理解为什么元素看起来，它的方式。 在这些情况下，所有的"中奖"属性汇总视图可帮助确定正在应用的样式 （图 11)。
.png)
图 11 视图获胜属性
赢得属性视图显示只上升到表面的 CSS 层叠，按原产地的样式规则排序的属性。 这一观点是极其有用的诊断程序，而且对现有的属性值的快速调整。
计算值视图显示浏览器看到为处理 CSS 声明后呈现的值的属性。 当你试图解决的问题有时可以很大的帮助。 混合还提供访问到 CSS 层叠，另一种工具，用于诊断您的显示器中存在的问题。
对于每个属性，您可以查看 CSS 层叠，请参阅从影响给定的属性的所有规则的值。 例如，您可能由两个不同的规则，一个在顶部被一个"胜利"的该属性定义的背景颜色属性。 CSS 层叠显示 （图 12） 还可让您快速定位到相互竞争的规则。
.png)
图 12 观的 CSS 层叠
混合提供了许多的快捷方式，可以快速创建所选元素的样式规则。 可以创建一条规则，目标 （#foo，如果元素具有 ID 美孚) 所选元素的 ID，也可以创建规则匹配的任何类在类名属性。 你可以还添加和删除类快速，或添加新的类以及在一个单一步骤中，创建一个规则 （见图 13)。 这些上下文中生产力手势使与混合快速、 平稳、 高效的样式设置。
.png)
图 13 添加类，并在单个步骤中创建的样式规则
最后但并非最不重要，因为每个人都会犯错误，改变主意，融合提供一些重构功能。 有了这些，可以快速剪切和复制整个样式规则，所有属性值从样式规则或只是选定的属性值。 然后，可以将复制的规则或属性粘贴到新的或现有样式规则。
WinJS 控件 JavaScript （WinJS） 的 Windows 库，Windows 提供一组基于 HTML 控件用于 Windows 存储的应用程序。 这包括切换开关，简单的控件，以及复杂的控件，如列表视图或 FlipView。 WinJS 控件是类似于其他 UI 工具包，如 JQuery 的控件。 一个区别是，可以在代码中使用控件的 WinJS （和还标记中以声明方式） 通过使用标准的数据属性应用控制元数据。 这种机制允许混合为控件提供一流的创作经验。
WinJS 控件中混合使用资源面板创建。 图 14 显示与该类别的最常用的控件显示资源面板。 通过拖动或双击该资产的可以在页面插入控件或 HTML 标记。 您还可以搜索和筛选结果在资源面板中。
.png)
图 14 混合资产面板
一个控件添加到设计图面之后，您可以使用 HTML 属性面板来进行配置。 将选定控件的配置选项面板中的 Windows 应用程序控件类别所示。 用于切换开关，例如，可以设置的 labelOff 和手提箱上的属性或修改的标题。
页面加载时 WinJS 工具包查找元素与数据赢控件属性，并且，然后创建备份控制，具有数据赢的选项中设置的选项。 控制执行，与其他的工具包中的 HTML 控件一样创建动态显示该控件的元素。 因为混合运行的代码在设计图面上，将在编辑模式下准确地显示控件。 您还会看到由控件创建的动态元素。 JavaScript 生成元素由闪电图标来标识。
数据模板编辑和碎片即使 ListView 是比切换开关更多复杂的控件，它被配置以类似方式使用属性。 除此之外，混合了进行数据模板编辑使用 ListView 深支持。 数据模板是用于呈现每个列表中的单个数据项目的 html 片段。 住在混合帮助您设计中编辑数据模板和样式的数据模板内列表视图，使用更新的地方准确反映。
您可以从属性编辑器中创建一个空的默认数据模板右侧，，然后使用创作工具的混合编辑模板。 图 15 显示的标记的简单列表视图中显示的数据模板与图 16。
图 15 ListView 与数据模板
<div id="cityTemplate"
data-win-control="WinJS.Binding.Template">
<div class="cityItem">
<img class="cityImage"
data-win-bind="src:image">
<div class="cityLabel"
data-win-bind="textContent:name"></div>
</div>
</div>
<div id="cityList"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource:AppData.cities.dataSource,
itemTemplate:select('#cityTemplate'),
layout:{type:WinJS.UI.ListLayout}">
</div>
.png)
图 16 ListView 使用数据模板
一个 div 定义列表视图，并另一个 div，标记为一个模板控件，该控件为数据模板提供了根。 为每个数据项列表视图呈现实例化此 div （在本例中，与类 cityItem div） 的内容。 附加到模板 div 中的模板控件还可确保该模板并不是在页上可见。
这造成有些问题进行可视化编辑，因为要编辑的数据模板，您需要编辑模板的内容。 但是，数据模板控件隐藏模板内容 — — 让它走的是"真正的"页面内容 — — 所以你不能看到任何东西来编辑。 但即使模板内容可见，你真的想要查看和编辑数据模板列表视图不是之外的上下文中。
图 17 说明你需要做编辑的数据模板。 在列表视图直接在 [1] 在设计图面上选择一个元素。 您可以看到活的 DOM 面板中选定的元素 （图像） 是动态生成的元素内 ListView [2]。 列表视图还显示在生活的 DOM 面板中 [3]。
.png)
图 17 编辑列表视图和数据模板
在代码视图中突出显示的 img 标签内的数据模板 [4]。 在设计曲面图的顶部，信息告诉您选定的内容来自数据模板 [5]。
当您选择的元素列表视图，混合痕迹显示的元素的起源。 混合标识作为数据模板来自此元素，并显示此信息。 现在，当您编辑元素，混合自动使有关编辑中的标记和样式的数据模板的更新如同你在列表视图中显示的所有项目。 需要没有手动更新。
能够看到通过 ListView 插入到数据模板是我最喜欢的混合特征之一。 这也适用的碎片。 片段是动态加载到另一页使用 WinJS 实用程序函数或 HTMLControl （特别 WinJS 控件） 的 HTML 页面。 只使用模板时，混合检测页面上的片段，并提供相同级别的就地编辑。 您可以看到片段中的地方和上下文中 （图 18） 他们注定了要使用，并且完全编辑它们，不受限制，而不必打开另一个文档的方式。
.png)
图 18 编辑 HTML 片段
交互模式
交互模式是混合中的最佳和最有用的功能之一。 正如我说之前，混合始终运行您的代码在设计图面上。 在正常的编辑模式下，它阻止您与该应用程序进行交互，以便您可以只选择、 操纵和编辑都在画板上显示的元素。 交互模式带走这个保护层，这样您可以与应用程序作为它交互运行。
所以为什么不只是运行应用程序吗？ 最重要的原因是累积状态的能力。 当 Windows 中或在模拟器中运行应用程序时，完全脱离您已在设计图面上正在运行的实例。 您正在运行的应用程序与任何交往只有正在运行的应用程序的状态更改。 暂时停止此实例中，累积的状态已经一去不复返了。
交互模式和编辑模式之间切换，应用程序状态将被保留。 如果你做一些简单的切换按钮的状态更改，使中飞出、 更改选项或甚至创建绘图画布上，当您返回到编辑模式时，将保留您的状态。 这使您可以编辑和调整您的应用程序在您通常从不会看到在设计图面的国家。 这是令人难以置信的便捷、 快速和解放因为您可以编辑在视觉上指出，现在无法为静态所有。 在许多方面，交互模式就像在浏览器中的开发人员工具，但实际源项目和设计图面密不可分。
图 19 显示了一个简单的世界时钟应用程序的两个视图。 若要查看第二个视图，需要某些代码运行，而触发的模式开关切换。 在编辑模式下，不能使这段代码执行，但尽快到交互模式切换我只可以幻灯片数字/模拟切换和视图更改，可供编辑。 我再也无法想象没有交互模式下工作。
.jpg)
图 19 开关通过互动模式的动态应用程序状态
设备的设计
在各种各样的设备，从大型桌面监视器小片上运行 Windows 存储应用程序。 这些设备进来各种各样的各项决议，显示像素密度。 此外，Windows 存储应用程序可以在不同的视图模式 （风景、 肖像、 捕捉和填充模式）。
创作适应性强的应用程序，时，重要的是要能够查看和编辑在各种不同的视图状态的应用程序。 混合，可以做到这一点，准确地显示不同缩放模式在设计图面上，控制的设备面板。
总结
混合的 Visual Studio 2012 年提供视觉创作用于 Windows 存储的应用程序，并支持 XAML 和 HTML。 XAML 功能是混合的类似于以前版本，因此如果您已经使用以前的版本你会感到宾至如归。 除了丰富支持 Windows 存储应用程序开发，混合的 Visual Studio 2012 年还支持混合增强与 XAML 设计器的兼容性。
混合支持 html 表示某种新的和创新的 HTML 的创作环境。 不仅是 HTML 和 CSS 标记，也相当频繁模式的 JavaScript 生成的内容，可以处理混合。 最重要的是，为 HTML 混合使视觉创作的 HTML、 CSS、 WinJS 生产，快速和乐趣。
Christian Schormann 是混合团队合作伙伴程序经理。他的激情设计师、 艺术家和开发人员构建视觉创作工具。
衷心感谢以下技术专家对本文的审阅：乔安娜梅森、 乌恩 Ravindranathan、 Josh 辣椒和埃里克 · Saltwell