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.

    このトピックで説明するすべての内容は電話レイアウトにも適用されますが、電話アプリでは多くの場合、垂直列が 1 つだけです。Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. アプリのデータ ソースとして Common Data ServiceSales order エンティティを追加します。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. ギャラリーで、SO004 をクリックまたはタップします。In 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 プロパティを Center に設定します。Set its Align property to Center.
    2. その Size プロパティを 20 に設定します。Set its Size property to 20.
    3. その Fill プロパティを Navy に設定します。Set its Fill property to Navy.
    4. その Color プロパティを White に設定します。Set its Color property to White.
    5. その Width プロパティを Parent.Width に設定します。Set its Width property to Parent.Width.
    6. その X および Y プロパティを 0 に設定します。Set 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.

    次の手順では、数式バーではなく右側のウィンドウを使用して、フォーム コントロールを Sales order データ ソースに接続します。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. 右側のウィンドウで 1 つ以上のチェック ボックスをオンにすると、いつでも好きなフィールドを表示できます。You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  2. 右側のウィンドウで、[データ ソースが選択されていません] の隣にある下矢印をクリックまたはタップした後、Sales order をクリックまたはタップします。In the right-hand pane, click or tap the down arrow next to No data source selected, and then click or tap Sales order.

    Sales order データ ソースのフィールドの既定セットは、シンプルな 3 列のレイアウトで表示されます。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.Selected に設定します。Set 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 (販売注文 ID)Sales order ID
    • Account (アカウント)Account
    • Sales person (販売担当者)Sales person
    • Account contact (アカウントの連絡先)Account contact
  5. Order status (注文のステータス) フィールドを左側にドラッグして移動し、Customer purchase order reference (お客様発注リファレンス) フィールドのもう一方にドロップします。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:

    基本的な 3 列のレイアウトの販売注文

データのカードを選択する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.


: カードを非表示にするだけでなく削除する場合は、選択して [削除] をクリックします。Note: 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.

この図では、[列へのスナップ] チェック ボックスをオンにして、フォーム内の列の数を 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.

基本的な 4 列のレイアウトの販売注文

複数の列の間でカードのサイズを変更するResize cards across multiple columns

各カード内のデータによっては、一部のカードを 1 つの列の内側に収め、他のカードを複数の列に広がるようにしたい場合があるかもしれません。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. 1 つの列に表示するデータよりも多くのデータをカードに含めたい場合は、カードを選択してカードの選択ボックスの左側または右側の境界線上に表示されるハンドルをドラッグすると、カードの幅を広げることができます。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. この変更を利用すると、フォームの全体、フォームの半分、3 分の 1、4 分の 1、6 分の 1 という具合に、各カードが広がる範囲を構成できます。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. 右側のウィンドウで、フォームの列の数を 12 に設定します。In 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. Order date (受注日) カードは、右側のスナップ ポイントのハンドルを右方向にドラッグして、幅を広げます。Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    フォームの 12 列のうち 3 列 (フォームの 1/4) ではなく、4 列 (フォームの 1/3) にカードが広がるようにします。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 つのスナップ ポイントでカードの幅を広げると、必ずフォームの 1/12 だけ幅が広がります。Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    ドラッグ アンド ドロップでカードのサイズを変更する

  3. Order status カードと Customer purchase order reference カードを使用して、上述の手順を繰り返します。Repeat the previous step with the Order status and Customer purchase order reference cards.

    最初の行に 3 つのカード

  4. Name (名前) カードと Description (説明) カードの幅を広げて 6 列 (フォームの 1/2) にします。Resize the Name and Description cards to take up six columns (or 1/2) of the form.
  5. Delivery address (配送先住所) の最初の 2 行の幅を、フォームの全体に広がるように広げます。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. First line of Delivery address (配送先住所の 1 行目) カードを選択し、カード内のラベルを選択して、テキストの最初の 3 語を削除します。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. Second line of Delivery address (配送先住所の 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 プロパティを false に設定することです。The safer approach is to remove the text or to set the Visible property of the control to false.

    2 番目の行のラベルの名前を変更した販売注文の配送先住所

  3. 同じカード内で、テキスト入力ボックスをラベルに重ねるように移動し、住所の最初の行と 2 番目の行の間のスペースを減らします。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.

    2 番目の行のラベルの名前を変更した販売注文の配送先住所

住所の 3 番目の行に注目してみましょう。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. State (状態) カードの手順を次に示します。Here are the steps for the State card:

ステップStep 説明Description 結果Result
11 State カードを選択して、周囲にハンドルを表示させます。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. カード内のコントロールを移動する
State カードの変更が完了しました。Our modifications to the State card are now complete. カードの変更の完了

完了した 3 番目の住所行の結果:The result for the complete third address line:

より簡潔な 3 行目を含む販売注文の配送先住所

多くのカードには最初にプロパティの動的な数式が含まれています。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.

この例では、住所の 3 番目の行を形成する 4 つのコンポーネントが正確に同じ幅になっています。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:

正確に配置された販売注文の配送先住所の 3 行目

[列へのスナップ] がオンの場合とオフの場合の違いをまとめます。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

X プロパティと Y プロパティでカードの位置を制御します。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).

