Entender o layout de formulário de dados no Microsoft PowerAppsUnderstand data-form layout in Microsoft PowerApps

No Microsoft PowerApps, você pode criar formulários mais bonitos e de uso eficiente com facilidade.In PowerApps, you can easily create forms that are attractive and efficient to use. Por exemplo, considere este formulário básico para registrar ordens de venda:For example, consider this basic form for recording sales orders:

Exemplo de ordem de venda

Neste tutorial, percorreremos as etapas para criar esse formulário.In this tutorial, we'll walk through the steps to create this form. Também veremos alguns tópicos avançados, como o dimensionamento dinâmico de campos para preencher o espaço disponível.We'll also look at some advanced topics, such as dynamic sizing of fields to fill available space.

Antes de começarBefore you start

Se você for novato no PowerApps (ou tiver apenas gerado aplicativos automaticamente), você desejará criar um aplicativo do zero antes de começar este tópico.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. Criando um aplicativo do zero, você se familiarizará com os conceitos necessários, tais como adicionar fontes de dados e controles, que são mencionados mas não explicados neste tópico.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. Crie um aplicativo para tablet do zero.Create a tablet app from scratch.

    Tudo que é discutido neste tópico também se aplica a layouts de telefone, mas aplicativos de celular têm apenas uma coluna vertical.Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. Adicione a entidade Ordem de venda no Common Data Service como uma fonte de dados para o aplicativo.Add the Sales order entity in the Common Data Service as a data source for the app.

    Fora deste tutorial, você pode usar qualquer fonte de dados, incluindo listas do SharePoint e tabelas do Excel.Outside of this tutorial, you can use any data source, including SharePoint lists and Excel tables.

  3. Adicione um controle Galeria de imagem e defina sua propriedade Items como 'Ordem de venda'.Add a vertical Gallery control, and set its Items property to 'Sales order'.

    (opcional) Para realizar a correspondência entre os exemplos neste tutorial, altere o Layout da galeria para mostrar apenas Título e subtítulo.(optional) To match the examples in this tutorial, change the gallery's Layout to show only Title and subtitle.

    Lista da ordem de venda

  4. Na galeria, clique ou toque em SO004.In the gallery, click or tap SO004.

    Lista da ordem de venda

    Esse registro será exibido no formulário que você criar seguindo as etapas posteriormente neste tópico.This record will appear in the form that you build by following steps later in this topic.

Adicionar uma barra de títuloAdd a title bar

  1. Adicione uma tela em branco em que você colocará o formulário.Add a blank screen where you'll put the form.

    Fora deste tutorial, você pode colocar os controles Galeria e Editar formulário na mesma tela, mas você terá mais espaço com o qual trabalhar se você colocá-los em telas separadas.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. Na parte superior da nova tela, adicione um controle Rótulo e defina sua propriedade Texto para esta expressão: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

    O rótulo mostra o número de ordem de venda do registro que você selecionou na galeria.The label shows the sales-order number of the record that you selected in the gallery.

  3. (opcional) Formate o rótulo da seguinte maneira:(optional) Format the label as follows:

    1. Defina a propriedade Alinhar como Centralizar.Set its Align property to Center.
    2. Defina a propriedade Tamanho como 20.Set its Size property to 20.
    3. Defina a propriedade Preenchimento como Azul-marinho.Set its Fill property to Navy.
    4. Defina a propriedade Cor como Branco.Set its Color property to White.
    5. Defina a propriedade Largura como Parent.Width.Set its Width property to Parent.Width.
    6. Definir suas propriedades X e Y como 0.Set its X and Y properties to 0.

      Barra de título

