了解 Microsoft PowerApps 中的数据表单布局Understand data-form layout in Microsoft PowerApps

在 PowerApps 中,可以轻松创建具有吸引力且高效使用的表单。In PowerApps, you can easily create forms that are attractive and efficient to use. 例如,假设记录销售订单的基本表单如下:For example, consider this basic form for recording sales orders:

示例销售订单

本教程中,我们将逐步介绍如何创建此表单。In this tutorial, we'll walk through the steps to create this form. 另外,我们还将介绍一些高级主题,如动态调整字段大小以填充可用空间。We'll also look at some advanced topics, such as dynamic sizing of fields to fill available space.

开始之前Before you start

如果你是初次接触 PowerApps(或者仅自动生成过应用),则在深入了解此主题前请从头开始生成一个应用If you're new to PowerApps (or have only generated apps automatically), you'll want to build an app from scratch before you dive into this topic. 通过从头开始生成一个应用,会让你熟悉本主题中提及但未加说明的必备概念,例如添加数据源和控件。By building an app from scratch, you'll become familiar with required concepts, such as adding data sources and controls, that are mentioned but not explained in this topic.

  1. 从头开始创建平板电脑应用。Create a tablet app from scratch.

    本主题中介绍的所有内容同样也适用于手机布局,不同之处在于,手机应用通常只有一个垂直列。Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. Common Data Service 中添加“销售订单”实体,作为应用的数据源。Add the Sales order entity in the Common Data Service as a data source for the app.

    在本教程之外,可以使用任意数据源,包括 SharePoint 列表和 Excel 表。Outside of this tutorial, you can use any data source, including SharePoint lists and Excel tables.

  3. 添加垂直的“库”控件,并将其 Items属性设置为 'Sales order'Add a vertical Gallery control, and set its Items property to 'Sales order'.

    (可选)若要与本教程中的示例一致,请将库的“布局”设置为仅显示“标题和副标题”。(optional) To match the examples in this tutorial, change the gallery's Layout to show only Title and subtitle.

    销售订单列表

  4. 在库中,单击或点击 SO004In the gallery, click or tap SO004.

    销售订单列表

    此记录将显示在你按照本主题后续步骤生成的表单中。This record will appear in the form that you build by following steps later in this topic.

添加标题栏Add a title bar

  1. 添加一个放置窗体的空白屏幕。Add a blank screen where you'll put the form.

    在本教程之外,可以将“库”和“编辑表单”控件放置在同一个屏幕上,但将其放在单独屏幕上时可使用的空间会更多。Outside of this tutorial, you can put the Gallery and Edit form controls on the same screen, but you'll have more room to work with if you put them on separate screens.

  2. 在新屏幕的顶部,添加一个标签控件,将其 Text 属性设置为此表达式:At the top of the new screen, add a Label control, and set its Text property to this expression:
    "Sales Order " & Gallery1.Selected.SalesOrderId"Sales Order " & Gallery1.Selected.SalesOrderId

    该标签将显示你在库中选择的记录的销售订单号。The label shows the sales-order number of the record that you selected in the gallery.

  3. (可选)将该标签的格式设置如下:(optional) Format the label as follows:

    1. 将其 Align 属性设置为 CenterSet its Align property to Center.

    2. 将其 Size 属性设置为 20Set its Size property to 20.

    3. 将其 Fill 属性设置为 NavySet its Fill property to Navy.

    4. 将其 Color 属性设置为 WhiteSet its Color property to White.

    5. 将其 Width 属性设置为 Parent.WidthSet its Width property to Parent.Width.

    6. 将其 XY 属性设置为 0Set its X and Y properties to 0.

      标题栏

