Mostrare elementi di altezze diverse in una galleria di app canvas

Se elementi diversi nel set di dati contengono quantità diverse di dati nello stesso campo, è possibile visualizzare elementi che contengono più dati senza aggiungere spazio vuoto aggiuntivo dopo gli elementi con meno dati. Aggiungi e configura un controllo Raccolta Altezza dinamica in modo che sia possibile:

• Configurare i controlli Etichetta per espandere o ridurre in base al contenuto.
• Posizionare ogni controllo in modo che venga visualizzato automaticamente sotto il controllo sopra di esso.

In questo articolo, verranno visualizzati i dati sui prodotti di pavimentazione in un controllo RaccoltaAltezza dinamica. L'immagine di ogni prodotto appare 5 pixel sotto il testo della panoramica, indipendentemente dal fatto che tale panoramica sia di due righe o cinque.

Aggiungere dati a un'app vuota

1. Scaricare questo file di Excel, che contiene nomi, panoramiche e collegamenti alle immagini per i prodotti per pavimenti.

2. Caricare il file Excel in un account di archiviazione cloud, ad esempio OneDrive, SharePoint, Dropbox o Google Drive.

3. Crea un'app vuota con il layout Telefono.

4. Aggiungi una connessione alla tabella FlooringEstimates nel file di Excel.

   Per altre informazioni, vedere Aggiungere una connessione dati.

Aggiungere dati a una galleria

1. Nella scheda Inserisci, seleziona Raccolta>Altezza flessibile.

   

2. Ridimensiona la galleria in modo da riempire l'intero schermo.

3. Imposta la proprietà Items della galleria su FlooringEstimates.

Mostrare i nomi di prodotto

1. Nell'angolo superiore sinistro della galleria, seleziona l'icona a forma di matita per accedere alla modalità di modifica del modello.

2. Con il modello di galleria selezionato, aggiungere un controllo Etichetta.

3. Impostare la proprietà Text del controllo Etichetta su:

   ThisItem.Name
   

Mostrare le panoramiche sul prodotto

1. Con il modello di galleria selezionato, aggiungere un secondo controllo Label e spostarlo sotto il primo.

2. Impostare la proprietà Text della seconda etichetta su:

   ThisItem.Overview
   

3. Con la seconda etichetta selezionata, rinominala in OverviewText usando l'icona del tag nome nella scheda Contenuto.

4. Impostare la proprietà AutoHeight di OverviewTextsu true.

   Suggerimento

   Impostando AutoHeight su true per un'etichetta, questa si espande o si riduce per adattarsi al proprio contenuto. Questa è la chiave per far funzionare correttamente la galleria ad altezza flessibile: senza di essa, tutti gli elementi vengono visualizzati con la stessa altezza fissa.

Mostrare le immagini del prodotto

1. Rendi il modello più alto trascinando il bordo inferiore verso il basso fino a raggiungere circa il doppio dell'altezza attuale.

   È possibile aggiungere controlli al modello più facilmente durante la compilazione dell'app. Questa modifica non influisce sull'aspetto dell'app durante l'esecuzione.

2. Con il modello di raccolta selezionato, aggiungi un controllo Immagine e spostalo sotto l'etichetta OverviewText.

3. Verificare che la proprietà Image del controllo Image sia impostata su:

   ThisItem.Image
   

4. Impostare la proprietà Y del controllo Image per posizionarla dinamicamente sotto il testo della panoramica:

   OverviewText.Y + OverviewText.Height + 5
   

   

   Applicare lo stesso concetto per tutti i controlli aggiuntivi: impostare la proprietà Y di ogni controllo in base all'Y e all'altezza del controllo immediatamente sopra di esso.

Passaggi successivi

• Aggiungere e configurare un controllo Galleria
• Procedure consigliate per lavorare con le gallerie
• Introduzione alle formule nelle app canvas