フォーム内のカードの XY、および 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. [列へのスナップ] をオンにすると、これらの 3 つのプロパティが自動的に調整され、オーバーフローなしで行内にすべてが適切に収まるように配置されます。With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

しかし、[列へのスナップ] をオフにするか、数式ベースの Width が 1 つ以上のカードに指定されている場合、行のオーバーフローが発生することがあります。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. たとえば、Customer purchase order reference カード (最初の行、3 番目の項目) の Width プロパティを 500 に手動で変更してみましょう。For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 500:


一番上の行の 3 つのカードが水平方向に収まらなくなり、オーバーフローを折り返すために別の行が作成されています。The three cards on the top row no longer fit horizontally, and another row has been created to wrap the overflow. これらのすべてのカードの Y 座標は同じ 0 のままであり、NameDescription カードの 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

最後の例のオーバーフローによって、最初の行の 2 番目のカードである Order status カードの後に、スペースが作成されます。The overflow in the last example created a space after the Order status card, which was the second card in the first row. 残る 2 つのカードの 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. 1 行に配置されている 1 つ以上のカードでこのプロパティが 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.

Order status カードの WidthFittrue に設定すると、使用可能なスペースにカードが収まり、最初のカードは変更されずに残ります。If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

2 番目のカードの WidthFit が true に設定されている

Order date カードの WidthFittrue に設定すると、使用可能なスペースを両方のカードで均等に分割します。If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

最初のカードと 2 番目のカードの WidthFit が true にされている

これらのカードのグラブ ハンドルは、Width プロパティによって提供される最小幅ではなく、WidthFit によって提供される追加の幅を考慮します。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.

ここでは、Order status フィールドの Visible プロパティを静的な false に設定します。Here, we'll set the Visible property of the Order status field to a static false:

注文ステータスが非表示で最初のカードで WidthFit が true に設定されている

2 番目のカードが実際に削除されると、3 番目のカードが最初のカードと同じ行に戻ることができます。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.

Order status は非表示になっているため、キャンバス上で選択するのは簡単ではありません。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.


Height プロパティはそれぞれのカードの高さを制御します。The Height property governs the height of each card. カードには Height についても WidthFit に相当するものがありますが、それは常に true に設定されています。Cards 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. 1 行内のすべてのカードが、最も高さのあるカードと同じ高さになって表示されます。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? 前の図で、Total amount カードが選択され、高さが高く表示されていますが、その 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.


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" は、コントロールの AutoHeighttrue に設定されていることを示しています。The "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:

長いエラー メッセージを表示すると、コントロールとカードがさらに拡大され、同じ行のすべてのカードが一緒に拡大されることに注意してください。