Zobrazenie položiek rôznej výšky v galérii PowerAppsShow items of different heights in a PowerApps gallery

Ak rôzne položky vo vašej množine údajov obsahujú v rovnakom poli rôzne množstvo údajov, môžete položky obsahujúce viac údajov zobraziť celé bez toho, aby ste museli pridávať voľné miesto za položky, ktoré toľko údajov neobsahujú.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. Pridajte a nakonfigurujte ovládací prvok galérie Premenlivá výška, aby ste mohli:Add and configure a Flexible height gallery control so that you can:

  • konfigurovať ovládacie prvky Označenie na zväčšenie alebo zmenšenie na základe ich obsahu,Configure Label controls to expand or shrink based on their contents.
  • umiestniť každý ovládací prvok tak, aby sa automaticky zobrazil priamo pod ovládacím prvkom nad ním.Position each control so that it automatically appears just under the control above it.

V tomto kurze zobrazíte údaje o podlahových výrobkoch v ovládacom prvku galérie Premenlivá výška.In this tutorial, you show data about flooring products in a Flexible height gallery control. Obrázok každého výrobku sa zobrazí 5 pixelov pod prehľadom bez ohľadu na to, či prehľad obsahuje päť riadkov textu alebo iba dva.The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.

Konečná verzia aplikácie

Navrhované témySuggested reading

Ak ste nikdy nepridávali ovládacie prvky do galérie, postupujte podľa krokov v časti Zobrazenie zoznamu položiek, než budete v tejto téme pokračovať.If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.

Pridanie údajov do prázdnej aplikácieAdd data to a blank app

  1. Stiahnite si tento excelový súbor s názvami, prehľadmi a odkazmi na obrázky podlahových výrobkov.Download this Excel file, which contains names, overviews, and links to images of flooring products.

    Podlahové výrobky

  2. Nahrajte excelový súbor do účtu cloudového úložiska, ako je napríklad OneDrive, Dropbox alebo Disk Google.Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.

  3. V službe PowerApps Studio kliknite alebo ťuknite v ponuke Súbor na položku Nový.In PowerApps Studio, click or tap New on the File menu.

  4. Na dlaždici Prázdna aplikácia kliknite alebo ťuknite na Rozloženie pre telefón.On the Blank app tile, click or tap Phone layout.

    Nová možnosť v ponuke Súbor

  5. K tabuľke FlooringEstimates v excelovom súbore pridajte pripojenie.Add a connection to the FlooringEstimates table in the Excel file.

    Ďalšie informácie nájdete v téme Pridanie pripojenia.For more information, see Add a connection.

  1. Na karte Vloženie kliknite alebo ťuknite na položku Galéria a potom kliknite alebo ťuknite na položku Premenlivá výška.On the Insert tab, click or tap Gallery, and then click or tap Flexible height.

    Pridanie galérie

  2. Zmeňte veľkosť galérie tak, aby zaberala celú obrazovku.Resize the gallery to take up the entire screen.

  3. Nastavte vlastnosť Items galérie na položku FlooringEstimates.Set the gallery's Items property to FlooringEstimates.

Zobrazenie názvov výrobkovShow the product names

  1. V ľavom hornom rohu galérie kliknite alebo ťuknite na ikonu ceruzky a vyberte šablónu galérie.In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    Ikona ceruzky

  2. Keď máte vybranú šablónu galérie, pridajte do nej ovládací prvok Označenie.With the gallery template selected, add a Label control to it.

  3. Nastavte vlastnosť Text ovládacieho prvku Označenie na tento výraz:Set the Text property of the Label control to this expression:
    ThisItem.NameThisItem.Name

    Pridanie označenia

Zobrazenie prehľadov výrobkovShow the product overviews

  1. Keď máte vybranú šablónu galérie, pridajte ďalší ovládací prvok Označenie a presuňte ho pod prvý ovládací prvok Označenie.With the gallery template selected, add another Label control, and move it below the first Label control.

  2. Nastavte vlastnosť Text druhého ovládacieho prvku Označenie na tento výraz:Set the Text property of the second Label control to this expression:
    ThisItem.OverviewThisItem.Overview

  3. Keď máte vybraný druhý ovládací prvok Označenie, kliknite alebo ťuknite na ikonu názvu-značky na karte Obsah a premenujte ovládací prvok na OverviewText.With the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    Označenie premenovania

  4. Nastavte vlastnosť AutoHeight poľa OverviewText na hodnotu true.Set the AutoHeight property of the OverviewText box to true.

    Tento krok zaistí, že sa pole bude zväčšovať alebo zmenšovať podľa svojho obsahu.This step ensures that the box will grow or shrink to fit its contents.

    Automatická výška textu

Zobrazenie obrázkov výrobkovShow the product images

  1. Zmeňte veľkosť šablóny tak, aby jej výška bola dvojnásobkom pôvodnej výšky.Resize the template so that it's twice as tall as it was.

    Ovládacie prvky môžete do šablóny jednoduchšie pridávať pri vytváraní aplikácie a táto zmena nebude mať vplyv na to, ako bude aplikácia vyzerať pri spustení.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. Keď máte vybranú šablónu galérie, pridajte ovládací prvok Obrázok a presuňte ho pod pole OverviewText.With the gallery template selected, add an Image control, and move it below the OverviewText box.

  3. Uistite sa, že je vlastnosť Image ovládacie prvku Obrázok nastavená na tento výraz:Ensure that the Image property of the Image control is set to this expression:
    ThisItem.ImageThisItem.Image

  4. Nastavte vlastnosť Y ovládacieho prvku Obrázok podľa umiestnenia a veľkosti poľa OverviewText tak, ako je to uvedené v tomto výraze: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

    Konečná verzia aplikácie

Ak chcete pridať ďalšie ovládacie prvky, použite rovnaký koncept: vlastnosť Y každého ovládacieho prvku nastavte podľa vlastností Y a Height ovládacieho prvku nad ním.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.

Ďalšie krokyNext steps

Prečítajte si ďalšie informácie o tom, ako pracovať s ovládacím prvkom galéria a vzorcami.Learn more about how to work with a gallery control and formulas.