Adicionar um formulárioAdd a form

  1. Adicione um controle Editar formulário e, em seguida, mova-o e redimensione-o para preencher a tela sob o rótulo.Add an Edit form control, and then move and resize it to fill the screen under the label.

    Na próxima etapa, você conectará o controle de formulário à fonte de dados Ordem de venda usando o painel direito e não na barra de fórmulas.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. Se você usar a barra de fórmulas, o formulário não mostrará nenhum campo por padrão.If you use the formula bar, the form won't show any fields by default. Você sempre pode mostrar todos os campos que você deseja selecionando uma ou mais caixas de seleção no painel direito.You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  2. No painel direito, clique ou toque na seta para baixo ao lado de Nenhuma fonte de dados selecionada e, em seguida, clique ou toque em Ordem de venda.In the right-hand pane, click or tap the down arrow next to No data source selected, and then click or tap Sales order.

    Um conjunto padrão de campos da fonte de dados Ordem de venda será exibido em um layout simples de três colunas.A default set of fields from the Sales order data source will appear in a simple, three-column layout. No entanto, muitos estão em branco e podem levar alguns instantes para ocupar suas posições finais.However, many are blank, and they may take a few moments to settle into their final positions.

  3. Defina a propriedade Item do formulário como Gallery1.Selected.Set the form's Item property to Gallery1.Selected.

    O formulário mostra o registro que você selecionou na galeria, mas o conjunto padrão de campos pode não corresponder ao que você deseja no produto final.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. No painel direito, oculte cada um desses campos desmarcando a respectiva caixa de seleção:In the right-hand pane, hide each of these fields by clearing its checkbox:

    • ID da ordem de vendaSales order ID
    • ContaAccount
    • VendedorSales person
    • Contato da contaAccount contact
  5. Mova o campo Status da ordem arrastando-o para a esquerda e depois cancele-o no outro lado do campo Referência de ordem de compra do cliente.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.

    Sua tela deve ser semelhante a este exemplo:Your screen should resemble this example:

    Ordem de venda em um layout básico de três colunas

Selecionar um cartão de dadosSelect a data card

Cada campo exibido tem um cartão de dados correspondente no formulário.Each field displayed has a corresponding data card on the form. Esse cartão consiste em um conjunto de controles para o título do campo, uma caixa de entrada, uma estrela (que aparece se o campo é obrigatório) e uma mensagem de erro de validação.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.

Também é possível selecionar cartões diretamente no formulário.You can also select cards directly on the form. Quando um cartão é selecionado, uma legenda preta aparece acima dele.When a card is selected, a black caption appears above it.

Seleção de cartão de dados

Observação: para excluir um cartão (não apenas ocultá-lo), selecione-o e, em seguida, pressione Delete.Note: To delete a card (not just hide it), select it, and then press Delete.

Organizar cartões em colunasArrange cards in columns

Por padrão, formulários em aplicativos de tablet têm três colunas, enquanto os aplicativos para celular têm uma.By default, forms in tablet apps have three columns, and those in phone apps have one. Você pode especificar não somente quantas colunas um formulário tem, mas também se todos os cartões devem se ajustar dentro das bordas de coluna.You can specify not only how many columns a form has but also whether all cards should fit within column borders.

Neste gráfico, o número de colunas no formulários foi alterado de três para quatro com a caixa de seleção Ajustar-se às colunas selecionada.In this graphic, the number of columns in the form was changed from three to four with the Snap to columns check box selected. Os cartões no formulário foram organizados automaticamente para se ajustarem ao novo layout.The cards in the form were arranged automatically to fit the new layout.

Ordem de venda em um layout básico de quatro colunas

Redimensionar cartões em várias colunasResize cards across multiple columns

Dependendo dos dados em cada cartão, talvez você queira que alguns cartões se ajustem em uma única coluna enquanto outros ocupem várias colunas.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. Se um cartão contiver mais dados do que você desejar mostrar em uma única coluna, você poderá alargar o cartão selecionando-o e arrastando a alça de seleção na borda esquerda ou direita da caixa de seleção dele.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. Quando você arrastar a alça, o cartão se "ajustará" aos limites de coluna.As you drag the handle, the card will "snap" to column boundaries.

Para tornar o design mais flexível mas reter algumas estruturas, você pode aumentar o número de colunas para 12.To make your design more flexible but retain some structure, you can increase the number of columns to 12. Com essa alteração, você pode facilmente configurar cada cartão para abranger todo o formulário, metade do formulário, um terço, um quarto, um sexto e assim por diante.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. Veremos como isso se dá na prática.Let's see this in action.

  1. No painel direito, defina o número de colunas no formulário para 12.In the right-hand pane, set the number of columns in the form to 12.

    Especificar o número de colunas

    O formulário não é alterado visivelmente, mas você tem mais pontos de alinhamento conforme você arrasta a alça de captura esquerda ou direita.The form doesn't visibly change, but you have more snap points as you drag the left or right grab handle.

  2. Aumente a largura do cartão Data da ordem, arrastando a alça de captura à direita um ponto de alinhamento para a direita.Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    O cartão abrange quatro das 12 colunas do formulário (ou 1/3 do formulário), em vez de apenas três das 12 colunas do formulário (ou 1/4 do formulário).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). Sempre que você aumenta a largura do cartão em um ponto de alinhamento, a parte do formulário abrangida pelo cartão aumenta em 1/12.Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    Redimensionar um cartão com arrastar e soltar

  3. Repita a etapa anterior com os cartões de Status da ordem e Referência de ordem de compra do cliente.Repeat the previous step with the Order status and Customer purchase order reference cards.

    Três cartões na primeira linha

  4. Redimensione os cartões Nome e Descrição para que ocupem seis colunas (ou 1/2) do formulário.Resize the Name and Description cards to take up six columns (or 1/2) of the form.
  5. Faça com que as duas primeiras linhas do endereço de entrega se alonguem completamente, por todo o formulário:Make the first two lines of the delivery address stretch entirely across the form:

Pronto.All done. Temos o formulário desejado, combinando linhas com diferentes números de colunas:We have our desired form, mixing rows with different numbers of columns:

Ordem de venda com layout de 12 colunas com redimensionamento

Manipular os controles em um cartãoManipulate controls in a card

O endereço de entrega é composto de muitas partes de informações que desejamos agrupar visualmente para o usuário.The delivery address comprises several pieces of information that we want to visually group together for the user. Cada campo permanecerá em seu próprio cartão de dados, mas é possível manipular os controles do cartão para ajustá-los melhor.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. Selecione o cartão Primeira linha do endereço de entrega, selecione o rótulo no cartão e, em seguida, exclua as três primeiras palavras do texto.Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    Endereço de entrega da ordem de venda que renomeia o rótulo da primeira linha

  2. Selecione o cartão Segunda linha do endereço de entrega, selecione o rótulo no cartão e, em seguida, exclua todo o texto contido nele.Select the Second line of Delivery address card, select the label within that card, and then delete all of the text in it.

    É tentador simplesmente remover o controle de rótulo e, em muitos casos, isso funciona bem.It may be tempting to simply remove the label control and, in many cases, that will work fine. No entanto, pode haver fórmulas que dependem da presença desse controle.But formulas might depend on that control being present. A abordagem mais segura é remover o texto ou definir sua propriedade Visível como false.The safer approach is to remove the text or to set the Visible property of the control to false.

    Endereço de entrega da ordem de venda que renomeia o rótulo da segunda linha

  3. No mesmo cartão, mova a caixa de texto de entrada sobre o rótulo para reduzir o espaço entre a primeira e a segunda linhas do endereço.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.

    A altura do cartão é reduzida quando seu conteúdo ocupa menos espaço.The height of the card shrinks when its contents take up less space.

    Endereço de entrega da ordem de venda que renomeia o rótulo da segunda linha

Agora, examinaremos a terceira linha do endereço.Now let's turn our attention to the third line of the address. Assim como fizemos há pouco, reduziremos o texto de cada rótulo desses cartões e organizaremos a caixa de entrada de texto à direita de cada rótulo.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. Aqui estão as etapas para o cartão de Estado:Here are the steps for the State card:

EtapaStep DescriçãoDescription ResultadoResult
11 Selecione o cartão de Estado de forma que as alças de captura apareçam ao redor dele.Select the State card so that grab handles appear around it. Selecionar uma ficha
22 Selecione o rótulo neste cartão de forma que as alças de captura apareçam ao redor dele.Select the label within this card so that grab handles appear around it. Selecione um controle em um cartão
33 Posicione o cursor à direita do texto e exclua a parte que não é necessária.Place the cursor to the right of the text, and then delete the portion that we don't need. Altere o texto dentro de um controle em um cartão
44 Por meio das alças de captura laterais, dimensione o controle de rótulo para que ele se ajuste ao novo tamanho do texto.Using the grab handles on the sides, size the label control to fit the new text size. Redimensione um controle dentro de um cartão
55 Selecione o controle de entrada de texto neste cartão.Select the text input control within this card. Selecione outro controle dentro do cartão
66 Por meio das alças de captura laterais, dimensione o controle de entrada de texto no tamanho desejado.Using the grab handles on the sides, size the text input control to the size that you want. Redimensione um controle dentro de um cartão
77 Arraste a caixa de entrada de texto para cima e para a direita do controle de rótulo, depois solte-a.Drag the text input box up and to the right of the label control, and then drop the text input box. Mova um controle dentro de um cartão
As modificações realizadas no cartão de Estado estão concluídas agora.Our modifications to the State card are now complete. As modificações realizadas no cartão de estado estão concluídas

O resultado da terceira linha de endereço completo:The result for the complete third address line:

Endereço de entrega de ordem de venda com uma terceira linha mais concisa

