Mostrar itens de alturas diferentes numa galeria do PowerAppsShow items of different heights in a PowerApps gallery

Se itens diferentes no seu conjunto de dados contiverem diferentes quantidades de dados no mesmo campo, poderá mostrar completamente os itens que contêm mais dados sem precisar adicionar espaço em branco depois dos itens que contêm menos dados.If different items in your data set contain different amounts of data in the same field, you can completely show items that contain more data without adding empty space after items that contain less data. Adicione e configure um controlo de galeria de Altura flexível para que possa:Add and configure a Flexible height gallery control so that you can:

  • Configurar os controlos Etiqueta para expandir ou reduzir com base nos conteúdos neles incluídos.Configure Label controls to expand or shrink based on their contents.
  • Posicione cada controlo para que seja apresentado automaticamente abaixo do controlo que se encontra imediatamente acima.Position each control so that it automatically appears just under the control above it.

Neste tutorial, apresenta dados sobre produtos de pavimentos num controlo de galeria de Altura flexível.In this tutorial, you show data about flooring products in a Flexible height gallery control. A imagem de cada produto é apresentada 5 pixels abaixo da descrição geral, quer a descrição geral contenha cinco linhas de texto ou duas linhas.The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.

Aplicação final

Sugestões de leituraSuggested reading

Se nunca tiver adicionado controlos a uma galeria, siga os passos em Mostrar uma lista de itens antes de prosseguir neste tópico.If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.

Adicionar dados a uma aplicação em brancoAdd data to a blank app

  1. Transfira este ficheiro do Excel, que contém nomes, descrições gerais e ligações para imagens de produtos de pavimentos.Download this Excel file, which contains names, overviews, and links to images of flooring products.

    Produtos de pavimentos

  2. Carregue o ficheiro do Excel para uma conta de armazenamento na cloud, como o OneDrive, Dropbox ou Google Drive.Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.
  3. No PowerApps Studio, clique ou toque em Novo, no menu Ficheiro.In PowerApps Studio, click or tap New on the File menu.
  4. No mosaico Aplicação em branco, clique ou toque em Esquema de telemóvel.On the Blank app tile, click or tap Phone layout.

    Opção Nova no menu Ficheiro

  5. Adicione uma ligação à tabela FlooringEstimates no ficheiro do Excel.Add a connection to the FlooringEstimates table in the Excel file.

    Para obter mais informações, veja Adicionar uma ligação.For more information, see Add a connection.

  1. No separador Inserir, clique ou toque em Galeria e, em seguida, clique ou toque em Altura flexível.On the Insert tab, click or tap Gallery, and then click or tap Flexible height.

    Adicionar galeria

  2. Redimensione a galeria para ocupar o ecrã inteiro.Resize the gallery to take up the entire screen.
  3. Defina a propriedade Items da galeria como FlooringEstimates.Set the gallery's Items property to FlooringEstimates.

Mostrar os nomes de produtosShow the product names

  1. No canto superior esquerdo da galeria, clique ou toque no ícone de lápis para selecionar o modelo da galeria.In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    Ícone de lápis

  2. Com o modelo da galeria selecionado, adicione um controlo Etiqueta.With the gallery template selected, add a Label control to it.
  3. Defina a propriedade Text do controlo Etiqueta como esta expressão:Set the Text property of the Label control to this expression:
    ThisItem.Name ThisItem.Name

    Adicionar etiqueta

Mostrar as descrições gerais dos produtosShow the product overviews

  1. Com o modelo da galeria selecionado, adicione outro controlo Etiqueta e mova-o para baixo do primeiro controlo Etiqueta.With the gallery template selected, add another Label control, and move it below the first Label control.
  2. Defina a propriedade Text do segundo controlo Etiqueta como esta expressão:Set the Text property of the second Label control to this expression:
    ThisItem.OverviewThisItem.Overview
  3. Com o segundo controlo Etiqueta selecionado, clique ou toque no ícone de etiqueta-nome no separador Conteúdo e mude o nome do controlo para OverviewText.With the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    Mudar o nome da etiqueta

  4. Defina a propriedade AutoHeight da caixa OverviewText como verdadeira.Set the AutoHeight property of the OverviewText box to true.

    Este passo garante que a caixa irá aumentar ou diminuir para se ajustar ao conteúdo.This step ensures that the box will grow or shrink to fit its contents.

    Altura automática do texto

Mostrar as imagens dos produtosShow the product images

  1. Redimensione o modelo para ter o dobro da altura.Resize the template so that it's twice as tall as it was.

    Pode adicionar controlos ao modelo mais facilmente à medida que cria a aplicação. Esta alteração não afeta o aspeto da aplicação quando é executada.You can add controls to the template more easily as you build the app, and this change won't affect how the app looks when it runs.

  2. Com o modelo da galeria selecionado, adicione um controlo Imagem e mova-o para baixo da caixa OverviewText.With the gallery template selected, add an Image control, and move it below the OverviewText box.
  3. Verifique se a propriedade Image do controlo Imagem está definida como esta expressão:Ensure that the Image property of the Image control is set to this expression:
    ThisItem.ImageThisItem.Image
  4. Defina a propriedade Y do controlo Imagem com base na posição e no tamanho da caixa OverviewText, tal como nesta expressão:Set the Y property of the Image control based on the position and the size of the OverviewText box, as in this expression:
    OverviewText.Y + OverviewText.Height + 5OverviewText.Y + OverviewText.Height + 5

    Aplicação final

Aplique o mesmo conceito se pretender adicionar mais controlos: defina a propriedade Y de cada controlo com base nas propriedades Y e Height do controlo que está acima.Apply the same concept if you want to add more controls: set each control's Y property based on the Y and Height properties of the control above it.

Passos seguintesNext steps

Saiba mais sobre como trabalhar com um controlo de galeria e fórmulas.Learn more about how to work with a gallery control and formulas.