添加表单Add a form

  1. 添加一个“编辑表单”控件,然后移动并调整控件大小,以使其填充标签下方的屏幕。Add an Edit form control, and then move and resize it to fill the screen under the label.

    在后续步骤中,通过使用右窗格(而非编辑栏)将窗体控件连接到“销售订单”数据源。In the next step, you'll connect the form control to the Sales order data source by using the right-hand pane, not the formula bar. 如果使用编辑栏,该窗体将默认不显示任何字段。If you use the formula bar, the form won't show any fields by default. 始终可以通过在右窗格中选择一个或多个复选框来显示所需的任意字段。You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  2. 在右侧窗格中,依次单击或点击“未选定数据源”旁边的向下箭头和“销售订单”。In the right-hand pane, click or tap the down arrow next to No data source selected, and then click or tap Sales order.

    “销售订单”数据源中的默认字段集将以简洁的三列布局显示。A default set of fields from the Sales order data source will appear in a simple, three-column layout. 但是许多为空,可能需要一些时间才能到达其最终位置。However, many are blank, and they may take a few moments to settle into their final positions.

  3. 将该窗体的 Item 属性设置为 Gallery1.SelectedSet the form's Item property to Gallery1.Selected.

    此窗体会显示你在库中所选的记录,但是默认的字段集可能与你在最终产品中所需的内容不一致。The form shows the record that you selected in the gallery, but the default set of fields might not match what you want in your final product.

  4. 在右窗格中,通过取消选中其复选框隐藏以下各个字段:In the right-hand pane, hide each of these fields by clearing its checkbox:

    • 销售订单 IDSales order ID
    • 帐户Account
    • 销售人员Sales person
    • 客户联系人Account contact
  5. 通过将“订单状态”字段拖到左侧,然后将其拖到“客户采购订单参考”字段的另一侧来移动它。Move the Order status field by dragging it to the left and then dropping it on the other side of the Customer purchase order reference field.

    屏幕应类似于下面的示例:Your screen should resemble this example:

    基本三列布局中的销售订单

选择一个数据卡Select a data card

显示的每个字段都在表单上有对应的数据卡。Each field displayed has a corresponding data card on the form. 此卡包含一组字段标题控件、一个输入框、一个星号(在字段为必填项时显示)和一个验证错误消息。This card comprises a set of controls for the field title, an input box, a star (which appears if the field is required), and a validation error message.

还可以直接在表单上选择数据卡。You can also select cards directly on the form. 在选中一个卡时,其上方将显示黑色标题。When a card is selected, a black caption appears above it.

选择数据卡

备注

若要删除卡片(而不仅仅是隐藏它),请选择卡片,再按“删除”。To delete a card (not just hide it), select it, and then press Delete.

排列列中的卡Arrange cards in columns

默认情况下,平板电脑应用中的表单包含 3 列,手机应用中的表单包含 1 列。By default, forms in tablet apps have three columns, and those in phone apps have one. 你不仅可以指定窗体包含的列数,还可以指定所有卡是否要适应列边框内部的大小。You can specify not only how many columns a form has but also whether all cards should fit within column borders.

在此图中,选中“对齐到列”复选框后,窗格中的列数从三列更改为四列。In this graphic, the number of columns in the form was changed from three to four with the Snap to columns check box selected. 窗体中的卡自动进行排列以适应新布局的大小。The cards in the form were arranged automatically to fit the new layout.

基本四列布局的销售订单

跨多个列调整卡大小Resize cards across multiple columns

根据各个卡中的数据,可能需要让某些卡适应单个列的大小,让其他卡跨越多个列。Depending on the data in each card, you might want some cards to fit in a single column and other cards to span multiple columns. 如果卡包含的数据多于想要在单个列中显示的内容,可以将卡选中,然后拖动其选择框左或右边框处的握柄来将卡加宽。If a card contains more data than you want to show in a single column, you can widen the card by selecting it and then dragging the grab handle on the left or right border of its selection box. 拖动握柄时,卡将“对齐”到列边界。As you drag the handle, the card will "snap" to column boundaries.

若要使设计更为灵活但保留某些结构,可以将列数增加到 12。To make your design more flexible but retain some structure, you can increase the number of columns to 12. 进行此更改后,可以轻松地将各个卡配置为跨越整个表单、半个表单、三分之一表单、四分之一表单、六分之一表单等。With that change, you can easily configure each card to span the entire form, half of the form, one-third, one-quarter, one-sixth, and so forth. 我们来看一下实际操作。Let's see this in action.

  1. 在右窗格中,将表单中的列数设置为 12In the right-hand pane, set the number of columns in the form to 12.

    指定列数

    表单没有发生明显变化,但是当拖动左或右握柄时对齐点会变多。The form doesn't visibly change, but you have more snap points as you drag the left or right grab handle.

  2. 通过将右侧对齐点上的握柄向右侧拖来增加“订单日期”数据卡的宽度。Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    该卡跨越了表单的 12 列中的四个(或表单的 1/3),而非仅跨越表单的 12 列中的三个(或表单的 1/4)。The card spans four of the form's 12 columns (or 1/3 of the form), instead of only three of the form's 12 columns (or 1/4 of the form). 当通过一个对齐点来增加卡的宽度时,卡将多跨越一个 1/12 的表单空间。Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    通过拖放操作重设数据卡大小

  3. 对“订单状态”和“客户采购订单参考”卡重复执行上述步骤。Repeat the previous step with the Order status and Customer purchase order reference cards.

    第一行中的三个卡

  4. 调整“名称”和“说明”卡的大小,使其占据表单的六列(或 1/2)。Resize the Name and Description cards to take up six columns (or 1/2) of the form.

  5. 让“交货地址”的前两行完全横跨整个表单:Make the first two lines of the delivery address stretch entirely across the form:

