9.11 导航类型
菜单命令：Edit | Properties... Alt+Enter
工具栏：默认导航类型选择器：
导航类型控制导航到目标元素或窗口时发生的情况。建立连接时，将尽可能使用在工具栏上选择的默认导航类型。
某些元素（例如大多数情节提要板动作元素）具有固定的“导航类型”，将覆盖选定的类型。
在所有其他情况下，如果选择“自动”，则将根据要连接的内容选择适当的默认导航类型。
导航类型：
|
Modal Popup |
|
在所有其他窗口之上打开该目标，将其作为模式窗口打开，直到关闭处于相同模式级别的所有窗口（通常只是一个对话框窗口）后，该窗口才处于活动状态。 |
|
Modal Choice Popup |
|
与模式弹出窗口类似，但专门用于弹出菜单和其他临时选择窗口。打开后，在目标窗口之外单击将自动关闭（取消）它。同样，当窗口关闭时，所有以前的“模态选择”弹出窗口也会自动关闭。这是嵌套的级联菜单和组合框下拉菜单的工作方式，但也可以用于任何弹出选择窗口。 |
|
Show Window |
|
以相同模式级别显示目标窗口，因此该级别上的现有元素仍处于活动状态。例如，使用它来打开文档窗口或进行扩展对话框。 |
|
Hide Window |
|
隐藏指定的目标窗口。 |
|
Toggle Window |
|
根据目标窗口是否可见显示或隐藏它。 |
|
Toggle Overlay |
|
根据目标窗口是否可见显示或隐藏它。这类似于“切换窗口”，不同的是，目标窗口对鼠标不可见，因此鼠标事件会传递到其下方。这对于在导航仍保留有基础按钮，选项卡或其他元素的情况下的过渡非常理想。 |
|
Replace Window |
|
使目标窗口出现并替换另一个窗口，该窗口随后被隐藏。如果目标连接到窗口占位符锚，则它将替换连接到同一锚的所有其他窗口。将其用于带选项卡的对话框和面板等。如果它连接到窗口位置锚点或根本没有锚点，则它将替换从其调用的主窗口。使用此技术进行向导和顺序演示等。 |
|
Replace Top Window |
|
使目标窗口出现并替换当前模态级别的所有其他窗口，然后将其隐藏。尤其是在缩略图组件中，可以使用它在Web应用程序设计中的Web页面之间导航。这支持允许“后退”和“前进”导航的导航历史记录。 |
9.12 定位窗口和元素
当您的设计要求使用导航链接打开一个窗口时，默认情况下，Prototype会将其简单地放置在屏幕*。对于模式对话框，这很好，但是在大多数其他情况下，您将需要将窗口放置在特定位置。
这是通过在故事版面板上使用放置锚来实现的：
通过将目标窗口或元素连接到这些锚点之一，可以精确指定要显示的位置。通过更改“锚点”属性，可以选择要对齐的任何角或中心。如果将锚放置在可用空间上（而不是在另一个元素的顶部），则目标将相对于调用元素窗口（从中导航的窗口）定位。
通过更改锚点的“对齐到”属性，可以使目标窗口相对于鼠标光标而不是“锚点”框本身出现。当您要创建上下文菜单和其他类似的弹出窗口时，请使用此选项。
在许多情况下，这两种锚在功能上是相似的并且可以互换，但是从2.0版开始，您应该意识到一些重要的区别。
窗口占位符
较大的锚点称为“窗口占位符”。默认情况下，它是可调整大小的，尽管实际大小实际上不相关（仅对齐角或中心位置），但是当您要创建选项卡式面板和对话框时，它提供了有用的指导和意图指示。面板可以简单地制成与占位符相同的尺寸。
窗口占位符通常与“替换窗口”导航链接一起使用，以创建选项卡式面板和对话框（实际上，它们很少用于其他任何东西）。 “替换窗口”有一些特殊规则，这些规则也允许它们用于顺序设计和其他情况。
对于窗口占位符，“替换窗口”始终仅替换附加到占位符的元素。
窗位置锚
小型方形锚称为“窗口位置锚”。这些是固定大小的，因为只有对齐角或中心位置是相关的，尽管您可以根据需要通过属性来更改大小。
在每种情况下，当您要指定目标窗口的位置并且您不打算在更合适的窗口占位符的情况下不在该位置替换另一个窗口或面板时，将使用它们。
对于定位锚，“替换窗口”总是在包含链接的模式下替换主窗口或元素（调用方），而不管附加到锚的其他目标元素为何。
9.13 关闭窗户
您可以在设计中创建导航链接，以在“原型”中运行它们时打开不同的设计窗口。完成此操作后，您需要能够再次关闭它们。
有4个Storyboard面板元素可以用作关闭窗口的导航目标：
在当前模式级别关闭所有窗口。通常，这只是一个单一的窗口，例如一个对话框，但是如果该窗口包含其他“切换到”的窗口或面板（例如在选项卡式对话框中），那么它们也将被关闭。如果没有其他窗口，则原型本身将关闭并返回设计模式。
这在功能上与上面的“关闭并接受”框相同，但是包含了两个框以使设计更易于理解（尤其是在用作开发人员的规范时），以及在以后可能对设计有所不同的情况下进行的校对设计原型。
仅关闭连接到“关闭”框的元素的父窗口。通常，您将使用它来关闭文档和应用程序框架窗口。如果没有其他窗口，则原型本身将关闭并返回设计模式。
退出原型应用程序，关闭Prototype并返回设计模式。
默认行为
由于对话框在设计中非常常见，因此继续添加“关闭并接受”和“关闭并取消”框并将它们连接到“确定”和“取消”按钮可能有点繁琐，因此以下按钮具有在默认的“关闭”行为中（默认行为由按钮上的小圆圈表示，当在“原型”中运行时该按钮不可见）：
当其他元素（例如“框架窗口”和“对话框”）被按下时，它们隐式执行“关闭”功能，而无需连接到“关闭”框。
您可以使用显式导航覆盖任何元素的默认行为。
9.14 使用导航叠加
菜单命令：View | Navigation Overlays
有时您想从通常不支持导航的元素进行导航。例如，您可能想响应列表框或树项目上的单击。您可能想要从单个位图图像的特定区域创建图形按钮或创建多个超链接。
为此，请使用情节提要面板中的导航叠加：
将其放在您要导航的区域上，然后以通常的方式添加导航链接。当您运行原型时，导航覆盖将不可见。
导航叠加也可以用于覆盖元素上的默认导航行为。通过将叠加层放置在元素顶部，它将首先使鼠标单击。
您也可以使用“视图|导航叠加”菜单命令隐藏所有叠加，以更清晰地查看基础设计，但是必须再次使它们可见以从中创建连接。
示例：从滑雪道地图创建信息弹出窗口
9.15 添加消息框
您可以在设计中使用“消息框”来描述在实际应用程序中此时可能会发生的某些功能，或者替代尚未生成的部分设计。
例如，您可以描述一些复杂的行为，这些行为很难或无法在GUI Design Studio原型中重现，或者用几句话描述比实际尝试和模仿更容易。
可以在“故事版”面板上找到消息框。将它们添加到设计中时，可以设置“标题”和“消息”文本，它们显示如下：
当您运行原型并导航到消息框时（例如，通过单击连接到消息框的按钮），将弹出一个实际的消息框以显示消息：
当您单击“关闭”按钮时，将从设计上的消息框中执行任何导航。如果没有，则弹出窗口将简单关闭并返回上一屏幕。
9.16 添加方案选项
菜单命令：Run | Prototype Options...
一旦有了基本设计，您可能想探索不同的情况，例如在实际应用程序中可能发生的错误情况。发生这些情况时，开发人员可能会显示一个简单的错误消息框，但您可能希望设计一些非常具体的错误处理用户界面。
您可能还考虑了一个对话框的多个版本（例如），并希望在正在运行的应用程序的上下文中向其他人演示每个对话框，而不必切换回设计模式并更改它们之间的连接或为它们创建完全不同的设计每个（如果您有一组以上的替代设计部分，这将是一个很大的问题）。
每当您想在设计中提供选择时，GUI Design Studio都会在“故事版”面板上为此提供一个条件框。将这些添加到设计中后，您可以创建任意数量的方案条目，并将每个方案条目连接到其他任何事物。
请注意，列表中的第一种情况很特殊。尽管它可以包含任何文本，但是在相关的“正常”情况下，应始终保留该文本。其他情况通常是例外情况，但是您可以将它们用于任何情况。
条件框出现在这样的设计中：
方案文本两侧的框是绘制向前连接的位置。如果您插入，删除或重新排序方案，它们将保持其向前的连接。
通常，当您运行“原型”并且将“条件框”导航到（例如，通过单击连接到“条件框”的按钮）时，将出现“选择方案”对话框：
在列表中选择所需的方案，然后单击“选择”按钮（或只需双击列表中的条目）。如果方案连接到设计中的任何内容，则将执行该导航。否则，或者如果按下“取消”按钮，对话框将简单地关闭并返回上一屏幕。
自动方案选择
GUI Design Studio的专业版允许使用数据变量基于简单或复杂表达式进行条件导航。
方案选项
如果您在设计中添加了很多“条件框”，则可能不希望场景选择弹出窗口在您第一次向某人演示原型时随处出现。取而代之的是，您可能希望先关注“正常”情况，然后再说明其他情况。
菜单命令“运行|原型选项...”打开“原型选项”对话框，通过该对话框，您可以控制原型在设计中遇到条件框时发生的情况。默认显示弹出对话框（如上所示），其中包含方案列表供您选择。或者，您可以选择始终显示第一个（正常）情况，第二个（错误情况）情况，以每次循环显示方案，或者，只是出于娱乐目的，选择一个随机方案：
9.17 使用组合框
组合框与所有其他标准控件不同，它们在操作过程中会通过下拉列表更改大小和形状。在GUI Design Studio中，组合框仅由永久部分表示，并且下拉列表必须单独添加：
这有两个优点：
1.下拉菜单的内容可以视为设计文档的一部分，而不是隐藏在元素属性中。
2.下拉列表不仅限于文本列表，还可以轻松地由任何其他元素或组件替换，例如，创建颜色或线条样式选择器。
下面显示的示例设计来自“ Design Collection”示例项目：
“形状”组合框连接到标准文本列表（类型为“组合框放置列表”的元素）。导航链接类型自动默认为“模式选择弹出窗口”，因为这几乎总是您想要的。另请注意，没有定位锚。运行“原型”并单击“组合”时，除非您放置定位锚点以覆盖该弹出框，否则该弹出窗口将自动左对齐在“组合框”下方。为了获得最佳效果，您将需要调整文本列表的大小，使其与组合框本身的宽度相同。
第二个组合框显示了如何对其进行修改以提供“颜色”选择器。文本设置为空白，顶部放置一个矩形以指示当前颜色。无需链接到文本列表，而是将组合直接连接到“标准组件”项目中的“颜色选择器”组件。在这种情况下，弹出窗口的宽度不会改变。
“行星”组合框使用完全相同的原理。唯一的区别是，它连接到的组件是一个复杂的列表控件，当您单击列标题时，该列表控件实际上会进行排序。
Express Edition限制条件
GUI Design Studio的专业版提供功能组合框和弹出数据选择。
在Express版中，尽管在运行Prototype时将显示下拉列表，以便您（以及向谁演示的人）可以看到所有选项，但是从弹出窗口中选择一个项目不会更改实际组合框的内容。这与所有其他实际上不起作用的控制元素保持一致，必须进行设置以说明正在使用的特定场景。
通过单击弹出窗口中的一个选项，可以显示和隐藏其他元素以在界面中创建更改，但实际上，这通常比付出的努力更多。相反，最好用注释或注释记录您的意图。
在上面的“颜色”示例中，彩色矩形遮挡了组合框。运行原型时，这将阻止对基础组合框的单击，因此您只需要记住单击下拉箭头按钮以使弹出窗口出现即可。
9.18 使用结构化菜单
创建基本的顶层菜单栏非常简单，但是添加级联的下拉菜单需要一些说明。
菜单栏
从“应用程序窗口”开始，并在其上附加一个菜单栏：
菜单栏上已经包含一些默认的标准菜单项，但是您可以编辑属性来更改它们：
提示：如果要添加许多菜单项，请在框中键入每个名称，然后使用Alt + I热键“插入”它们。这样会将焦点重新放置到输入框，以准备下一个项目，将手放在键盘上，这样您就不必伸手去拿鼠标了。
下拉菜单
下拉菜单作为“弹出菜单”单独添加到设计中。为了方便起见，您将在“标准组件”项目中找到一些已经为您创建的常用菜单。找到并打开“ Common_Menus.gui”文件，然后复制并粘贴所需的菜单。然后，您可以根据需要调整它们。
创建下拉菜单后，您只需通过导航链接将菜单栏项目连接到它们。这些将自动默认为正确的“模式选择弹出窗口”类型。您无需创建定位锚，因为当在“原型”中运行时，下拉菜单将自动正确放置在菜单项下方，尽管您可以使用锚来替代此设置：
级联子菜单
您可以使用与顶层菜单栏上的下拉菜单完全相同的方式来创建级联子菜单。将子菜单创建为单独的弹出窗口，只需将它们与各个菜单项连接即可。您应该将父菜单项的类型设置为“弹出”，以便出现箭头：
就像上面的菜单栏一样，您不需要创建定位锚，因为在“原型”中运行时，子菜单会自动正确地放置在菜单项的侧面，尽管您可以使用锚来覆盖它想。
您可以创建的子级别的数量没有限制，因为一个级别仅连接并弹出下一个级别。但是，为了获得良好的设计，应将嵌套限制为不超过1或2个子级别。
请注意，如果您重新排列父菜单中的项目，它们将保持正确连接。如果需要，还可以将菜单项连接到任何其他元素。导航链接的类型将决定发生什么情况。如果您使用“模式选择弹出窗口”（即用于子菜单），则之前的菜单将保持打开状态，直到关闭链中的最后一个菜单。如果您使用“模式弹出窗口”（例如用于对话框）或任何其他类型，则菜单将立即关闭。
限制条件
在实际的应用程序中，单击鼠标**菜单系统后，将鼠标移到相关菜单项上时，下拉菜单和子菜单将自动显示。在GUI Design Studio原型中，您将需要单击鼠标按钮以使它们每次都出现。
9.19 使用选项卡式界面
设计选项卡式对话框和其他类型的动态用户界面（取决于您单击的内容）会在不同的窗口或面板之间切换是非常具有挑战性的。您需要创建每个选项卡式面板，但它们都占用设计上的相同空间。
幸运的是，GUI Design Studio具有一种处理这种情况的机制，可以直观地指示出实际情况。各个面板被添加到与选项卡式窗口相同的设计屏幕中。然后，每个选项卡都通过“替换窗口”导航链接连接到其关联的面板。
例子1
下面的简单示例说明了如何完成此操作。它是“标准组件”示例项目中“ Dialog_Tabbed.gui”设计的改编：
请注意，每个设计面板的大小都可以，只要适合对话框中可用的空间即可。当此设计作为原型运行时，与所选选项卡（在这种情况下为选项卡1）关联的面板将被**，单击选项卡将按预期在面板之间切换。
实际上，最好在其自己的设计文件中创建每个单独的选项卡面板设计，然后将它们作为“组件”添加到主对话框设计中。如果这样做，则在挂接选项卡后可能需要将默认的连接类型更改为“替换窗口”。一种快速的方法是使用Property Painter。
例子2
此示例显示了部分构造的Ribbon Bar界面设计：
功能区栏设计的方式与选项卡式对话框完全相同，功能区选项卡使用“替换窗口”导航连接到其各自的面板。运行原型时，设计的行为与选项卡式对话框完全一样，所选的选项卡面板会自动**，并且单击相应的选项卡后，每个面板都会切换到该对话框。
由于Ribbon Bar设计的性质，通常具有多个下拉面板和菜单，因此在其自己的设计文件中创建每个选项卡面板设计以作为组件引入时更加有意义。否则，主要设计（如上所示）将变得非常笨拙。
例子3
水平和垂直选项卡栏元素和功能区栏元素（如上面的示例1和2中所使用的）的特殊之处在于它们会自动正确切换选项卡并知道将面板放置在何处。下面的示例演示了使用任意元素创建选项卡式界面的设计：
在这种情况下，每个选项卡式面板都使用“替换窗口”（如前所述）连接到其关联的**按钮，但是还添加了一个窗口占位符（由虚线制成的框）并将其钩接到每个面板上。这不仅指定了面板的放置位置，而且还通过自动隐藏其他面板来确保仅**的面板可见。尽管这里的尺寸都相同，但与第一个示例一样，每个面板的尺寸可能不同。
此设计的局限性在于无法指定默认面板，因此在运行“原型”以显示其中一个面板时，必须首先单击按钮。
解决此问题的一种方法是在占位符顶部复制默认面板的内容。如果每个面板都被创建为单独的设计组件，则这特别容易。进行任何更改后，内容的两个副本将保持同步。但是，仅当所有面板都至少与默认面板一样大时，此技术才有效。否则，当您选择与较小面板相关联的按钮时，该面板将通过边缘显示。
9.20 创建树形网格
从版本4.6开始，GUI Design Studio允许您组合表和树元素的功能以形成树网格混合元素。请注意，这在某种程度上是一项实验性功能，将来可能会被单个专用的Tree Grid元素替换。
将树放置在表的顶部（在其范围内的任何位置）时，特殊处理将同步其垂直滚动位置，并使表行根据相应的树节点显示或隐藏。
例
在这里，您可以看到一个假设的Car Showroom应用程序的示例，其中Tree结构用于按制造商分组汽车：
结构体
在这里，您可以看到Tree是放置在Table顶部的单独元素：
Table元素必须包含用于容纳Tree的空白列和用于容纳Tree的制造商节点的空白行。您还可以在表的属性编辑器的“数据”选项卡中看到以下内容：
树选项
树必须放置在表格中的空白列上，并且大小必须适合。请注意，这可以是任何列-不必像本示例中那样是第一列。
可能需要调整许多Tree属性以使外观正确。
首先，您需要确保树的项目高度与表的最小行高度匹配。
您可能需要取消选中树的“具有边框”和“垂直”滚动条选项。
您可能要取消选中“水平滚动条”选项，并选中“树的根部有线条”和“透明背景”选项。
您将需要查看Tree的各种选择突出显示样式，以确保颜色与Table的颜色匹配，并且突出显示本身以您想要的方式工作。如果将表设置为仅突出显示树以外的列，则尤其如此。
这是上面示例的样式设置：
隐藏导航线
菜单命令：View | Navigation Connections Ctrl+Shift+F8
对于复杂的设计，当您要编辑基础屏幕设计时，可能会发现连接线受阻。
您可以通过取消选中“查看|导航连接”菜单选项来暂时隐藏所有连接。
此选项基于每个视图应用，并且不会在编辑会话之间保存。