Items met verschillende hoogten weergeven in een PowerApps-galerieShow items of different heights in a PowerApps gallery

Als verschillende items in uw gegevensset verschillende hoeveelheden gegevens in hetzelfde veld bevatten, kunt u items volledig weergeven die meer gegevens bevatten zonder lege ruimte toe te voegen na items die minder gegevens bevatten.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. Voeg het galeriebesturingselement Flexibele hoogte toe en configureer dit zodat u:Add and configure a Flexible height gallery control so that you can:

  • Label-besturingselementen zo kunt configureren dat ze worden vergroot of verkleind op basis van de inhoud.Configure Label controls to expand or shrink based on their contents.
  • Elk besturingselement zo kunt plaatsen dat dit automatisch wordt weergegeven net onder het besturingselement erboven.Position each control so that it automatically appears just under the control above it.

In deze zelfstudie geeft u gegevens weer over vloerproducten in het galeriebesturingselement Flexibele hoogte.In this tutorial, you show data about flooring products in a Flexible height gallery control. De afbeelding van elk product wordt 5 pixels onder het overzicht weergegeven, ongeacht of het overzicht vijf of twee tekstregels bevat.The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.

Definitieve app

Aanbevolen onderwerpenSuggested reading

Als u nog nooit besturingselementen hebt toegevoegd aan een galerie, volgt u de stappen in Een lijst met items weergeven voordat u verdergaat met dit onderwerp.If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.

Gegevens toevoegen aan een lege appAdd data to a blank app

  1. Download dit Excel-bestand, dat namen, overzichten en koppelingen naar afbeeldingen van vloerproducten bevat.Download this Excel file, which contains names, overviews, and links to images of flooring products.

    Vloerproducten

  2. Upload het Excel-bestand naar een cloudopslagaccount, zoals OneDrive, Dropbox of Google Drive.Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.
  3. Klik of tik in PowerApps Studio op Nieuw in het menu Bestand.In PowerApps Studio, click or tap New on the File menu.
  4. Klik of tik onder Lege app op Telefoonindeling.On the Blank app tile, click or tap Phone layout.

    Optie New in het menu File

  5. Voeg een verbinding toe aan de tabel FlooringEstimates in het Excel-bestand.Add a connection to the FlooringEstimates table in the Excel file.

    Zie Een verbinding toevoegen voor meer informatie.For more information, see Add a connection.

  1. Ga naar het tabblad Invoegen, klik of tik op Galerie en klik of tik vervolgens op Flexibele hoogte.On the Insert tab, click or tap Gallery, and then click or tap Flexible height.

    Galerie toevoegen

  2. Pas de grootte van de galerie aan, zodat deze het hele scherm vult.Resize the gallery to take up the entire screen.
  3. Stel de eigenschap Items van de galerie in op FlooringEstimates.Set the gallery's Items property to FlooringEstimates.

De productnamen weergevenShow the product names

  1. Klik of tik linksboven in de galerie op het potloodpictogram om de galeriesjabloon te selecteren.In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    Potloodpictogram

  2. Selecteer de galeriesjabloon en voeg er een besturingselement Label aan toe.With the gallery template selected, add a Label control to it.
  3. Stel de eigenschap Text van het besturingselement Label in op deze expressie:Set the Text property of the Label control to this expression:
    ThisItem.Name ThisItem.Name

    Label toevoegen

De productoverzichten weergevenShow the product overviews

  1. Selecteer de galeriesjabloon en voeg nog een besturingselement Label toe. Plaatst dit besturingselement onder het eerste besturingselement Label.With the gallery template selected, add another Label control, and move it below the first Label control.
  2. Stel de eigenschap Text van het besturingselement Label in op deze expressie:Set the Text property of the second Label control to this expression:
    ThisItem.OverviewThisItem.Overview
  3. Selecteer het tweede besturingselement Label en klik of tik op het pictogram met het naamkaartje op het tabblad Inhoud en wijzig de naam van het besturingselement in OverviewText.With the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    De naam van het label wijzigen

  4. Stel de eigenschap AutoHeight van het vak OverviewText in op Waar.Set the AutoHeight property of the OverviewText box to true.

    Met deze stap zorgt u ervoor dat de grootte van het vak wordt aangepast aan de inhoud.This step ensures that the box will grow or shrink to fit its contents.

    Automatische teksthoogte

De productafbeeldingen weergevenShow the product images

  1. Wijzig de grootte van de sjabloon, zodat deze twee keer zo lang is al eerst.Resize the template so that it's twice as tall as it was.

    U kunt besturingselementen eenvoudiger toevoegen aan de sjabloon terwijl u de app maakt. Deze wijziging heeft geen invloed op het uiterlijk van de app wanneer deze wordt uitgevoerd.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. Terwijl u de galeriesjabloon hebt geselecteerd, voegt u het besturingselement Afbeelding toe en plaatst u dit onder het vak OverviewText.With the gallery template selected, add an Image control, and move it below the OverviewText box.
  3. Zorg ervoor dat de eigenschap Image van het besturingselement Afbeelding is ingesteld op deze expressie:Ensure that the Image property of the Image control is set to this expression:
    ThisItem.ImageThisItem.Image
  4. Stel de Y-eigenschap van het besturingselement Afbeelding in op basis van de positie en de grootte van het vak OverviewText, zoals in deze expressie: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

    Definitieve app

Pas hetzelfde concept toe als u meer besturingselementen wilt toevoegen: stel de eigenschap Y van elk besturingselement in op basis van de eigenschappen Y en Height van het besturingselement erboven.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.

Volgende stappenNext steps

Lees meer over het werken met een galeriebesturingselement en formules.Learn more about how to work with a gallery control and formulas.