大功告成!All done. 我们已生成所需表单,让各行的列数不同:We have our desired form, mixing rows with different numbers of columns:

重设大小后的采用 12 列布局的销售订单

操纵卡中的控件Manipulate controls in a card

交货地址包含多条信息,建议将这些信息组合在一起,以方便用户查看。The delivery address comprises several pieces of information that we want to visually group together for the user. 虽然每个字段都留在自己的数据卡中,但我们可以在数据卡中控制控件,使它们更完美地组合在一起。Each field will remain in its own data card, but we can manipulate the controls within the card to make them fit better together.

  1. 选择“交货地址的第一行”卡,选择该卡内的标签,然后删除文本中的前三个字词。Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    重命名销售订单中的“交货地址第一行”标签

  2. 选择“交货地址的第二行”卡,选择该卡内的标签,然后删除其中的所有文本。Select the Second line of Delivery address card, select the label within that card, and then delete all of the text in it.

    很容易就会直接删除“标签”控件,尽管在很多情况下都可以这样做。It may be tempting to simply remove the label control and, in many cases, that will work fine. 但公式可能会依赖当前控件。But formulas might depend on that control being present. 更安全的方法是,删除文本或将此控件的 Visible 属性设置为 falseThe safer approach is to remove the text or to set the Visible property of the control to false.

    重命名销售订单中的“交货地址第二行”标签

  3. 在同一个卡中,将文本输入框移到标签之上,以减少第一行和第二行地址之间的空间。In the same card, move the text input box over the label to reduce the space between the first and second lines of the address.

    卡内容占据的空间减少后卡的高度将缩减。The height of the card shrinks when its contents take up less space.

    重命名销售订单中的“交货地址第二行”标签

现在,我们将重点处理第三行地址。Now let's turn our attention to the third line of the address. 与刚才的操作类似,我们将缩短这些数据卡中每个标签的文本,并将文本输入框排列到每个标签的右侧。Similar to what we just did, let's shorten the text of each label for these cards and arrange the Text input box to be to the right of each label. 下面介绍如何对“州/省/自治区/直辖市”数据卡执行这些操作:Here are the steps for the State card:

步骤Step 说明Description 结果Result
11 选中“州/省/自治区/直辖市”数据卡,以使其周围出现握柄。Select the State card so that grab handles appear around it. 选择卡
22 选中该卡中的标签,以使其周围出现握柄。Select the label within this card so that grab handles appear around it. 选择数据卡内的控件
33 将光标移到文本右侧,然后删除不需要的部分。Place the cursor to the right of the text, and then delete the portion that we don't need. 更改数据卡内的控件文本
44 使用两端的握柄,设定“标签”控件的大小,以适应新的文本大小。Using the grab handles on the sides, size the label control to fit the new text size. 重设数据卡内控件的大小
55 选择此数据卡中的“文本输入”控件。Select the text input control within this card. 选择数据卡中的其他控件
66 使用两侧的握柄,根据需要设定“文本输入”控件的大小。Using the grab handles on the sides, size the text input control to the size that you want. 重设数据卡内控件的大小
77 将文本输入框向上拖到“标签”控件的右侧,然后拖放该文本输入框。Drag the text input box up and to the right of the label control, and then drop the text input box. 移动数据卡内的控件
“州/省/自治区/直辖市”数据卡的修改现已完成。Our modifications to the State card are now complete. “州/省/自治区/直辖市”数据卡的修改已完成

生成的完整第三行地址如下所示:The result for the complete third address line:

销售订单中的第三行交货地址更加简洁

