Edit

Show items of different heights in a canvas app gallery

If different items in your data set contain different amounts of data in the same field, you can display items that contain more data without adding extra empty space after items with 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 below the control above it.

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

Dynamic app.

Note

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

Add data to a blank app

  1. Download this Excel file, which contains names, overviews, and image links for flooring products.

  2. Upload the Excel file to a cloud-storage account such as OneDrive, SharePoint, 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 data connection.

  1. On the Insert tab, select Gallery > Flexible height.

    Add gallery.

  2. Resize the gallery to fill 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, select the pencil icon to enter template editing mode.

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

  3. Set the Text property of the Label control to:

    ThisItem.Name

Show the product overviews

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

  2. Set the Text property of the second Label to:

    ThisItem.Overview

  3. With the second Label selected, rename it to OverviewText using the name-tag icon on the Content tab.

  4. Set the AutoHeight property of OverviewText to true.

    Tip

    Setting AutoHeight to true on a label causes it to grow or shrink to fit its content. This is the key to making the flexible height gallery work correctly—without it, all items render at the same fixed height.

Show the product images

  1. Make the template taller by dragging its bottom edge down to roughly double its current height.

    You can add controls to the template more easily as you build the app. This change doesn't affect how the app looks when it runs.

  2. With the gallery template selected, add an Image control and position it below the OverviewText label.

  3. Confirm that the Image property of the Image control is set to:

    ThisItem.Image

  4. Set the Y property of the Image control to position it dynamically below the overview text:

    OverviewText.Y + OverviewText.Height + 5

    Final app.

    Apply the same concept for any additional controls: set each control's Y property based on the Y and Height of the control immediately above it.

Next steps

  • Last updated on