Elemente unterschiedlicher Höhe in einer Canvas-App-Galerie anzeigen

Wenn unterschiedliche Elemente in Ihrem Dataset unterschiedliche Datenmengen im selben Feld enthalten, können Sie Elemente anzeigen, die mehr Daten enthalten, ohne zusätzlichen Leerraum nach Elementen mit weniger Daten hinzuzufügen. Fügen Sie ein Flexible-Höhe-Galerie-Steuerelement hinzu und konfigurieren Sie es, damit Sie folgende Aktionen ausführen können:

• Konfigurieren Sie Label-Steuerelemente so, dass sie je nach ihrem Inhalt erweitert oder verkleinert werden.
• Positionieren Sie jedes Steuerelement so, dass es automatisch direkt unterhalb des steuerelements darüber angezeigt wird.

In diesem Artikel zeigen Sie Daten zu Bodenbelägen in einem Galeriesteuerelement mit flexibler Höhe an. Das Bild jedes Produkts wird 5 Pixel unterhalb des Übersichtstexts angezeigt, unabhängig davon, ob es sich bei dieser Übersicht um zwei oder fünf Zeilen handelt.

Hinzufügen von Daten zu einer leeren App

1. Laden Sie diese Excel datei herunter, die Namen, Übersichten und Bildlinks für Bodenbodenprodukte enthält.

2. Laden Sie die Excel Datei in ein Cloudspeicherkonto hoch, z. B. OneDrive, SharePoint, Dropbox oder Google Drive.

3. Erstellen Sie eine leere App mit dem Telefonlayout .

4. Fügen Sie eine Verbindung zur Tabelle "FlooringEstimates " in der Excel-Datei hinzu.

   Weitere Informationen finden Sie unter Hinzufügen einer Datenverbindung.

Hinzufügen von Daten zu einem Katalog

1. Wählen Sie auf der Registerkarte Einfügen die Option Galerie>Flexible Höhe aus.

   

2. Ändern Sie die Größe der Galerie, um den gesamten Bildschirm zu füllen.

3. Legen Sie die Items-Eigenschaft der Galerie auf FlooringEstimates fest.

Anzeigen der Produktnamen

1. Wählen Sie in der oberen linken Ecke des Katalogs das Stiftsymbol aus, um in den Bearbeitungsmodus der Vorlage zu gelangen.

2. Wenn die Galerievorlage ausgewählt ist, fügen Sie ein Label-Steuerelement hinzu.

3. Legen Sie die Text-Eigenschaft des Label-Steuerelements auf Folgendes fest:

   ThisItem.Name
   

Anzeigen der Produktübersichten

1. Fügen Sie der ausgewählten Katalogvorlage ein zweites Steuerelement Beschriftung hinzu, und verschieben Sie es unter das erste.

2. Legen Sie die Text-Eigenschaft der zweiten Beschriftung auf Folgendes fest:

   ThisItem.Overview
   

3. Wenn die zweite Bezeichnung ausgewählt ist, benennen Sie sie mithilfe des Namenstagsymbols auf der Registerkarte "Inhalt" in "OverviewText" um.

4. Legen Sie die AutoHeight-Eigenschaft von OverviewText auf "true" fest.

   Tip

   Wenn AutoHeight für eine Beschriftung auf true festgelegt wird, vergrößert oder verkleinert sie sich, damit sie zu ihrem Inhalt passt. Dies ist der Schlüssel, damit die Galerie mit flexibler Höhe korrekt funktioniert – ohne ihn werden alle Elemente in derselben festen Höhe dargestellt.

Anzeigen der Produktbilder

1. Vergrößern Sie die Vorlage, indem Sie die untere Kante nach unten ziehen, um die aktuelle Höhe ungefähr zu verdoppeln.

   Sie können der Vorlage steuerelemente einfacher hinzufügen, während Sie die App erstellen. Diese Änderung wirkt sich nicht darauf aus, wie die App aussieht, wenn sie ausgeführt wird.

2. Wenn die Katalogvorlage ausgewählt ist, fügen Sie ein Bildsteuerelement hinzu, und positionieren Sie es unter der Bezeichnung "OverviewText" .

3. Vergewissern Sie sich, dass die Image-Eigenschaft des Bild-Steuerelements auf Folgendes festgelegt ist:

   ThisItem.Image
   

4. Legen Sie die Y-Eigenschaft des Bildsteuerelements fest, um sie dynamisch unter dem Übersichtstext zu positionieren:

   OverviewText.Y + OverviewText.Height + 5
   

   

   Wenden Sie das gleiche Konzept für alle zusätzlichen Steuerelemente an: Legen Sie die Y-Eigenschaft jedes Steuerelements basierend auf der Y - und Höhe des Steuerelements fest, das unmittelbar darüber liegt.

Nächste Schritte

• Galeriesteuerelement hinzufügen und konfigurieren
• Bewährte Methoden für die Arbeit mit Galerien
• Erste Schritte mit Canvas-App-Formeln