Afficher les éléments de différentes hauteurs dans une galerie PowerAppsShow items of different heights in a PowerApps gallery

Si différents éléments de votre jeu de données contiennent différentes quantités de données dans le même champ, vous pouvez afficher complètement les éléments qui contiennent plus de données sans ajouter d’espace vide après les éléments qui contiennent moins de données.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. Ajoutez et configurez un contrôle de galerie à hauteur flexible aux fins suivantes :Add and configure a Flexible height gallery control so that you can:

  • Configurez des contrôles Label pour réduire ou développer les contrôles en fonction de leur contenu.Configure Label controls to expand or shrink based on their contents.
  • Positionnez chaque contrôle afin qu’il apparaisse automatiquement sous le contrôle situé au-dessus de lui.Position each control so that it automatically appears just under the control above it.

Dans ce tutoriel, vous affichez des données concernant des revêtements de sol dans un contrôle de galerie à hauteur flexible .In this tutorial, you show data about flooring products in a Flexible height gallery control. L’image de chaque produit s’affiche 5 pixels sous la présentation, que celle-ci contienne cinq lignes de texte ou deux lignes.The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.

Application finale

Lecture recommandéeSuggested reading

Si vous n’avez jamais ajouté de contrôles à une galerie, suivez les étapes de la rubrique Afficher une liste d’éléments avant de poursuivre la lecture de cette rubrique.If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.

Ajouter des données à une application videAdd data to a blank app

  1. Téléchargez ce fichier Excel, qui contient les noms, présentations et liens vers des images de produits de revêtement de sol.Download this Excel file, which contains names, overviews, and links to images of flooring products.

    Produits de revêtement de sol

  2. Chargez le fichier Excel dans un compte de stockage cloud, tel que OneDrive, Dropbox ou Google Drive.Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.

  3. Dans PowerApps Studio, cliquez ou appuyez sur Nouveau dans le menu Fichier.In PowerApps Studio, click or tap New on the File menu.

  4. Sur la mosaïque Application vide, cliquez ou appuyez sur Mode téléphone.On the Blank app tile, click or tap Phone layout.

    Nouvelle option dans le menu File

  5. Ajoutez une connexion à la table FlooringEstimates dans le fichier Excel.Add a connection to the FlooringEstimates table in the Excel file.

    Pour plus d’informations, consultez Ajouter une connexion.For more information, see Add a connection.

  1. Sous l’onglet Insérer, cliquez ou appuyez sur Gallery, puis cliquez ou appuyez sur Flexible height.On the Insert tab, click or tap Gallery, and then click or tap Flexible height.

    Ajouter une galerie

  2. Redimensionnez la galerie de façon à ce qu’elle occupe tout l’écran.Resize the gallery to take up the entire screen.

  3. Définissez la propriété Items de la galerie sur FlooringEstimates.Set the gallery's Items property to FlooringEstimates.

Afficher le nom des produitsShow the product names

  1. Dans le coin supérieur gauche de la galerie, appuyez ou cliquez sur l’icône en forme de crayon pour sélectionner le modèle de galerie.In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    Icône en forme de crayon

  2. Avec le modèle de galerie sélectionné, ajoutez-y un contrôle Label.With the gallery template selected, add a Label control to it.

  3. Définissez la propriété Text du contrôle Label sur l’expression suivante :Set the Text property of the Label control to this expression:
    ThisItem.NameThisItem.Name

    Ajouter une étiquette

Afficher la présentation des produitsShow the product overviews

  1. Avec le modèle de galerie sélectionné, ajoutez un autre contrôle Label et déplacez-le sous le premier contrôle Label.With the gallery template selected, add another Label control, and move it below the first Label control.

  2. Définissez la propriété Text du deuxième contrôle Label sur cette expression :Set the Text property of the second Label control to this expression:
    ThisItem.OverviewThisItem.Overview

  3. Avec le second contrôle Label sélectionné, cliquez ou appuyez sur l’icône de balise de nom sous l’onglet Contenu et renommez le contrôle OverviewText.With the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    Renommer l’étiquette

  4. Définissez la propriété AutoHeight de la zone OverviewText sur true.Set the AutoHeight property of the OverviewText box to true.

    Cette étape garantit que la zone s’adapte à son contenu.This step ensures that the box will grow or shrink to fit its contents.

    Hauteur de texte automatique

Afficher les images de produitsShow the product images

  1. Redimensionnez le modèle afin qu’il soit deux fois plus haut.Resize the template so that it's twice as tall as it was.

    Vous pouvez ajouter des contrôles au modèle plus facilement à mesure que vous générez l’application et cette modification n’affecte pas l’aspect de l’application lorsque celle-ci s’exécute.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. Avec le modèle de galerie sélectionné, ajoutez un contrôle Image et déplacez-le sous la zone OverviewText.With the gallery template selected, add an Image control, and move it below the OverviewText box.

  3. Veillez à définir la propriété Image du contrôle Image sur l’expression suivante :Ensure that the Image property of the Image control is set to this expression:
    ThisItem.ImageThisItem.Image

  4. Définissez la propriété Y du contrôle Image en fonction de la position et de la taille de la zone OverviewText, comme dans cette expression :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

    Application finale

Appliquez le même concept si vous souhaitez ajouter d’autres contrôles : définissez la propriété Y de chaque contrôle en fonction des propriétés Y et Height du contrôle situé au-dessus.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.

Étapes suivantesNext steps

Apprenez-en davantage sur l’utilisation d’un contrôle galerie et des formules.Learn more about how to work with a gallery control and formulas.