创建应用程序流

“SketchFlow 图”面板是一个图形编辑器，可让您定义应用程序的结构、流、导航和成分。

可以将“SketchFlow 图”面板专门用于定义应用程序的结构，并将美工板专门用于定义各个屏幕的内容。

导航屏幕

原型中的每个屏幕由“SketchFlow 图”面板中的一个节点表示。可以使用导航连接来间接表示屏幕之间的导航，以便将一个屏幕连接到另一个。在 SketchFlow 播放器中运行原型时，导航节点之间的连接将模拟“导航”面板中的屏幕之间的导航。

组件屏幕也显示在“SketchFlow 图”面板中。有关详细信息，请参阅本主题中后面的“组件屏幕”。

在 SketchFlow 中，可以通过几种方式来定义屏幕之间的导航。可以在“SketchFlow 图”面板中通过现有的屏幕创建新的已连接的屏幕。可以在“SketchFlow 图”面板中连接两个未连接的屏幕。或者，可以右键单击屏幕上的对象，然后通过使用快捷菜单上的“导航到”命令来定义导航。

向应用程序流添加新的已连接的导航屏幕

1. 在创建新的 SketchFlow 项目时，会创建一个名为 Screen 1.xaml 的新文件。它作为节点出现在“SketchFlow 图”面板中，并作为 UserControl 出现在“项目”面板中。

   说明：
   要打开新的 SketchFlow 项目，请参阅创建原型项目。

   将指针移到“SketchFlow 图”面板左上角中的第一个节点 (Screen 1) 上。

   说明：
   如果看不到“SketchFlow 图”面板，请在“窗口”菜单上，单击“SketchFlow 图”，或者按 Shift+F12。

   该节点将突出显示，而且其关联的 XAML 文件名将出现在工具提示中。该节点底部也将出现一个可视菜单：

   

2. 将指针移到可视菜单中的左侧图标上。开始拖动此图标。此时将跟随着指针出现一个新的“幻影”节点。

3. 将导航屏幕图标拖到您想要放置新屏幕的地方。此时将出现新的节点，默认情况下它名为“Screen 2”。

   说明：
   可以更改此名称，具体做法是：右键单击节点，再单击“重命名”；或者，单击节点，按 Shift+F2，然后直接在节点中键入新名称。

4. 要在新屏幕上绘制内容，双击“SketchFlow 图”面板中的节点，以选择关联的文档选项卡。

节点之间的连接间接表示这些节点之间的导航。也可以创建未定义导航连接的导航节点。

向应用程序流添加新的未连接的导航屏幕

1. 在“SketchFlow 图”面板中右键单击，再单击“创建屏幕”。

   说明：
   如果看不到“SketchFlow 图”面板，请在“窗口”菜单上，单击“SketchFlow 图”，或者按 Shift+F12。

   说明：
   可以更改此名称，具体做法是：右键单击节点，再单击“重命名”；或者，单击节点，按 Shift+F2，然后直接在节点中键入新名称。

2. 要在新屏幕上绘制内容，双击“SketchFlow 图”面板中的节点，以选择关联的文档选项卡。

   提示：
   或者，在“SketchFlow 图”工具栏中，单击“创建屏幕”。

连接两个未连接的导航屏幕

1. 在“SketchFlow 图”面板中，将指针移到要从其连接的节点上。

   说明：
   如果看不到“SketchFlow 图”面板，请在“窗口”菜单上，单击“SketchFlow 图”，或者按 Shift+F12。

   该节点将突出显示，而且其关联的 XAML 文件名将出现在工具提示中。该节点底部也将出现一个可视菜单。

   

2. 将指针移到可视菜单中从左侧数起的第二个图标上，即“连接现有屏幕” 图标。开始拖动此图标，以创建一个新的导航连接。此时将跟随着鼠标指针出现一个箭头。

3. 将此箭头拖到您要连接到的屏幕上。要删除连接，右键单击此箭头，再单击“删除”。

   提示：
   或者，单击节点并将其拖到您要连接到的节点上。

组件屏幕

组件节点像导航节点一样也出现在“SketchFlow 图”面板中。组件节点和导航节点之间的一个重要差异是，组件节点没有传入的连接，这一点与导航节点不同。组件节点只有传出的连接。连接和箭头（间接表示应用程序流中的节点之间的链接）指示组件屏幕出现在其中的屏幕。

组件节点包含可以在多个屏幕上重复使用的内容。例如，可以创建一个包含背景的组件节点，并创建另一个包含菜单的组件节点，然后在整个原型中的多个屏幕上使用这两个组件。

有多种不同的方法可以创建新的组件节点。可以在“SketchFlow 图”面板中直接添加新的组件节点；或者，可以选择屏幕上的内容，然后用其构成作为 SketchFlow 图中的组件节点出现的屏幕。

添加新的未连接的组件屏幕并将其添加到应用程序流中

• 在“SketchFlow 图”面板中的任何地方右键单击，再单击“添加组件屏幕”。

添加新的已连接的组件屏幕并将其添加到应用程序流中

1. 在“SketchFlow 图”面板中，将指针移到要通过其添加已连接的组件屏幕的节点上。

   说明：
   如果看不到“SketchFlow 图”面板，请在“窗口”菜单上，单击“SketchFlow 图”，或者按 Shift+F12。

   该节点将突出显示，而且其关联的 XAML 文件名将出现在工具提示中。该节点底部也将出现一个可视菜单。

   

2. 将指针移到可视菜单中从右侧数起的第二个图标上，即“创建并插入组件屏幕” 图标。开始拖动此图标，以创建一个新的组件连接。此时将跟随着鼠标指针出现一个箭头。

3. 将此箭头拖到您要连接到的屏幕上，然后松开鼠标按钮。

用 UserControl 构成组件屏幕

1. 选择要转换为组件屏幕的对象或对象组。

   说明：
   要选择一组对象，拖动鼠标，在要包括的那组对象的周围形成一个范围轮廓。

2. 右键单击所选对象，再单击“构成组件屏幕”。

3. 在“构成组件屏幕”对话框的“名称”框中，键入 UserControl 的名称。

4. 可选：要向应用程序流添加组件屏幕，选择“添加到 SketchFlow 图”。

5. 单击“确定”。

   说明：
   在组件屏幕出现在导航屏幕中之前，可能要重新生成项目（按 F5）。

可视标记效果

可视标记效果可帮助您向 SketchFlow 图中的不同屏幕和连接类型应用不同的颜色，以区分屏幕和连接的类型。

向节点添加可视标记效果

1. 在“SketchFlow 图”面板中，将指针移到要标记的节点上。

   说明：
   如果看不到“SketchFlow 图”面板，请在“窗口”菜单上，单击“SketchFlow 图”，或者按 Shift+F12。

2. 该节点将突出显示，而且其关联的 XAML 文件名将出现在工具提示中。该节点底部也将出现一个可视菜单。

   

3. 将指针移到右侧图标上。单击该图标，再单击要用于节点的颜色。

向连接添加可视标记效果

1. 在“SketchFlow 图”面板中，将指针移到要标记的连接上。

   说明：
   如果看不到“SketchFlow 图”面板，请在“窗口”菜单上，单击“SketchFlow 图”，或者按 Shift+F12。

   连接将突出显示。

2. 单击“可视标记”，再单击要用于连接的颜色。

也可以修改 SketchFlow 项目的设置，以更改整个项目的可视标记效果。

有关详细信息，请参阅修改 SketchFlow 项目设置。