Show items of different heights in canvas apps gallery

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. Add and configure a Flexible height gallery control so that you can:

  • Configure Label controls to expand or shrink based on their contents.
  • Position each control so that it automatically appears just under the control above it.

In this tutorial, you show data about flooring products in a Flexible height gallery control. The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.

Dynamic app.

Suggested reading

If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.

Add data to a blank app

  1. Download this Excel file, which contains names, overviews, and links to images of flooring products.

    Flooring products.

  2. Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.

  3. Create a blank app with Phone layout.

  4. Add a connection to the FlooringEstimates table in the Excel file.

    For more information, see Add a connection.

  1. On the Insert tab, click or tap Gallery, and then click or tap Flexible height.

    Add gallery.

  2. Resize the gallery to take up the entire screen.

  3. Set the gallery's Items property to FlooringEstimates.

Show the product names

  1. In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    Pencil icon.

  2. With the gallery template selected, add a Label control to it.

  3. Set the Text property of the Label control to this expression:
    ThisItem.Name

    Add label.

Show the product overviews

  1. With the gallery template selected, add another Label control, and move it below the first Label control.

  2. Set the Text property of the second Label control to this expression:
    ThisItem.Overview

  3. With the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    Rename label.

  4. Set the AutoHeight property of the OverviewText box to true.

    This step ensures that the box will grow or shrink to fit its contents.

    Text auto height.

Show the product images

  1. Resize the template so that it's twice as tall as it was.

    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. With the gallery template selected, add an Image control, and move it below the OverviewText box.

  3. Ensure that the Image property of the Image control is set to this expression:
    ThisItem.Image

  4. 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 + 5

    Final app.

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.

Next steps

Learn more about how to work with a gallery control and formulas.