请注意,许多数据卡一开始就对属性使用了动态公式。Note that many of the cards start out with dynamic formulas for their properties. 例如,我们在上面移动并重新设定大小的“文本输入”控件就包含以父级宽度为依据的 Width 属性。For example, the Text input control that we resized and moved above had a Width property based on the width of its parent. 移动控件或重新设定其大小后,这些动态公式将被替换为静态值。When you move or resize a control, these dynamic formulas are replaced with static values. 如果需要,可以使用编辑栏还原动态公式。If you want, you can restore the dynamic formulas by using the formula bar.

禁用“对齐到列”Turning off Snap to columns

有时,可能需要进一步控制,而标准的 12 列无法实现这一点。Sometimes you'll want finer control than the standard 12 columns can provide. 在这种情况下,可以禁用“对齐到列”,然后手动设置数据卡的位置。For these cases, you can turn off Snap to columns and then position cards manually. 尽管表单将继续对齐 12 列,但也可以按住 Alt 键,根据需要手动调整数据卡的位置和大小。The form will continue snapping to 12 columns, but you can also hold down the Alt key to manually position and size a card as you wish.

在我们的示例中,构成第三行地址的四个组件的宽度完全相同。In our example, the four components that make up the third line of the address all have exactly the same width. 不过,这可能并不是最佳布局,因为城市名称长于州/省/自治区/直辖市缩写,并且“国家/地区”的文本输入框较短,这是由于其标签长度所致。But this may not be the best layout, as city names are longer than state abbreviations, and the Text input box for countries/regions is short due to the length of its label.

若要优化此空间,请在右窗格中禁用“对齐到列”,然后在设定这些卡大小和位置时按住 Alt 键。To optimize this space, turn off Snap to columns in the right-hand pane and then hold down the Alt key while sizing and positioning these cards. 按住 Alt 键后,所有控件均将显示黑色标题。Whenever you hold down the Alt key, all controls show black captions. 此行为被设计为显示控件名称。This behavior is by design to show you control names.

按住 ALT 键调整数据卡的大小和位置

仔细定位后,每个字段的大小适当,字段水平间距匀称:After careful positioning, the result has appropriate sizes for each field and even spacing horizontally between fields:

销售订单中精确定位后的第三行交货地址

综合而言,启用与禁用“对齐到列”后,行为上有哪些不同?In summary, what are the differences when Snap to columns is on versus off?

行为Behavior “贴靠列”已启用Snap to columns On “贴靠列”已禁用Snap to columns Off
重设大小后贴靠列数Resize snaps to 选择的列数:Number of columns you select:
1、2、3、4、6 或 121, 2, 3, 4, 6, or 12
12 列12 columns
可以重写重设大小后贴靠列数Resize snap can be overriden No 是,使用 Alt 键Yes, with Alt key
数据卡在各行间自动重新布局(稍后将对此进行详细介绍)Cards automatically re-layout between rows (more on this later) Yes No

设置宽度和高度Set width and height

与 PowerApps 中的所有内容一样,表单布局受数据卡控件属性约束。As with everything in PowerApps, the form's layout is governed by properties on the card controls. 如前面所述,可以通过将控件拖到不同的位置或拖动握柄来调整控件的大小,从而更改这些属性的值。As already described, you can change the values of these properties by dragging controls to different locations or dragging grab handles to resize controls. 不过,有时也会需要更精准地了解并控制这些属性,尤其是在使用公式生成动态表单时。But you'll discover situations in which you'll want to understand and manipulate these properties more precisely, especially when making your forms dynamic with formulas.

基本布局:X、Y 和 WidthBasic Layout: X, Y, and Width

XY 属性控制卡的位置。The X and Y properties control the position of cards. 处理原始画布上的控件时,这些属性生成的是绝对位置。When we work with controls on the raw canvas, these properties provide an absolute position. 在表单中,这些属性的含义就不同了:In a form, these properties have a different meaning:

  • X:行内顺序。X: Order within a row.
  • Y:行号。Y: Row number.

与画布上的控件类似,“Width”属性指定的是数据卡的最小宽度(很快将会对下限进行详细介绍)。Similar to controls on the canvas, the Width property specifies the minimum width of the card (more on the minimum aspect in a moment).

让我们来看看表单中数据卡的“X”、“Y”和“Width”属性:Let's take a look at the X, Y, and Width properties of the cards in our form:

销售订单表单 X 和 Y 坐标

溢出行Overflowing rows

