Anzeigen von Elementen unterschiedlicher Höhe in einem PowerApps-KatalogShow items of different heights in a PowerApps gallery

Wenn verschiedene Elemente in einem Dataset unterschiedliche Mengen von Daten in demselben Feld enthalten, können Sie Elemente, die mehr Daten enthalten, vollständig anzeigen, ohne nach Elementen, die weniger Daten enthalten, einen leeren Bereich hinzuzufügen.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. Fügen Sie einen Katalog mit flexibler Höhe hinzu, und konfigurieren Sie ihn. Dies bietet Ihnen folgende Möglichkeiten:Add and configure a Flexible height gallery control so that you can:

  • Konfigurieren von Label-Steuerelementen (Bezeichnung), um eine Anpassung an die Größe des Inhalts zu ermöglichen.Configure Label controls to expand or shrink based on their contents.
  • Positionieren der einzelnen Steuerelemente, sodass sie automatisch untereinander angezeigt werden.Position each control so that it automatically appears just under the control above it.

In diesem Tutorial zeigen Sie Daten zu Bodenbelägen in einem Katalogsteuerelement vom Typ Flexible Höhe an.In this tutorial, you show data about flooring products in a Flexible height gallery control. Das Bild jedes Produkts wird 5 Pixel unterhalb der Übersicht angezeigt, unabhängig davon, ob die Übersicht fünf Textzeilen oder zwei Textzeilen enthält.The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.

Fertiggestellte App

Empfohlene LektüreSuggested reading

Wenn Sie noch niemals einem Katalog Steuerelemente hinzugefügt haben, führen Sie die Schritte in Anzeigen einer Liste mit Elementen aus, bevor Sie mit diesem Thema fortfahren.If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.

Hinzufügen von Daten zu einer leeren AppAdd data to a blank app

  1. Laden Sie diese Excel-Datei herunter, die Namen, Übersichten und Links zu Bildern von Bodenbelägen enthält.Download this Excel file, which contains names, overviews, and links to images of flooring products.

    Bodenbeläge

  2. Laden Sie die Excel-Datei in ein Cloudspeicherkonto hoch, z.B. in OneDrive, Dropbox oder Google Drive.Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.

  3. Klicken oder tippen Sie in PowerApps Studio im Menü Datei auf Neu.In PowerApps Studio, click or tap New on the File menu.

  4. Klicken oder tippen Sie in der Kachel Leere App auf Telefonlayout.On the Blank app tile, click or tap Phone layout.

    Option „New“ im Menü „File“

  5. Fügen Sie eine Verbindung mit der FlooringEstimates-Tabelle in der Excel-Datei hinzu.Add a connection to the FlooringEstimates table in the Excel file.

    Weitere Informationen finden Sie unter Hinzufügen einer Datenverbindung.For more information, see Add a connection.

  1. Klicken oder tippen Sie auf der Registerkarte Einfügen auf Katalog, und klicken oder tippen Sie dann auf Flexible Höhe.On the Insert tab, click or tap Gallery, and then click or tap Flexible height.

    Hinzufügen des Katalogs

  2. Ändern Sie die Größe des Katalogs, sodass er den gesamten Bildschirm ausfüllt.Resize the gallery to take up the entire screen.

  3. Legen Sie die Items-Eigenschaft des Katalogs auf FlooringEstimates fest.Set the gallery's Items property to FlooringEstimates.

Anzeigen der ProduktnamenShow the product names

  1. Klicken oder tippen Sie in der oberen linken Ecke des Katalogs auf das Stiftsymbol, um die Katalogvorlage auszuwählen.In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    Stiftsymbol

  2. Fügen Sie der ausgewählten Katalogvorlage ein Label -Steuerelement hinzu.With the gallery template selected, add a Label control to it.

  3. Legen Sie die Text-Eigenschaft des Label-Steuerelements auf den folgenden Ausdruck fest:Set the Text property of the Label control to this expression:
    ThisItem.NameThisItem.Name

    Bezeichnung hinzufügen

Anzeigen der ProduktübersichtenShow the product overviews

  1. Fügen Sie der ausgewählten Katalogvorlage ein weiteres Label-Steuerelement hinzu, und verschieben Sie es unter das erste Label-Steuerelement.With the gallery template selected, add another Label control, and move it below the first Label control.

  2. Legen Sie die Text-Eigenschaft des zweiten Label-Steuerelements auf den folgenden Ausdruck fest:Set the Text property of the second Label control to this expression:
    ThisItem.OverviewThisItem.Overview

  3. Wählen Sie das zweite Label-Steuerelement aus, klicken oder tippen Sie auf das Namensschildsymbol auf der Registerkarte Inhalt, und benennen Sie das Steuerelement in OverviewText um.With the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    Umbenennen der Bezeichnung

  4. Legen Sie die AutoHeight-Eigenschaft des OverviewText-Felds auf true fest.Set the AutoHeight property of the OverviewText box to true.

    Dadurch wird sichergestellt, dass die Größe des Felds an seinen Inhalt angepasst wird.This step ensures that the box will grow or shrink to fit its contents.

    Automatische Texthöhe

Anzeigen der ProduktbilderShow the product images

  1. Verdoppeln Sie die Größe der Vorlage.Resize the template so that it's twice as tall as it was.

    Sie können der Vorlage beim Erstellen der App leichter Steuerelemente hinzufügen, und diese Änderung hat keine Auswirkung auf das Aussehen der App während ihrer Ausführung.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. Fügen Sie der ausgewählten Katalogvorlage ein Bild-Steuerelement hinzu, und verschieben Sie es unter das Feld OverviewText.With the gallery template selected, add an Image control, and move it below the OverviewText box.

  3. Stellen Sie sicher, dass die Image-Eigenschaft des Bild-Steuerelements auf den folgenden Ausdruck festgelegt ist:Ensure that the Image property of the Image control is set to this expression:
    ThisItem.ImageThisItem.Image

  4. Legen Sie die Y-Eigenschaft des Bild-Steuerelements entsprechend der Position und Größe des Felds OverviewText fest, wie in dem folgenden Ausdruck: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

    Fertiggestellte App

Wenden Sie das gleiche Konzept an, wenn Sie weitere Steuerelemente hinzufügen möchten: Legen Sie die Y-Eigenschaft jedes Steuerelements auf Grundlage der Y-Eigenschaft und Height-Eigenschaft des über ihm angeordneten Steuerelements fest.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.

Nächste SchritteNext steps

Weitere Informationen zum Arbeiten mit einem Katalog-Steuerelement und Formeln.Learn more about how to work with a gallery control and formulas.