Observe que muitos dos cartões começam com fórmulas dinâmicas em suas propriedades.Note that many of the cards start out with dynamic formulas for their properties. Por exemplo, o controle de entrada de Texto que redimensionamos e movemos para cima tinha uma propriedade de Largura baseada na largura de seu pai.For example, the Text input control that we resized and moved above had a Width property based on the width of its parent. Quando você move ou redimensiona um controle, essas fórmulas dinâmicas são substituídas por valores estáticos.When you move or resize a control, these dynamic formulas are replaced with static values. Será possível restaurar as fórmulas dinâmicas usando a barra de fórmulas, se desejado.If you want, you can restore the dynamic formulas by using the formula bar.

Desativar o Ajustar-se às colunasTurning off Snap to columns

Às vezes, um controle mais preciso do que o padrão de 12 colunas será almejado.Sometimes you'll want finer control than the standard 12 columns can provide. Nesses casos, é possível desligar o Ajustar-se às colunas e posicionar os cartões manualmente.For these cases, you can turn off Snap to columns and then position cards manually. O formulário continuará se ajustando a 12 colunas, mas também é possível manter pressionada a tecla Alt para posicionar manualmente e dimensionar o cartão conforme desejado.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.

Em nosso exemplo, todos os quatro componentes que formam a terceira linha do endereço têm exatamente a mesma largura.In our example, the four components that make up the third line of the address all have exactly the same width. Contudo, este pode não ser o melhor layout, pois os nomes de cidade são geralmente maiores do que os nomes de estado e a caixa de Entrada texto de países/regiões é mais curto em razão do comprimento de seu rótulo.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.

Para otimizar esse espaço, desligue Ajustar-se às colunas no painel direito e, em seguida, mantenha pressionada a tecla Alt ao redimensionar e posicionar esses cartões.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. Sempre que você mantiver pressionada a tecla Alt, todos os controles mostrarão legendas pretas.Whenever you hold down the Alt key, all controls show black captions. Esse comportamento foi concebido para mostrar os nomes de controle a você.This behavior is by design to show you control names.

Posicionar e dimensionar com a tecla ALT pressionada

Após posicionar cuidadosamente, o resultado terá tamanhos apropriados para cada campo e até mesmo espaçamento horizontal entre campos:After careful positioning, the result has appropriate sizes for each field and even spacing horizontally between fields:

Terceira linha de endereço de entrega da ordem de venda posicionada corretamente

Em suma, quais são as diferenças entre o Ajustar-se às colunas ativado e desativado?In summary, what are the differences when Snap to columns is on versus off?

ComportamentoBehavior “Ajustar-se às colunas” ativadoSnap to columns On “Ajustar-se às colunas” desativadoSnap to columns Off
Redimensionar o ajuste paraResize snaps to O número de colunas selecionadas:Number of columns you select:
1, 2, 3, 4, 6 ou 121, 2, 3, 4, 6, or 12
12 colunas12 columns
O ajuste de redimensionamento pode ser substituídoResize snap can be overriden NãoNo Sim, com a tecla AltYes, with Alt key
Os cartões se reajustam automaticamente entre linhas (saiba mais adiante)Cards automatically re-layout between rows (more on this later) SimYes NãoNo

Largura e altura do conjuntoSet width and height

Assim como acontece com tudo no PowerApps, o layout do formulário é controlado pelas propriedades nos controles de cartão.As with everything in PowerApps, the form's layout is governed by properties on the card controls. Como descrito anteriormente, você pode alterar os valores dessas propriedades arrastando controles para locais diferentes ou arrastando as alças de captura para redimensionar controles.As already described, you can change the values of these properties by dragging controls to different locations or dragging grab handles to resize controls. Porém, haverá situações em que você desejará entender e manipular essas propriedades com mais precisão, especialmente ao criar formulários dinâmicos com fórmulas.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.

Layout Básico: X, Y e LarguraBasic Layout: X, Y, and Width

A posição dos cartões é controlada com as propriedades X e Y.The X and Y properties control the position of cards. Quando trabalhamos com controles na tela bruta, essas propriedades fornecem uma posição absoluta.When we work with controls on the raw canvas, these properties provide an absolute position. Todavia, em um formulário, essas propriedades têm um significado diferente:In a form, these properties have a different meaning:

  • X: ordem dentro de uma linha.X: Order within a row.
  • Y: número da linha.Y: Row number.