如果某行上的数据卡过宽而无法适应此行,会怎么样?What happens if the cards on a row are too wide to fit on that row? 通常情况下,不必担心这种可能性。Normally you don't need to worry about this possibility. 如果已启用“对齐到列”,这三个属性会自动进行调整,以便所有内容都能很好地适应行,而不会溢出。With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

不过,如果已禁用“对齐到列”或公式中的 Width 以一张或多张数据卡为依据,则可能会发生行溢出。But with Snap to columns turned off or a formula-based Width on one or more of your cards, overflowing a row can happen. 在这种情况下,数据卡会自动换行,以便有效地创建其他行。In this case, the cards will automatically wrap so that, effectively, another row is created. 例如,我们会将“客户采购订单参考”数据卡(第一行中的第三项)的 Width 属性手动更改为 500For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 500:

手动重设数据卡大小后重排到新行中

最上面一行中的三张数据卡不再适应水平空间,并且创建了其他行,以将溢出内容自动换行。The three cards on the top row no longer fit horizontally, and another row has been created to wrap the overflow. 所有这些数据卡的 Y 坐标仍保持 0 不变,而“名称”和“说明”数据卡的 Y 坐标也仍为 1。The Y coordinate for all these cards is still the same at 0, and the Name and Description cards still have a Y of 1. 具有不同 Y 值的卡不会跨行合并。Cards that have different Y values aren't merged across rows.

可以使用此行为创建完全动态的布局,即数据卡根据 Z 顺序进行排列,尽可能填充所在行,然后再移到下一行。You can use this behavior to create a fully dynamic layout, where cards are placed based on a Z-order, filling across as much as possible before moving to the next row. 若要达到此效果,请为所有数据卡设置相同的 Y 值,再使用 X 表示数据卡的顺序。To achieve this effect, give all the cards the same Y value, and use X for the order of the cards.

填充空间:WidthFitFilling spaces: WidthFit

上一示例中的溢出导致第一行中第二张“订单状态”数据卡后面有空间。The overflow in the last example created a space after the Order status card, which was the second card in the first row. 为了填充此空间,我们可以手动调整两张剩余数据卡的 Width 属性,但此方法会很麻烦。We could manually adjust the Width properties of the two remaining cards to fill this space, but this approach is tedious.

作为备选方法,可以使用“WidthFit”属性。As an alternative, use the WidthFit property. 如果某行中的一张或多张数据卡将此属性设置为 true,则此行上的任何剩余空间都会被数据卡均分。If this property is set to true for one or more cards in a row, any remaining space on the row will be evenly divided between them. 正因为此行为,我们在前面提到,数据卡的 Width 属性为最小宽度,而实际显示的宽度可能会更大。This behavior is why we said earlier that the Width property of a card is a minimum, and what is actually seen can be wider. 此属性不会使卡片缩,只会使其扩大。This property will never cause a card to shrink, only expand.

如果将“订单状态”卡上的 WidthFit 设置为 true,其将填充可用空间,而第一张卡将保持不变:If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

第二张数据卡的“WidthFit”属性设置为“True”

如果我们也将“订单日期”卡上的 WidthFit 设置为 true,那么这两张数据卡将均分可用空间:If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

第一张和第二张数据卡的“WidthFit”属性都设置为“True”

请注意,这些数据卡的握柄将“WidthFit”带来的额外宽度考虑在内,而不考虑“Width”属性规定的最小宽度。Note that grab handles on these cards take into account the extra width provided by WidthFit, not the minimum width provided by the Width property. 如果已启用“WidthFit”,那么控制“Width”属性可能会引起混淆;建议禁用“WidthFit”,更改“Width”属性,再重新启用“WidthFit”。It can be confusing to manipulate the Width property while WidthFit is turned on; you may want to turn it off, make changes to Width, and then turn it back on.

“WidthFit”何时有用?When might WidthFit be useful? 如果某字段只在特定情况下才使用,则可以将它的 Visible 属性设置为 false,这样此行上的其他数据卡便会自动填充它周围的空间。If you have a field that is used only in certain situations, you can set its Visible property to false, and the other cards on the row will automatically fill the space around it. 建议使用公式,以便仅在另一个字段包含特定值时显示字段。You might want to use a formula that shows a field only when another field has a particular value.

此时,我们将“订单状态”字段的 Visible 属性设置为静态 falseHere, we'll set the Visible property of the Order status field to a static false:

第一张数据卡的“WidthFit”设置为“True”,同时“订单状态”不可见

