Mostrare elementi con altezze diverse in una raccolta di PowerAppsShow items of different heights in a PowerApps gallery

Se diversi elementi nel set di dati contengono diverse quantità di dati nello stesso campo, è possibile mostrare completamente gli elementi che contengono più dati senza aggiungere spazio vuoto dopo gli elementi che contengono meno dati.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. Aggiungere e configurare un controllo raccolta Altezza dinamica in modo che sia possibile:Add and configure a Flexible height gallery control so that you can:

  • Configurare i controlli Etichetta per espandere o ridurre in base al contenuto.Configure Label controls to expand or shrink based on their contents.
  • Posizionare ogni controllo in modo che venga visualizzato automaticamente sotto il controllo precedente.Position each control so that it automatically appears just under the control above it.

In questa esercitazione, verranno visualizzati i dati sui prodotti di pavimentazione in un controllo raccoltaAltezza dinamica.In this tutorial, you show data about flooring products in a Flexible height gallery control. L'immagine di ogni prodotto appare 5 pixel sotto la panoramica, che questa includa cinque righe di testo o solo due righe.The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.

App finale

Letture consigliateSuggested reading

Se non sono mai stati aggiunti controlli a una raccolta, seguire i passaggi in Visualizzare un elenco di elementi prima di procedere con questo argomento.If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.

Aggiungere dati a un'app vuotaAdd data to a blank app

  1. Scaricare questo file di Excel, che contiene nomi, panoramiche e collegamenti alle immagini dei prodotti di pavimentazione.Download this Excel file, which contains names, overviews, and links to images of flooring products.

    Prodotti di pavimentazione

  2. Caricare il file di Excel in un account di archiviazione cloud, ad esempio OneDrive, Dropbox o Google Drive.Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.

  3. In PowerApps Studio toccare o fare clic su Nuovo nel menu File.In PowerApps Studio, click or tap New on the File menu.

  4. Nel riquadro App vuota toccare o fare clic su Layout del telefono.On the Blank app tile, click or tap Phone layout.

    Opzione Nuovo nel menu File

  5. Aggiungere una connessione alla tabella FlooringEstimates nel file di Excel.Add a connection to the FlooringEstimates table in the Excel file.

    Per altre informazioni, vedere Aggiungere una connessione.For more information, see Add a connection.

  1. Nella scheda Inserisci scegliere o toccare Raccolta, quindi scegliere o toccare Altezza dinamica.On the Insert tab, click or tap Gallery, and then click or tap Flexible height.

    Aggiungere una raccolta

  2. Ridimensionare la raccolta in modo da occupare l'intera schermata.Resize the gallery to take up the entire screen.

  3. Impostare la proprietà Items della raccolta su FlooringEstimates.Set the gallery's Items property to FlooringEstimates.

Mostrare i nomi di prodottoShow the product names

  1. Per selezionare il modello di raccolta, toccare o fare clic sull'icona a forma di matita nell'angolo in alto a sinistra.In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    Icona a forma di matita

  2. Tenendo selezionato il modello di raccolta, aggiungervi un controllo Etichetta.With the gallery template selected, add a Label control to it.

  3. Impostare la proprietà Text del controllo Etichetta in modo da visualizzare questa espressione:Set the Text property of the Label control to this expression:
    ThisItem.NameThisItem.Name

    Aggiungere etichetta

Mostrare le panoramiche sul prodottoShow the product overviews

  1. Con il modello di raccolta selezionato, aggiungere un altro controllo Etichetta e spostarlo sotto il primo controllo Etichetta.With the gallery template selected, add another Label control, and move it below the first Label control.

  2. Impostare la proprietà Text del secondo controllo Etichetta in modo da visualizzare questa espressione:Set the Text property of the second Label control to this expression:
    ThisItem.OverviewThisItem.Overview

  3. Con il secondo controllo Etichetta selezionato, toccare fare clic sull'icona del tag di nome nella scheda Contenuto e rinominare il controllo OverviewText.With the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    Rinominare l'etichetta

  4. Impostare la proprietà AutoHeight della casella OverviewText su true.Set the AutoHeight property of the OverviewText box to true.

    Questo passaggio assicura che la casella verrà aumentata o ridotta in base al contenuto.This step ensures that the box will grow or shrink to fit its contents.

    Altezza automatico del testo

Mostrare le immagini del prodottoShow the product images

  1. Ridimensionare il modello in modo da raddoppiarne l'altezza.Resize the template so that it's twice as tall as it was.

    È possibile aggiungere controlli al modello più facilmente quando si compila l'app e questa modifica non influisce sull'aspetto dell'app quando è in esecuzione.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. Con il modello di raccolta selezionato, aggiungere un controllo Immagine e spostarlo sotto la casella OverviewText.With the gallery template selected, add an Image control, and move it below the OverviewText box.

  3. Assicurarsi che la proprietà Immagine del controllo Immagine sia impostata su questa espressione:Ensure that the Image property of the Image control is set to this expression:
    ThisItem.ImageThisItem.Image

  4. Impostare la proprietà Y del controllo Immagine in base alla posizione e alle dimensioni della casella OverviewText, come in questa espressione: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

    App finale

Se si vogliono aggiungere altri controllo, applicare lo stesso concetto, cioè impostare la proprietà Y di ciascun controllo in base alle proprietà Y e Altezza del controllo che lo precede.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.

Passaggi successiviNext steps

Leggere altre informazioni su come utilizzare un controllo raccolta e le formule.Learn more about how to work with a gallery control and formulas.