PowerApps galerisinde farklı yüksekliklerdeki öğeleri göstermeShow items of different heights in a PowerApps gallery

Veri kümenizdeki öğelerin aynı alanda gösterdiği veri miktarı farklıysa daha az veri içeren öğelerden sonra boş alan eklemeye gerek kalmadan daha fazla veri içeren öğelerin tamamını gösterebilirsiniz.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. Esnek yükseklik galerisi ekleyip yapılandırarak aşağıdakileri gerçekleştirebilirsiniz:Add and configure a Flexible height gallery control so that you can:

  • Etiket denetimlerini içeriklerine göre genişletme veya daraltma.Configure Label controls to expand or shrink based on their contents.
  • Her denetimi hemen üzerindeki denetimin tam altında olacak şekilde otomatik olarak konumlandırma.Position each control so that it automatically appears just under the control above it.

Bu öğreticide, bir Esnek yükseklik galeri denetiminde zemin kaplama malzemeleri hakkında veriler görüntüleyeceksiniz.In this tutorial, you show data about flooring products in a Flexible height gallery control. Her bir ürüne ilişkin görüntü, genel bilgilerin verildiği bölümün beş satırlık veya iki satırlık metin içermesi fark etmeksizin bu bölümün 5 piksel altında görünür.The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.

Uygulamanın son hali

Önerilen makalelerSuggested reading

Daha önce bir galeriye denetim eklemediyseniz bu konu başlığında ilerlemeden önce Öğe listesi gösterme makalesindeki adımları uygulayın.If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.

Boş uygulamaya veri eklemeAdd data to a blank app

  1. Zemin kaplama malzemesi adlarını, malzemelere ilişkin genel bilgileri ve görüntü bağlantılarını içeren bu Excel dosyasını indirin.Download this Excel file, which contains names, overviews, and links to images of flooring products.

    Zemin kaplama malzemeleri

  2. Excel dosyasını OneDrive, Dropbox veya Google Drive gibi bir bulut depolama hesabına yükleyin.Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.

  3. PowerApps Studio'da, Dosya menüsündeki Yeni'ye tıklayın veya dokunun.In PowerApps Studio, click or tap New on the File menu.

  4. Boş uygulama kutucuğunda Telefon düzeni'ne tıklayın veya dokunun.On the Blank app tile, click or tap Phone layout.

    Dosya menüsündeki Yeni seçeneği

  5. Excel dosyasındaki FlooringEstimates tablosuna bağlantı ekleyin.Add a connection to the FlooringEstimates table in the Excel file.

    Daha fazla bilgi için bkz. Bağlantı ekleme.For more information, see Add a connection.

  1. Ekle sekmesinde, Galeri'ye ve ardından Esnek yükseklik'e tıklayın veya dokunun.On the Insert tab, click or tap Gallery, and then click or tap Flexible height.

    Galeri ekleme

  2. Galeriyi ekranın tamamını kaplayacak şekilde yeniden boyutlandırın.Resize the gallery to take up the entire screen.

  3. Galerinin Items özelliğini FlooringEstimates olarak belirleyin.Set the gallery's Items property to FlooringEstimates.

Ürün adlarını görüntülemeShow the product names

  1. Galerinin sol üst köşesinde bulunan kalem simgesine tıklayarak veya dokunarak galeri şablonunu seçin.In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    Kalem simgesi

  2. Galeri şablonunu seçtikten sonra şablona bir Etiket denetimi ekleyin.With the gallery template selected, add a Label control to it.

  3. Etiket denetiminin Text özelliğini şu ifade olarak ayarlayın:Set the Text property of the Label control to this expression:
    ThisItem.NameThisItem.Name

    Etiket ekleme

Ürün bilgilerini göstermeShow the product overviews

  1. Galeri şablonu seçili durumdayken yeni bir Etiket denetimi ekleyin ve ilk Etiket denetiminin altına taşıyın.With the gallery template selected, add another Label control, and move it below the first Label control.

  2. İkinci Etiket denetiminin Text özelliğini şu ifade olarak ayarlayın:Set the Text property of the second Label control to this expression:
    ThisItem.OverviewThisItem.Overview

  3. İkinci Etiket denetimi seçili durumdayken İçerik sekmesindeki ad etiketi simgesine tıklayın veya dokunun ve denetimi OverviewText olarak yeniden adlandırın.With the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    Etiketi yeniden adlandırma

  4. OverviewText kutusunun AutoHeight özelliğini true olarak ayarlayın.Set the AutoHeight property of the OverviewText box to true.

    Bu adım kutunun, içerikleri sığacak şekilde büyümesini veya küçülmesini sağlar.This step ensures that the box will grow or shrink to fit its contents.

    Metne göre otomatik yükseklik

Ürün görüntülerini göstermeShow the product images

  1. Şablonu, uzunluğu öncekinin iki katı olacak şekilde yeniden boyutlandırın.Resize the template so that it's twice as tall as it was.

    Uygulamayı oluştururken şablona denetim eklemek daha kolaydır ve bu değişiklik, uygulamanın çalışma sırasında nasıl görüneceğini etkilemez.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. Galeri şablonu seçili durumdayken Görüntü denetimi ekleyin ve OverviewText kutusunun altına taşıyın.With the gallery template selected, add an Image control, and move it below the OverviewText box.

  3. Görüntü denetiminin Image özelliğinin şu ifade olarak ayarlandığından emin olun:Ensure that the Image property of the Image control is set to this expression:
    ThisItem.ImageThisItem.Image

  4. Görüntü denetiminin Y özelliğini şu ifadede gösterildiği şekilde OverviewText kutusunun konumuna ve boyutuna göre ayarlayın: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

    Uygulamanın son hali

Eklemek istediğiniz diğer denetimlere de aynı işlemleri uygulayın. Her bir denetimin Y özelliğini, üzerindeki denetimin Y ve Height özelliklerine göre ayarlayın.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.

Sonraki adımlarNext steps

Galeri denetimi ve formüllerle çalışma hakkında daha fazla bilgi edinin.Learn more about how to work with a gallery control and formulas.