Общие сведения о макетах форм данных в Microsoft PowerAppsUnderstand 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:

Пример Sales order

В этом руководстве мы подробно изучим ее создание.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. Добавьте сущность Sales order в службу 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.

    Список Sales order

  4. В коллекции выберите SO004.In the gallery, click or tap SO004.

    Список Sales order

    Эта запись будет отображаться в форме, которую мы создадим позже в соответствии с инструкциями в этой статье.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. Всегда можно настроить отображение требуемых полей, установив один или несколько флажков на панели справа.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.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 IDSales order ID
    • AccountAccount
    • Sales personSales person
    • Account contactAccount 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:

    Простой макет с тремя столбцами для "Sales order"

Выбор карточки данных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

По умолчанию формы в планшетных приложениях состоят из трех столбцов, а в приложениях для телефонов — из одного.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.

Простой макет с четырьмя столбцами для "Sales order"

Изменение размера карточек в нескольких столбцах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. На панели справа задайте для числа столбцов в форме значение 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.

    Карточка займет 4 из 12 столбцов формы (или 1/3 формы), вместо 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. Повторите предыдущий шаг с карточками Order status и Customer purchase order reference.Repeat the previous step with the Order status and Customer purchase order reference cards.

    Три карточки в первой строке

  4. Измените размер карточек Name и Description так, чтобы они занимали шесть столбцов (или 1/2) формы.Resize the Name and Description cards to take up six columns (or 1/2) of the form.

  5. Растяните карточку "First line of the Delivery address" на всю ширину формы.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 столбцами измененного размера для Sales order

Управление элементами управления в карточке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, выберите метку для этой карточки и удалите из текста первые три слова.Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    Переименование метки первой строки адреса доставки для Sales order

  2. Выберите карточку Second line of Delivery address, выберите метку для этой карточки и удалите в ней весь текст.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.

    Переименование метки второй строки адреса доставки для Sales order

  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.

    Переименование метки второй строки адреса доставки для Sales order

Теперь перейдем к третьей строке адреса.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 of Delivery address.Here are the steps for the State card:

ШагStep ОписаниеDescription Возвращаемый результатResult
11 Выберите карточку State of Delivery address, чтобы на ее краях появились маркеры захвата.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 of Delivery address.Our modifications to the State card are now complete. Изменение карточки завершено

Пример заполненной третьей строки адреса показан ниже.The result for the complete third address line:

Адрес доставки с сокращенной третьей строкой для Sales order

Обратите внимание на то, что многие карточки начинаются с динамических формул, указанных для их свойств.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:

Точно размещенная третья строка адреса доставки для Sales order

Так в чем состоит разница между включением и отключением функции Прикрепление к столбцам?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 или 12.1, 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).

Давайте рассмотрим свойства X, Y и Width карточек в нашей форме.Let's take a look at the X, Y, and Width properties of the cards in our form:

Координаты X и Y формы Sales order

Переполнение строк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 карточки Customer purchase order reference (первая строка, третий элемент) на 500.For 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 карточек Name и Description по-прежнему равна 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

Из-за переполнения в последнем примере после карточки 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. Можно было бы вручную настроить свойства 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.

Если в карточке Order status мы зададим для 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 в карточке Order date, обе карточки равномерно займут свободное пространство.If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

Значение True задано для свойства WidthFit первой и второй карточек

Обратите внимание, что маркеры на этих карточках соответствуют дополнительной ширине, полученной благодаря свойству 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. Можно запутаться, управляя свойством 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 поля Order status задается статическое значение false.Here, we'll set the Visible property of the Order status field to a static false:

Для свойства WidthFit первой карточки задано значение true, а поле "Order status" скрыто

После удаления второй карточки третья карточка может вернуться в строку, в которой находится первая карточка.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.

HeightHeight

Свойство Height определяет высоту карточки.The Height property governs the height of each card. У карточек есть аналог WidthFit для свойства Height, и для него всегда задано значение 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. Все карточки в строке будут выровнены по вертикали по самой высокой из них.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, а поле "Order status" скрыто

Какая карточка определяет высоту строки?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.

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 элемента управления задано значение true.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:

С увеличением размера сообщения об ошибке элемент управления и карточка увеличиваются еще больше; обратите внимание на то, что размер карточек в одной строке увеличивается одновременно