在有效删除第二张数据卡的情况下,第三张数据卡现在可以恢复与第一张数据卡位于同一行。With the second card effectively removed, the third card can now return to the same row as the first card. 第一张数据卡仍将 WidthFit 设置为 true,因此,只有它会扩展宽度来填充可用空间。The first card still has WidthFit set to true, so it alone expands to fill the available space.

由于“订单状态”不可见,因此,不能像在画布上一样轻松选择它。Because Order status is invisible, you can't select it as easily on the canvas. 但是,可以在屏幕左侧的控件层次列表中选择任何可见或不可见的控件。However, you can select any control, visible or not, in the hierarchical list of controls on the left side of the screen.

HeightHeight

“Height”属性约束每张数据卡的高度。The Height property governs the height of each card. 对于 Height,数据卡也有等同于 WidthFit 的属性,并且始终设置为 trueCards have the equivalent of WidthFit for Height, and it's always set to true. 假定存在 HeightFit 属性,但是请勿在产品中寻找它,因为尚未发布此类属性。Imagine that a HeightFit property exists, but don't look for it in the product because such a property isn't yet exposed.

因为无法禁用此行为,所以更改数据卡的高度可能比较棘手。You can't turn off this behavior, so changing the heights of cards can be challenging. 行中的所有数据卡都与最高数据卡等高。All cards within a row appear to be the same height as the tallest card. 看到的行可能会如下所示:You might look at a row like this:

第一张数据卡的“WidthFit”设置为“True”,同时“订单状态”不可见

哪张数据卡决定了行高?Which card is making the row tall? 在上图中,虽然选择了显得很高的“总金额”数据卡,但它的 Height 属性值为 80(与第一行的高度相同)。In the previous graphic, the Total amount card is selected and appears tall, but its Height property is set to 80 (same as the height of the first row). 若要缩减行高,必须缩减该行中高度最大的卡的 Height 属性,并且只有查看每个卡片的 Height 属性才能识别出高度最大的卡。To reduce the height of a row, you must reduce the Height of the tallest card in that row, and you can't identify the tallest card without reviewing the Height property of each card.

AutoHeightAutoHeight

如果卡包含的控件将 AutoHeight 属性设置为 true,则该卡也可能高于你所需的高度。A card might also be taller than you expect if it contains a control for which the AutoHeight property is set to true. 例如,许多卡都包含一个标签,以便在字段值导致验证问题时显示错误消息。For example, many cards contain a label that displays an error message if the field's value causes a validation problem.

如果没有任何文本要显示(无错误),那么此标签的高度将折叠为零。Without any text to display (no error), the label collapses to zero height. 如果对此不甚了解,就不会知道此类标签的存在,而此类标签应该如下所示:If you didn't know any better, you wouldn't know it was there, and that's as it should be:

数据卡中有控件将“AutoHeight”设置为“true”,但未显示高度

在屏幕左侧,控件列表显示 ErrorMessage1,这就是我们的“标签”控件。On the left side of the screen, the list of controls shows ErrorMessage1, which is our label control. 更新应用时,可以选择此控件,指定其高度并显示握柄来通过它们设置控件的位置和大小。As you update an app, you can select this control to give it some height and show grab handles with which you can position and size the control. 蓝色框中的“A”指明控件已将 AutoHeight 设置为 trueThe "A" in a blue box indicates that the control has AutoHeight set to true:

在创作时,已设置“AutoHeight”的控件会呈现一定高度,以便于执行拖放操作

此控件的 Text 属性设置为 Parent.Error,用于获取基于验证规则的动态错误消息。The Text property of this control is set to Parent.Error, which is used to obtain dynamic error information based on validation rules. 为了便于说明,我们将以静态方式设置此控件的 Text 属性,这会令其变高(进而令数据卡变高)来适应文本长度:For illustration purposes, let's statically set the Text property of this control, which will increase its height (and, by extension, the height of the card) to accommodate the length of the text:

若有错误消息,此控件和数据卡会自动变高

我们将加长一点错误消息,此控件和数据卡会再次变高以适应文本长度。Let's make the error message a little longer, and again the control and the card grow to accommodate. 请注意,行整体变高,但仍保留数据卡之间的垂直对齐方式:Note that the row overall grows in height, retaining vertical alignment between the cards:

如果错误消息较长,此控件和数据卡也会再变高一点(请注意,同一行上的所有数据卡会一起变高)