“SketchFlow 图”面板是一个图形编辑器，可让您定义应用程序的结构、流、导航和成分。
可以将“SketchFlow 图”面板专门用于定义应用程序的结构，并将美工板专门用于定义各个屏幕的内容。
导航屏幕
原型中的每个屏幕由“SketchFlow 图”面板中的一个节点表示。可以使用导航连接来间接表示屏幕之间的导航，以便将一个屏幕连接到另一个。在 SketchFlow 播放器中运行原型时，导航节点之间的连接将模拟“导航”面板中的屏幕之间的导航。
组件屏幕也显示在“SketchFlow 图”面板中。有关详细信息，请参阅本主题中后面的“组件屏幕”。
.png "SketchFlow 图")
在 SketchFlow 中，可以通过几种方式来定义屏幕之间的导航。可以在“SketchFlow 图”面板中通过现有的屏幕创建新的已连接的屏幕。可以在“SketchFlow 图”面板中连接两个未连接的屏幕。或者，可以右键单击屏幕上的对象，然后通过使用快捷菜单上的“导航到”命令来定义导航。
向 SketchFlow 图中添加新的已连接的导航屏幕
在创建新的 SketchFlow 项目时，会创建一个名为“Screen 1.xaml”的新文件。它作为节点出现在“SketchFlow 图”面板中，并作为 UserControl 出现在“项目”面板中。
.gif "Note")
注意：要打开新的 SketchFlow 项目，请参阅创建原型项目。
将指针移到“SketchFlow 图”面板左上角中的第一个节点 (Screen 1) 上。
注意：如果看不到“SketchFlow 图”面板，请在“窗口”菜单上，单击“SketchFlow 图”，或者按 Shift+F12。
该节点将突出显示，而且其关联的 XAML 文件名将出现在工具提示中。该节点底部也将出现一个可视菜单：
.png "Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(zh-cn,Expression.40).png")
将指针移到可视菜单中的左侧图标上。开始拖动此图标。此时将跟随着指针出现一个新的“幻影”节点。
将导航屏幕图标拖到您想要放置新屏幕的地方。现在可以通过直接在文本框中键入来为屏幕命名。如果未重命名新屏幕，则新节点现在将名为“屏幕 x ”，其中“ x ”是出现在应用程序流中的一系列已编号屏幕名称中的下一个编号。
注意：可以更改此名称，具体做法是：右键单击节点，再单击“重命名”；或者，单击节点，按 Shift+F2，然后直接在节点中键入新名称。
要在新屏幕上绘制内容，双击“SketchFlow 图”面板中的节点，以选择关联的文档选项卡。
节点之间的连接间接表示这些节点之间的导航。也可以创建未定义导航连接的导航节点。
向 SketchFlow 图中添加新的未连接的导航屏幕
在“SketchFlow 图”面板中右键单击，然后单击“创建屏幕”。
注意：如果看不到“SketchFlow 图”面板，请在“窗口”菜单上，单击“SketchFlow 图”，或者按 Shift+F12。
注意：可以更改此名称，具体做法是：右键单击节点，再单击“重命名”；或者，单击节点，按 Shift+F2，然后直接在节点中键入新名称。
要在新屏幕上绘制内容，双击“SketchFlow 图”面板中的节点，以选择关联的文档选项卡。
.gif "tip note")
提示：或者，在“SketchFlow 图”工具栏中，单击“创建屏幕”
.png "Ee341405.d63bd8e7-f302-48bb-a42e-119eb2fa06f8(zh-cn,Expression.40).png")
。
连接两个未连接的导航屏幕
在“SketchFlow 图”面板中，将指针移到要从其连接的节点上。
注意：如果看不到“SketchFlow 图”面板，请在“窗口”菜单上，单击“SketchFlow 图”，或者按 Shift+F12。
该节点将突出显示，而且其关联的 XAML 文件名将出现在工具提示中。该节点底部也将出现一个可视菜单：
将指针移到可视菜单中从左侧数起的第二个图标上，即“连接现有屏幕”
.png "Ee341405.edc454d7-a6dd-4721-a849-4069d5ffebe6(zh-cn,Expression.40).png")
图标。开始拖动此图标，以创建一个新的导航连接。此时将跟随着指针出现一个箭头。将此箭头拖到您要连接到的屏幕上。要删除连接，右键单击此箭头，再单击“删除”。
提示：或者，单击节点并将其拖到您要连接到的节点上。
组件屏幕
组件节点像导航节点一样也出现在“SketchFlow 图”面板中。组件节点和导航节点之间的一个重要差异是，组件节点没有传入的导航连接，这一点与导航节点不同。但是，组件节点可以有传入的组合连接。连接和箭头（间接表示应用程序流中的节点之间的链接）指示组件屏幕出现在其中的屏幕。
组件节点包含可以在多个屏幕上重复使用的内容。例如，可以创建一个包含背景的组件节点，并创建另一个包含菜单的组件节点，然后在整个原型中的多个屏幕上使用这两个组件。
有多种不同的方法可以创建新的组件节点。可以在“SketchFlow 图”面板中直接添加新的组件节点；或者，可以选择屏幕上的内容，然后用其构成作为 SketchFlow 图中的组件节点出现的屏幕。
向 SketchFlow 图中添加新的未连接的组件屏幕
- 在“SketchFlow 图”面板中的任意位置右键单击，然后单击“创建组件屏幕”。
向 SketchFlow 图中添加新的已连接的组件屏幕
在“SketchFlow 图”面板中，将指针移到要通过其添加已连接的组件屏幕的节点上。
注意：如果看不到“SketchFlow 图”面板，请在“窗口”菜单上，单击“SketchFlow 图”，或者按 Shift+F12。
该节点将突出显示，而且其关联的 XAML 文件名将出现在工具提示中。该节点底部也将出现一个可视菜单。
将指针移到可视菜单中从右侧数起的第二个图标上，即“创建并插入组件屏幕”
.png "Ee341405.91c06759-86fc-4dbf-a8b7-061300304308(zh-cn,Expression.40).png")
图标。开始拖动此图标，以创建一个新的组件连接。此时将跟随着指针出现一个箭头。
UserControl
组件屏幕是一种类型的 UserControl 。当您创建组件屏幕时，它将出现在 SketchFlow 图中。您也可以创建不是组件屏幕的 UserControl 。不是组件屏幕的用户控件不会出现在 SketchFlow 图中。
用 UserControl 构成组件屏幕
选择要转换为组件屏幕的对象或对象组。
注意：要选择一组对象，拖动鼠标，在要包括的那组对象的周围形成一个范围轮廓。
右键单击所选对象，然后单击“构成组件屏幕”。
在“构成组件屏幕”对话框的“名称”框中，键入 UserControl 的名称。
单击“确定”。
注意：在组件屏幕出现在导航屏幕中之前，可能要重新生成项目（按 F5）。
依据现有对象创建新的 UserControl
选择要转换为 UserControl 的对象或对象组。
注意：若要选择一组对象，请在这组对象周围拖出一个范围轮廓。您也可以在“资源”面板中直接选择对象。
右键单击所选对象，然后单击“构成 UserControl”。
在“构成 UserControl”对话框的“名称”框中，键入“UserControl”的名称。
有关详细信息，请参阅创建空的用户控件。
可视标记效果
可视标记效果可帮助您向 SketchFlow 图中的不同屏幕和连接类型应用不同的颜色，以区分屏幕和连接的类型。
向节点添加可视标记效果
在“SketchFlow 图”面板中，将指针移到要标记的节点上。
注意：如果看不到“SketchFlow 图”面板，请在“窗口”菜单上，单击“SketchFlow 图”，或者按 Shift+F12。
该节点将突出显示，而且其关联的 XAML 文件名将出现在工具提示中。该节点底部也将出现一个可视菜单：
将指针移到“更改可视标记”（右侧的图标）上。单击该图标，再单击要用于节点的颜色。
向连接添加可视标记效果
在“SketchFlow 图”面板中右键单击要标记的连接。
注意：如果看不到“SketchFlow 图”面板，请在“窗口”菜单上，单击“SketchFlow 图”，或者按 Shift+F12。
连接将突出显示。
单击“可视标记”，再单击要用于连接的颜色。
也可以修改 SketchFlow 项目的设置，以更改整个项目的可视标记效果。
有关详细信息，请参阅修改 SketchFlow 项目设置。
Microsoft Corporation 版权所有 ⓒ 2011。保留所有权利。