了解 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 屬性設定為 '銷售單'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:

    • 銷售單識別碼Sales 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.

資料卡選取範圍

注意:若要刪除卡片 (而不只是隱藏),請選取卡片,然後按 Delete 鍵。Note: To delete a card (not just hide it), select it, and then press Delete.

排列資料行中的卡片Arrange cards in columns

根據預設,平板應用程式中的表單有三個資料行,而電話應用程式中的表單有一個資料行。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.

在此圖中,表單中的資料行數目已從 3 變更為 4,並已選取貼齊至資料行核取方塊。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 和寬度Basic 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).

讓我們看看表單中卡片的 XYWidth 屬性: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 值,並且對卡片的順序使用 XTo 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 屬性會造成混淆,建議您將其關閉,對 Width 進行變更,然後再重新開啟。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 屬性設定為 trueA 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:

使用更長的錯誤訊息,控制項和卡片會進一步成長,並請注意,同一個資料列上的卡片會一起成長