5.1 移动和调整大小
选择一个或多个元素后，您可以移动或调整它们的大小。拖动任何选定元素（无论是选定的主要元素还是次要元素）上的任何方形手柄，都会在考虑到“固定宽度”或“固定高度”限制的情况下，将所有元素的大小一起调整。
在选定元素上的其他任何地方拖动都将移动所有选定元素，包括放置在其顶部的所有子元素。如果要移动元素而不移动其子元素，则在开始拖动时按住Shift键。
上面显示的元素没有大小限制。下面的两个元素显示了如果元素分别具有“固定宽度”或“固定高度”时可用的调整大小手柄：
如果元素既不是固定宽度也不是固定高度，则可以将其设置为具有固定长宽比。在这种情况下，仅显示拐角手柄，并且调整元素的大小可保持宽高比：
如果元素既是“固定宽度”又是“固定高度”，则根本无法使用鼠标调整其大小。因为这将导致没有调整大小的句柄，并因此使选择状态变得很难看清，所以它以较粗的选择边框显示，如下所示：
您可以通过公共的Position属性更改元素的“固定宽度”或“固定高度”限制。您也可以通过“位置属性”对话框更改元素的位置和大小，而无需考虑以下设置：
5.2 边缘贴合
菜单命令：布局|对齐边缘
工具栏按钮：
GUI Design Studio集成了独特的Magnetic Edges?系统，可通过磁性效果自动对齐元素，从而将其卡入到位。这与传统的网格捕捉类似，不同之处在于捕捉不限于规则的网格，并且边缘本身可以动态且高度专业化。
提示：可以使用“布局|对齐边缘”菜单命令或相关的工具栏按钮来打开和关闭边缘捕捉。您还可以在移动和调整元素大小时按住Ctrl键来暂时撤消此设置。这使您可以在大多数情况下使其保持打开状态，并且在需要进行微调时不使用捕捉效果而仅使用Ctrl键。您也可以使用光标键来重新定位元素，因为它们会忽略边缘捕捉规则。
大多数元素在其边界框周围都有咬合边缘，因此它们彼此相邻而没有间隙。某些元素（例如Windows和Frames）具有内部边缘，因此其他元素可以整齐地放入其中。
菜单和工具栏元素具有专门的边缘，这些边缘设计为彼此重叠，使构建应用程序窗口变得容易。在以200％缩放比例显示的下图中，您可以看到菜单栏元素已在Application Frame窗口内移到适当位置（为清楚起见，已取消选择菜单栏）：
当菜单栏接近框架边缘时，它会卡入到位。请注意，它如何与“框架窗口”的内部边框重叠以创建新的内部边框。
所有的工具栏和控制栏都以相同的方式工作，并且经过精心设计，可以使用可选的边缘样式相互构建。
提示：在框架周围放置控制条时，可能需要调整元素的前后顺序才能使边框看起来正确。垂直侧栏通常应出现在水平菜单栏，按钮工具栏和状态栏的前面。
注意：选择多个元素时，边缘捕捉仅考虑“主要选定元素”。
5.3 对齐元素
菜单命令：
Layout | Align | Left Ctrl+Left Arrow
Layout | Align | Right Ctrl+Right Arrow
Layout | Align | Top Ctrl+Up Arrow
Layout | Align | Bottom Ctrl+Down Arrow
Layout | Align | Horizontal Centre Ctrl+6
Layout | Align | Vertical Centre Ctrl+5
Layout | Align | Centres Ctrl+4
Layout | Align | Left to Right Edges
Layout | Align | Top to Bottom Edges
Layout | Group Align | Left Ctrl+Shift+Left Arrow
Layout | Group Align | Right Ctrl+Shift+Right Arrow
Layout | Group Align | Top Ctrl+Shift+Up Arrow
Layout | Group Align | Bottom Ctrl+Shift+Down Arrow
Layout | Group Align | Horizontal Centre Ctrl+Shift+6
Layout | Group Align | Vertical Centre Ctrl+Shift+5
Layout | Group Align | Centres Ctrl+Shift+4
Layout | Group Align | Left to Right Edges
Layout | Group Align | Top to Bottom Edges
工具栏按钮：
这些命令移动所有“次要选定元素”，以使其选定的边缘或中心与保留其位置的“主要选定元素”的边缘或中心对齐。
将“从左到右边缘”（或“从上到下边缘”）对齐具有移动次要选定元素的效果，以使它们在最接近的一侧与主要选定元素结合在一起。如果主节点在两个辅助节点之间，那么它们最终将在每一侧卡住一个。从组成部分构造复杂控件时，此功能非常有用，尽管使用鼠标移动元素并依靠边缘贴紧通常很容易。
示例1-左对齐
应用之前：
应用左对齐操作（Ctrl +左箭头或“布局|对齐|左”菜单命令）后：
现在，所有选定元素的左边缘都对齐。
示例2-组左对齐
应用之前：
应用“组左对齐”操作（Ctrl + Shift +左箭头或“布局|组左对齐”菜单命令）后：
次要选择项被视为一个统一的组，并与主要选择元素的左边缘对齐，同时保持它们的空间关系。请注意，在此操作期间，您根本不需要对元素进行实际分组和取消分组。
5.4 使元素大小相同
菜单命令：
Layout | Make Same Size | Width Ctrl+9
Layout | Make Same Size | Height Ctrl+0
Layout | Make Same Size | Both
Layout | Make Same Size | Span Width
Layout | Make Same Size | Span Height
工具栏按钮：
“宽度”（Width），“高度”（Height）和“两者”（Both）命令调整所有辅助选定元素的大小，以匹配保留其大小的主要选定元素的宽度和/或高度。
“跨度宽度”（Span Width）和“跨度高度”（Span Height）命令仅调整主要选定元素的大小，以使其宽度或高度与所有次要选定元素的范围匹配。 这对于在对话框中对齐组框或列表框等非常有用，例如：
应用之前：
使用“跨度”命令后：
5.5 元素间隔均匀
菜单命令：
Layout | Space Evenly | Horizontally Ctrl+7
Layout | Space Evenly | Vertically Ctrl+8
工具栏按钮：
这些命令移动选定的元素，以便它们之间的间距完全相同。这是通过尝试将外部元素固定在适当位置，同时在其他元素之间重新分配可用空间来实现的。
对于水平空间调整，最左边的元素始终保持固定。为了保持均匀的间距，可以稍微调整最右边的元素。
对于垂直空间调整，最上面的元素始终保持固定，最下面的元素可能会稍作调整。
必须至少选择3个元素才能使用这些命令。
例
这是一些元素间距不均匀的示例：
应用均匀的水平间距后，它们看起来像这样：
然后，在应用了均匀的垂直间距之后，它们看起来像这样：
5.6 更改前后顺序
菜单命令：
Layout | Layer | Send to Back
Layout | Layer | Bring to Front
Layout | Layer | Back One
Layout | Layer | Forward One
Layout | Layer | Send to Back of All
工具栏按钮：
设计上的元素以特定顺序出现。将新元素放置到设计上时，会将其放置在所有其他元素的上方（前面），从而遮盖了下面的所有内容。
有时，您需要能够更改元素的顺序。例如，如果创建了一个对话框，然后决定使用“设计网格”来改善边距和布局，则需要将网格推到对话框的后面，否则将无法获得控制元素已经放置。
当一个元素放置在另一个元素的顶部，使其完全被该元素包围时，它将成为该元素的子元素。当用鼠标移动父元素时，子元素会粘在其父元素上。这些分层命令可能会导致元素的父/子关系发生变化。
“Send to Back”命令重新排列所选元素的顺序，使其位于其所有同级元素的后面，从而使其成为其父级的第一个子级。
使用“Send to Back of All”，该元素将最终位于所有其他元素之后。这将导致它丢失并被它的任何父母遮挡。此命令通常仅用于顶层重叠的元素。
注意：这些命令一次只能对单个选定元素进行操作。您可能需要多次使用命令才能使视觉上有所不同，具体取决于当时元素的顺序。
5.7 使用设计网格
设计网格是一种特殊类型的元素，旨在帮助其他元素进行布局和定位。通常在设计模式下使用细线显示它们，当在“原型”中运行时它们将不可见，但是如果需要，可以选择将这些线和网格单元作为设计的一部分可见。
启用边缘捕捉后，元素将捕捉到网格线，从而简化了布局。
设计网格在各种情况下都很有用，但通常用于对话框布局。这是添加到对话框的基本设计网格的示例：
线条非常模糊，但您应该能够在对话框周围看到装订线的边距（称为“外部边距”），在右侧的另一边距（被称为“内部边距”）专用于按钮。指定内部边距会自动为主要控制元素添加内部间距。
下面的示例显示了另一种网格布局，其底部具有内部按钮边距：
选择了基本布局后，可以将“设计网格”的内部“工作区域”设置为具有指定数量的行和列，或者基于绝对间距指定行和列的数量。下面的示例显示了如何使用具有规则的21像素高行的4列网格来创建整洁且一致的对话框布局。甚至按钮都与网格对齐：
由于Magnetic Edges和“设计网格”的工作方式，水平和垂直网格线延伸到网格元素的边缘，横跨内部和外部边界。对于具有许多行和列的网格，这可能会变得很尴尬。当然，您可以将网格放置在网格内。下面的示例显示了这一点。内部网格每7个像素就有一条水平线和垂直线，它们之间没有间距，也没有边距。这模拟了传统的网格捕捉方案：
最后一个示例显示了如果打开单元格边框并为其填充颜色，会发生什么情况。这是与第一个示例相同的基本网格，但具有多个列和行：
尽管此处的所有示例都集中在对话框上，但是“设计网格”可以在任何元素之上用于多种目的。
5.8 分组元素
菜单命令：
Layout | Group Elements Ctrl+G
Layout | Ungroup Elements Ctrl+Shift+G
如果您需要将元素集合视为一个单元，则可以将它们组合在一起。仍可以单独选择元素以更改其属性或调整其大小，但是它们将移动并表现为对齐，等间距和其他操作的单位。
向组添加元素
您可以将任意数量的元素添加到现有组中，如下所示：
1.选择要添加的元素。使用Ctrl +单击以选择多个元素。
2.另外，选择组中已经存在的一个或多个元素。
3.使用“Group Elements”命令（Ctrl + G）。
注意：如果您从多个现有组中选择多个元素，则“Group Elements”命令将不可用。要合并组，您将需要先取消分组，然后再重新分组。
取消分组元素
尽管可以调整组中元素的大小，但是如果需要在组中重新放置元素，则需要先将其从组中删除：
1.选择要从组中删除的元素。
2.使用取消分组元素命令（Ctrl + Shift + G）。
如果您要处理一组复杂的元素，通常更容易使用框选选择所有分组的元素，取消分组，重新排列元素，然后选择所有元素并将它们重新组合在一起。
示例：自定义“气球”元素
分组在许多情况下很有用，但特别是在创建复合的自定义控件元素时。以下是“气球”元素的示例（在撰写本文时）不作为本机元素存在：
它是由3个相互独立的Shape元素构成的，它们相互层叠：
第二个三角形层与背景层重叠，以重塑外部边界的形状。可以根据需要独立调整大小和位置。顶层位于背景层内部，并隐藏三角形的后边框。
完成后，此自定义元素需要充当定位单元。选择并移动（拖放）顶层需要移动整个单元。这就是分组的来源。
将元素分组后，选择组中的任何元素将显示组边界：
请注意，三角形“指针”可以在任意一侧调整大小以更改其形状或调整其位置：
通过多次选择组中的其他2个元素，可以在保持组结构的同时调整气球形状的大小：
5.9 在调整大小时保持布局
菜单命令：
View | Resize Anchors Shift+F8
在编辑器中调整元素大小时，可以通过在元素上设置“调整大小锚点”来控制其中元素的自动重新放置和调整大小：
可以使用“查看|调整锚点大小”菜单命令或Shift + F8热键打开和关闭编辑器中的“棒棒糖”视觉效果。隐藏后，仍然可以从元素属性编辑器的“位置”选项卡中访问它们。
顶部，左侧，底部和右侧锚点可以分别设置为“关闭”，“固定”或“比例”，如下所示：
Off-如果所有锚点都关闭，则默认为左上锚点
Fixed-与父边缘保持固定距离
Proportional-与父边缘保持比例距离
单击该图标将循环浏览锚的设置。
注意1：当选择多个元素时，视觉效果仅显示在主要选定元素上，以避免视觉混乱，但更改将应用于所有选定元素。
注2：这是目前仅设计时提供的功能，可帮助您进行布局。运行原型时，无法调整元素的大小。
示例1：可调整大小对话框
这是一个典型的示例，直接来自Windows库（v1.2），您希望在其中调整对话框大小时保持控件的布局：
在这里，设计网格的所有侧面都设置了固定锚，以便将其锁定到对话框的内部边缘。 “确定”和“取消”按钮的底部和右侧具有固定锚点，以将其锁定在右下角。
调整对话框大小后，将保留布局：
示例2：列（和/或行）的比例锚
当您要维护元素的列或行时，比例锚点很有用。外部锚可以设置为“固定”或“比例”。内部锚点应全部设置为“比例”：
仅在第一个子元素的内部按比例锚点
两侧均等比例锚固内部元件
仅在最后一个子元素的内部按比例锚定
现在可以调整容器元素的大小，内部元素都将按比例调整，同时保持固定边距：
切记，与包含元素成比例且独立移动的是边缘。元素之间的关系（即间隙）未得到维护。有时，这种方法不能很好地工作，例如在缩小包含元素时：
在这种情况下，固定边距导致外部元素比内部元素收缩更多。如果不需要固定边距，则在所有侧面上使用比例锚（而不是在外部使用固定锚）将产生更好的结果：