Assim como os controles na tela, a propriedade Width especifica a largura mínima do cartão (saiba mais sobre isso mais adiante).Similar to controls on the canvas, the Width property specifies the minimum width of the card (more on the minimum aspect in a moment).

Vamos dar uma olhada nas propriedades X, Y e Width dos cartões no formulário:Let's take a look at the X, Y, and Width properties of the cards in our form:

Coordenadas X e Y do formulário de ordem de venda

Estouro de linhasOverflowing rows

O que acontece se os cartões em uma linha são muito grandes para caber nela?What happens if the cards on a row are too wide to fit on that row? Normalmente, não é necessário se preocupar com essa possibilidade.Normally you don't need to worry about this possibility. Com o Ajustar-se às colunas ativado, essas três propriedades se ajustarão automaticamente, assim, tudo caberá nas linhas, sem estouro.With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

Porém, com o Ajustar-se às colunas desativado ou uma Largura baseada em fórmula em um ou mais dos cartões, o estouro pode ocorrer em uma linha.But with Snap to columns turned off or a formula-based Width on one or more of your cards, overflowing a row can happen. Nesse caso, os cartões serão automaticamente encapsulados para criar efetivamente uma nova linha.In this case, the cards will automatically wrap so that, effectively, another row is created. Por exemplo, alteraremos manualmente a propriedade Largura do cartão Referência de ordem de compra do cliente (primeira linha, terceiro item) para 500:For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 500:

Redimensionamento manual do cartão, refluir em uma nova linha

Os três cartões na linha superior não se ajustam mais horizontalmente e uma nova linha foi criada para encapsular o estouro.The three cards on the top row no longer fit horizontally, and another row has been created to wrap the overflow. A coordenada Y de todos esses cartões ainda é a mesma em 0, e os cartões Nome e Descrição ainda têm um Y de 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. Os cartões que têm valores de Y diferentes não são mesclados entre linhas.Cards that have different Y values aren't merged across rows.

É possível usar esse comportamento para criar um layout totalmente dinâmico em que cartões são colocados com base em uma classificação Z, preenchendo-o tanto quanto possível e antes de movê-lo para a próxima linha.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. Para fazer isso, atribua o mesmo valor Y a todos os cartões e use X para ordená-los.To achieve this effect, give all the cards the same Y value, and use X for the order of the cards.

Preenchimento de espaços: WidthFitFilling spaces: WidthFit

O estouro no último exemplo criou um espaço após o cartão Status da ordem, que era o segundo cartão na primeira linha.The overflow in the last example created a space after the Order status card, which was the second card in the first row. É possível ajustar manualmente as propriedades Largura dos dois cartões restantes para preencher esse espaço, mas isso é entediante.We could manually adjust the Width properties of the two remaining cards to fill this space, but this approach is tedious.

Como alternativa, use a propriedade WidthFit.As an alternative, use the WidthFit property. Se um ou mais cartões de uma linha tiverem essa propriedade definida como true, qualquer espaço restante na linha será dividido igualmente entre eles.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. Como já dissemos, esse comportamento ocorre porque a propriedade Largura de um cartão é um mínimo e, na realidade, o que é visto pode ser mais amplo.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. Essa propriedade nunca fará com que um cartão se reduza, somente que expanda.This property will never cause a card to shrink, only expand.

Se nós definirmos WidthFit para true no cartão Status da ordem, ele preencherá o espaço disponível, enquanto o primeiro cartão permanecerá inalterado:If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

WidthFit definido como true no segundo cartão

Se WidthFit também for definido como true no cartão Data da ordem, os dois cartões dividirão igualmente o espaço disponível:If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

WidthFit definido como true no primeiro e no segundo cartão

Observe que as alças de captura nesses cartões levam em conta a largura adicional fornecida pelo WidthFit, e não a largura mínima fornecida pela propriedade 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. Pode ser confuso manipular a propriedade Largura enquanto WidthFit está ativado. Você pode desativá-lo, alterar a Largura e, em seguida, ativá-lo novamente.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.

Quando o WidthFit pode ser útil?When might WidthFit be useful? Caso haja um campo utilizado apenas em determinadas situações, é possível definir a propriedade Visível como false para que os outros cartões na linha preencham automaticamente o espaço ao redor.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. Talvez seja desejável usar uma fórmula que mostre um campo quando outro campo tiver um valor específico.You might want to use a formula that shows a field only when another field has a particular value.

Aqui, definiremos a propriedade Visível do campo Status da ordem como um false estático:Here, we'll set the Visible property of the Order status field to a static false:

WidthFit definido como true no primeiro cartão com status da ordem invisível

Com o segundo cartão removido, o terceiro cartão pode agora retornar à mesma linha do primeiro cartão.With the second card effectively removed, the third card can now return to the same row as the first card. O primeiro cartão ainda tem WidthFit definido como true, então apenas ele se expande para preencher o espaço disponível.The first card still has WidthFit set to true, so it alone expands to fill the available space.

Já que o Status da ordem é invisível, você não pode selecioná-lo tão facilmente na tela.Because Order status is invisible, you can't select it as easily on the canvas. No entanto, você pode selecionar qualquer controle, visível ou não, na lista hierárquica de controles no lado esquerdo da tela.However, you can select any control, visible or not, in the hierarchical list of controls on the left side of the screen.

AlturaHeight

A propriedade Height determina a altura de cada cartão.The Height property governs the height of each card. Os cartões têm o equivalente de WidthFit para Altura e que ele é sempre definido como true.Cards have the equivalent of WidthFit for Height, and it's always set to true. Imagine que uma propriedade HeightFit existe, mas não procure por ela no produto porque essa propriedade ainda não está exposta.Imagine that a HeightFit property exists, but don't look for it in the product because such a property isn't yet exposed.

Não é possível desligar esse comportamento, então, alterar a altura dos cartões pode ser desafiador.You can't turn off this behavior, so changing the heights of cards can be challenging. Todos os cartões em uma linha parecem ter a mesma altura do cartão mais alto.All cards within a row appear to be the same height as the tallest card. Você pode ver uma linha como esta:You might look at a row like this:

WidthFit definido como true no primeiro cartão com status da ordem invisível

Qual cartão está determinando a altura da linha?Which card is making the row tall? No gráfico anterior, o cartão de Montante total está selecionado e parece alto, mas sua propriedade Altura está definida como 80 (o mesmo que a altura da primeira linha).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). Para reduzir a altura de uma linha, você deve reduzir a Altura do cartão mais alto nessa linha e você não pode identificar o cartão mais alto sem revisar a propriedade Altura de cada cartão.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

Um cartão também pode ser mais alto do que o esperado se ele contém um controle para o qual a propriedade AutoHeight está definida como true.A card might also be taller than you expect if it contains a control for which the AutoHeight property is set to true. Por exemplo, muitos cartões contêm um rótulo que exibe uma mensagem de erro se o valor do campo causa um problema de validação.For example, many cards contain a label that displays an error message if the field's value causes a validation problem.

Sem um texto a ser exibido (sem erros), o rótulo se recolhe para uma altura zero.Without any text to display (no error), the label collapses to zero height. Se você não soubesse disso, não perceberia sua existência e é assim que seria:If you didn't know any better, you wouldn't know it was there, and that's as it should be:

Cartões que contêm controles com AutoHeight definido como true, não mostrando altura

No lado esquerdo da tela, a lista de controles mostra ErrorMessage1, que é o nosso controle de rótulo.On the left side of the screen, the list of controls shows ErrorMessage1, which is our label control. Conforme você atualiza um aplicativo, você pode selecionar esse controle para dar a ele alguma altura e mostrar as alças de captura com as quais você pode posicionar e dimensionar o controle.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. O "A" na caixa azul indica que o controle tem AutoHeight definida como true:The "A" in a blue box indicates that the control has AutoHeight set to true:

No momento da criação, os controles AutoHeight mostram algumas alturas, tornando mais fácil arrastar e soltar

A propriedade Texto desse controle é definida como Parent.Error, que é usado para obter informações de erro dinâmico baseadas em regras de validação.The Text property of this control is set to Parent.Error, which is used to obtain dynamic error information based on validation rules. Para fins ilustrativos, definiremos estaticamente a propriedade Texto desse controle, o que aumentará a altura do controle (e, por extensão, do cartão) para acomodar o comprimento do texto: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:

Com uma mensagem de erro, o controle e o cartão aumentam automaticamente

Vamos aumentar o comprimento da mensagem de erro e, novamente, o controle e o cartão aumentarão para se ajustar.Let's make the error message a little longer, and again the control and the card grow to accommodate. Observe que, no geral, a linha cresce em altura, mantendo o alinhamento vertical entre os cartões:Note that the row overall grows in height, retaining vertical alignment between the cards:

Com uma mensagem de erro mais longa, o controle e o cartão aumentam ainda mais. Note que os cartões na mesma linha aumentam juntos