Microsoft PowerApps'te veri formu düzenini anlamaUnderstand data-form layout in Microsoft PowerApps

PowerApps'te kolayca dikkat çekici ve verimli formlar oluşturabilirsiniz.In PowerApps, you can easily create forms that are attractive and efficient to use. Örneğin, satış siparişlerini kaydetmeye yönelik şu basit forma göz atın:For example, consider this basic form for recording sales orders:

Örnek satış siparişi

Bu öğreticide, bu formu oluşturmaya ilişkin adımları ele alacağız.In this tutorial, we'll walk through the steps to create this form. Ayrıca, alanların kullanılabilir alanı dolduracak şekilde dinamik olarak boyutlandırılması gibi bazı ileri düzey konu başlıklarına da göz atacağız.We'll also look at some advanced topics, such as dynamic sizing of fields to fill available space.

Başlamadan önceBefore you start

PowerApps'i kullanmaya yeni başladıysanız (veya yalnızca otomatik olarak uygulama oluşturduysanız) bu konu başlığındaki ayrıntılı bilgilere geçmeden önce sıfırdan uygulama oluşturmak isteyebilirsiniz.If you're new to PowerApps (or have only generated apps automatically), you'll want to build an app from scratch before you dive into this topic. Sıfırdan uygulama oluşturduğunuzda gerekli kavramlar (veri kaynağı ve denetim ekleme gibi) hakkında bilgi sahibi olursunuz. Bu konu başlığında bu tür kavramlardan bahsedilmektedir ancak bunlarla ilgili bir açıklamaya yer verilmemiştir.By building an app from scratch, you'll become familiar with required concepts, such as adding data sources and controls, that are mentioned but not explained in this topic.

  1. Sıfırdan bir tablet uygulaması oluşturun.Create a tablet app from scratch.

    Bu konu başlığında ele aldığımız her şey telefon düzenleri için de geçerlidir ancak telefon uygulamalarında genellikle yalnızca bir dikey sütun mevcuttur.Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. Common Data Service'teki Satış siparişi varlığını uygulamaya veri kaynağı olarak ekleyin.Add the Sales order entity in the Common Data Service as a data source for the app.

    Bu öğreticinin dışında, SharePoint listeleri ve Excel tabloları gibi diğer tüm veri kaynaklarını kullanabilirsiniz.Outside of this tutorial, you can use any data source, including SharePoint lists and Excel tables.

  3. Dikey bir Galeri denetimi ekleyin ve Items özelliğini 'Satış siparişi' olarak ayarlayın.Add a vertical Gallery control, and set its Items property to 'Sales order'.

    (isteğe bağlı) Bu öğreticideki örneklerle eşleşmesi için galerinin Düzen seçeneğini yalnızca Başlık ve alt başlık gösterilecek şekilde ayarlayın.(optional) To match the examples in this tutorial, change the gallery's Layout to show only Title and subtitle.

    Satış siparişi listesi

  4. Galeride SO004 öğesine tıklayın veya dokunun.In the gallery, click or tap SO004.

    Satış siparişi listesi

    Bu kayıt, bu konu başlığının sonraki kısmında bulunan adımları uygulayarak oluşturacağınız formda görünecek.This record will appear in the form that you build by following steps later in this topic.

Başlık çubuğu eklemeAdd a title bar

  1. Formu yerleştireceğiniz boş bir ekran ekleyin.Add a blank screen where you'll put the form.

    Bu öğreticinin dışında, Galeri ve Düzenleme formu denetimlerini aynı ekrana ekleyebilirsiniz ancak bunları ayrı ekranlara yerleştirdiğinizde daha fazla çalışma alanı elde edersiniz.Outside of this tutorial, you can put the Gallery and Edit form controls on the same screen, but you'll have more room to work with if you put them on separate screens.

  2. Yeni ekranın üst kısmına bir Etiket denetimi ekleyin ve Text özelliğini şu ifade olarak ayarlayın:At the top of the new screen, add a Label control, and set its Text property to this expression:
    "Sales Order " & Gallery1.Selected.SalesOrderId"Sales Order " & Gallery1.Selected.SalesOrderId

    Etikette, galeride seçmiş olduğunuz kaydın satış siparişi numarası gösterilir.The label shows the sales-order number of the record that you selected in the gallery.

  3. (isteğe bağlı) Etiketi aşağıdaki gibi biçimlendirin:(optional) Format the label as follows:

    1. Align özelliğini Center olarak ayarlayın.Set its Align property to Center.

    2. Size özelliğini 20 olarak ayarlayın.Set its Size property to 20.

    3. Fill özelliğini Navy olarak ayarlayın.Set its Fill property to Navy.

    4. Color özelliğini White olarak ayarlayın.Set its Color property to White.

    5. Width özelliğini Parent.Width olarak ayarlayın.Set its Width property to Parent.Width.

    6. X ve Y özelliklerini 0 olarak ayarlayın.Set its X and Y properties to 0.

      Başlık çubuğu

Form eklemeAdd a form

  1. Düzenleme formu denetimi ekleyin, ardından bu denetimi etiketin altında olacak ve ekranı dolduracak şekilde taşıyıp yeniden boyutlandırın.Add an Edit form control, and then move and resize it to fill the screen under the label.

    Bir sonraki adımda, sağ bölmeyi (formül çubuğunu değil) kullanarak form denetimini Satış siparişi veri kaynağına bağlayacaksınız.In the next step, you'll connect the form control to the Sales order data source by using the right-hand pane, not the formula bar. Formül çubuğunu kullanırsanız formda varsayılan olarak herhangi bir alan gösterilmez.If you use the formula bar, the form won't show any fields by default. Sağ bölmede bir veya daha fazla onay kutusunu işaretleyerek istediğiniz alanları her zaman gösterebilirsiniz.You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  2. Sağ bölmede, Veri kaynağı seçilmedi ifadesinin yanında bulunan aşağı oka ve ardından Satış siparişi'ne tıklayın veya dokunun.In the right-hand pane, click or tap the down arrow next to No data source selected, and then click or tap Sales order.

    Satış siparişi veri kaynağındaki bir varsayılan alan kümesi basit, üç sütunlu bir düzende görüntülenir.A default set of fields from the Sales order data source will appear in a simple, three-column layout. Bu alanların çoğu boştur ve son hallerini almaları birkaç dakika sürebilir.However, many are blank, and they may take a few moments to settle into their final positions.

  3. Formun Item özelliğini Gallery1.Selected olarak ayarlayın.Set the form's Item property to Gallery1.Selected.

    Formda, galeride seçmiş olduğunuz kayıt gösterilir ancak varsayılan alan kümesi, nihai ürününüzde görmek istediklerinizle eşleşmeyebilir.The form shows the record that you selected in the gallery, but the default set of fields might not match what you want in your final product.

  4. Sağ bölmede, onay kutularını temizleyerek şu alanların her birini gizleyin:In the right-hand pane, hide each of these fields by clearing its checkbox:

    • Satış siparişi koduSales order ID
    • HesapAccount
    • Satış temsilcisiSales person
    • Hesap ilgili kişisiAccount contact
  5. Sipariş durumu alanını sola sürükleyip Müşteri satınalma siparişi referansı alanının diğer tarafına bırakarak taşıyın.Move the Order status field by dragging it to the left and then dropping it on the other side of the Customer purchase order reference field.

    Ekranınız şu örnekteki gibi olmalıdır:Your screen should resemble this example:

    Basit, üç sütunlu bir düzende satış siparişi formu

Veri kartı seçmeSelect a data card

Görüntülenen her bir alanın, formda kendisine karşılık gelen bir veri kartı vardır.Each field displayed has a corresponding data card on the form. Bu kart; alan başlığı için bir dizi denetimin yanı sıra bir giriş kutusu, yıldız (alan gerekliyse görünür) ve doğrulama hata iletisi içerir.This card comprises a set of controls for the field title, an input box, a star (which appears if the field is required), and a validation error message.

Ayrıca doğrudan formdan da kart seçebilirsiniz.You can also select cards directly on the form. Bir kart seçildiğinde üzerinde siyah bir açıklama yazısı görünür.When a card is selected, a black caption appears above it.

Veri kartı seçimi

Not

Bir kartı silmek için (sadece gizlemek değil) kartı seçin ve Sil'e basın.To delete a card (not just hide it), select it, and then press Delete.

Kartları sütunlar halinde düzenlemeArrange cards in columns

Varsayılan olarak, tablet uygulamalarındaki formlar üç sütun içerirken telefon uygulamalarındaki formlar bir sütun içerir.By default, forms in tablet apps have three columns, and those in phone apps have one. Bir formun kaç sütun içereceğinin yanı sıra tüm kartların sütun kenarlıklarına uyum sağlayıp sağlamayacağını da belirtebilirsiniz.You can specify not only how many columns a form has but also whether all cards should fit within column borders.

Aşağıdaki grafikte, formdaki sütun sayısı üç iken dört olarak değiştirilmiştir, Sütunlara yasla onay kutusu ise seçili durumdadır.In this graphic, the number of columns in the form was changed from three to four with the Snap to columns check box selected. Formdaki kartlar yeni düzene uyum sağlayacak şekilde otomatik olarak düzenlenmiştir.The cards in the form were arranged automatically to fit the new layout.

Basit bir dört sütunlu düzende satış siparişi formu

Kartları birden fazla sütunda yeniden boyutlandırmaResize cards across multiple columns

Her bir karttaki verilere bağlı olarak bazı kartların tek bir sütuna sığmasını, bazı sütunların ise birden fazla sütuna yayılmasını isteyebilirsiniz.Depending on the data in each card, you might want some cards to fit in a single column and other cards to span multiple columns. Bir kart tek sütunda göstermek istediğinizden daha fazla veri içeriyorsa kartı seçtikten sonra seçim kutusunun sol veya sağ kenarlığı üzerinde bulunan tutamacı sürükleyerek kartı genişletebilirsiniz.If a card contains more data than you want to show in a single column, you can widen the card by selecting it and then dragging the grab handle on the left or right border of its selection box. Siz tutamacı sürükledikçe kart, sütun sınırlarına "yaslanır".As you drag the handle, the card will "snap" to column boundaries.

Bir yandan yapıyı koruyup diğer yandan tasarımınızı daha esnek hale getirmek için sütun sayısını 12'ye çıkarabilirsiniz.To make your design more flexible but retain some structure, you can increase the number of columns to 12. Bu değişikliğin ardından her bir kartı formun tamamına, yarısına, üçte birine, dörtte birine, altıda birine ve başka orana sahip bir alanına yayılacak şekilde yapılandırabilirsiniz.With that change, you can easily configure each card to span the entire form, half of the form, one-third, one-quarter, one-sixth, and so forth. Bunu uygulamalı olarak görelim.Let's see this in action.

  1. Sağ bölmede, formdaki sütun sayısını 12 olarak ayarlayın.In the right-hand pane, set the number of columns in the form to 12.

    Sütun sayısını belirtme

    Form görünüşte değişmez ancak sol veya sağ tutamacı sürüklediğinizde daha fazla yaslama noktanız olur.The form doesn't visibly change, but you have more snap points as you drag the left or right grab handle.

  2. Sipariş tarihi kartının sağ tutamacını bir yaslama noktası kadar sağa sürükleyerek kartın genişliğini artırın.Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    Kart, formun 12 sütunundan üçü (veya 1/4'ü) yerine dördüne (ya da formun 1/3'üne) yayılır.The card spans four of the form's 12 columns (or 1/3 of the form), instead of only three of the form's 12 columns (or 1/4 of the form). Bir kartın genişliğini bir yaslama noktası kadar artırdığınızda söz konusu kart formda 1/12'lik bir ek alana yayılır.Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    Sürükleyip bırakarak bir kartı yeniden boyutlandırma

  3. Sipariş durumu ve Müşteri satınalma siparişi referansı kartlarında uyguladığınız adımları yineleyin.Repeat the previous step with the Order status and Customer purchase order reference cards.

    İlk satırdaki üç kart

  4. Ad ve Açıklama kartlarını formun en fazla altı sütununu (veya 1/2'sini) kaplayacak şekilde yeniden boyutlandırın.Resize the Name and Description cards to take up six columns (or 1/2) of the form.

  5. Teslimat adresinin ilk iki satırını formun tamamı boyunca uzatın:Make the first two lines of the delivery address stretch entirely across the form:

Hepsi bu kadar!All done. Satırları, farklı sayılarda sütunla karıştırarak istediğimiz formu elde ettik:We have our desired form, mixing rows with different numbers of columns:

Yeniden boyutlandırılarak 12 sütunluk düzende görüntülenen satış siparişi formu

Bir karttaki denetimleri düzenlemeManipulate controls in a card

Teslimat adresi, kullanıcı için görsel olarak birlikte gruplandırmak isteyeceğimiz bazı bilgiler içermektedir.The delivery address comprises several pieces of information that we want to visually group together for the user. Her alan kendi kartında kalır ancak karttaki denetimleri, birlikte daha uyumlu olacak şekilde düzenleyebilirsiniz.Each field will remain in its own data card, but we can manipulate the controls within the card to make them fit better together.

  1. Teslimat adresi adresinin ilk satırı kartını ve bu karttaki etiketi seçin, ardından metnin ilk üç sözcüğünü silin.Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    İlk satır etiketi yeniden adlandırılan satış siparişi teslimat adresi

  2. Teslimat adresi adresinin ikinci satırı kartını ve bu karttaki etiketi seçin, ardından metnin tamamını silin.Select the Second line of Delivery address card, select the label within that card, and then delete all of the text in it.

    Yalnızca etiket denetimini kaldırmak daha cazip gelebilir ve çoğu durumda işe de yarayacaktır.It may be tempting to simply remove the label control and, in many cases, that will work fine. Bununla birlikte, formüller için söz konusu denetimin mevcut olması gerekebilir.But formulas might depend on that control being present. Metni silmek veya denetimin Visible özelliğini false olarak ayarlamak daha güvenli bir yaklaşım olacaktır.The safer approach is to remove the text or to set the Visible property of the control to false.

    İkinci satır etiketi yeniden adlandırılan satış siparişi teslimat adresi

  3. Aynı kartta, adresin ilk ve ikinci satırı arasındaki alanı azaltmak için etiketin üzerindeki metin girişi kutusunu taşıyın.In the same card, move the text input box over the label to reduce the space between the first and second lines of the address.

    İçeriği daha az yer kapladığında kartın yüksekliği azalır.The height of the card shrinks when its contents take up less space.

    İkinci satır etiketi yeniden adlandırılan satış siparişi teslimat adresi

Adresin üçüncü satırına geçelim.Now let's turn our attention to the third line of the address. Yukarıda yaptığımız işleme benzer şekilde, bu kartların her birinin metnini kısaltıp Metin girişi kutusunu her etiketin sağında olacak şekilde ayarlayalım.Similar to what we just did, let's shorten the text of each label for these cards and arrange the Text input box to be to the right of each label. Eyalet kartına ilişkin adımlar aşağıda yer almaktadır:Here are the steps for the State card:

AdımStep AçıklamaDescription SonuçResult
11 Eyalet kartını seçtiğinizde kartın etrafında tutamaçlar görünür.Select the State card so that grab handles appear around it. Kart seçme
22 Bu karttaki etiketi seçtiğinizde etiketin etrafında tutamaçlar görünür.Select the label within this card so that grab handles appear around it. Bir karttaki denetimi seçme
33 İmleci metnin sağına yerleştirin ve ihtiyaç duymayacağımız kısmı silin.Place the cursor to the right of the text, and then delete the portion that we don't need. Bir karttaki denetimde bulunan metni değiştirme
44 Kenarlardaki tutamaçları kullanarak etiket denetimini, yeni metin boyutuna uyacak şekilde boyutlandırın.Using the grab handles on the sides, size the label control to fit the new text size. Bir karttaki denetimi yeniden boyutlandırma
55 Bu karttaki metin girişi denetimini seçin.Select the text input control within this card. Karttaki farklı bir denetimi seçme
66 Kenarlardaki tutamaçları kullanarak metin girişi denetimini, istediğiniz boyuta uygun şekilde boyutlandırın.Using the grab handles on the sides, size the text input control to the size that you want. Bir karttaki denetimi yeniden boyutlandırma
77 Metin girişi kutusunu, etiket denetiminin sağ üst kısmına sürükleyip bırakın.Drag the text input box up and to the right of the label control, and then drop the text input box. Bir karttaki denetimi taşıma
Eyalet kartında yapacağımız değişiklikler burada sona eriyor.Our modifications to the State card are now complete. Kartta yapılan değişiklikler tamamlandı

Üçüncü adres satırının tamamlanmış hali şu şekilde görünür:The result for the complete third address line:

Üçüncü satırı daha kısa olacak şekilde satış siparişi teslimat adresi

Kartların çoğu oluşturulurken özellikleri için dinamik formüllerin kullanıldığını unutmayın.Note that many of the cards start out with dynamic formulas for their properties. Örneğin, yeniden boyutlandırılan ve yukarı taşınan Metin girişi denetimi, üst öğesinin genişliğini temel alan bir Width özelliğine sahipti.For example, the Text input control that we resized and moved above had a Width property based on the width of its parent. Bir denetimi taşıdığınızda veya yeniden boyutlandırdığınızda söz konusu dinamik formüller, statik değerlerle değiştirilir.When you move or resize a control, these dynamic formulas are replaced with static values. İsterseniz formül çubuğunu kullanarak dinamik formülleri geri yükleyebilirsiniz.If you want, you can restore the dynamic formulas by using the formula bar.

Sütunlara yasla seçeneğini devre dışı bırakmaTurning off Snap to columns

Bazı durumlarda, standart 12 sütunun sağlayabileceğinden daha hassas bir denetime sahip olmak istersiniz.Sometimes you'll want finer control than the standard 12 columns can provide. Bu tür durumlar için Sütunlara yasla seçeneğini devre dışı bırakıp kartları elle konumlandırabilirsiniz.For these cases, you can turn off Snap to columns and then position cards manually. Form, içeriği 12 sütuna yaslamaya devam eder ancak Alt tuşunu basılı tutarak bir kartı elle dilediğiniz gibi konumlandırabilir ve boyutlandırabilirsiniz.The form will continue snapping to 12 columns, but you can also hold down the Alt key to manually position and size a card as you wish.

Bizim örneğimizde, adresin üçüncü satırını oluşturan dört bileşenin her biri tam olarak aynı genişliğe sahiptir.In our example, the four components that make up the third line of the address all have exactly the same width. Ancak, şehir adları eyalet kısaltmalarından daha fazla yer kaplayacağından ve ülkeler/bölgeler için kullanılan Metin girişi kutusu, etiketinin uzunluğu nedeniyle kısa olduğundan bunun en iyi düzen olduğunu söylenemez.But this may not be the best layout, as city names are longer than state abbreviations, and the Text input box for countries/regions is short due to the length of its label.

Bu alanı en iyi duruma getirmek için sağ bölmedeki Sütunlara yasla seçeneğini devre dışı bırakın, ardından Alt tuşunu basılı tutarak bu kartları boyutlandırın ve konumlandırın.To optimize this space, turn off Snap to columns in the right-hand pane and then hold down the Alt key while sizing and positioning these cards. Alt tuşunu her basılı tuttuğunuzda tüm denetimler için siyah açıklama yazıları gösterilir.Whenever you hold down the Alt key, all controls show black captions. Bu davranış, denetim adlarını görebilmeniz için tasarlanmıştır.This behavior is by design to show you control names.

ALT tuşu basılı tutularak konumlandırma ve boyutlandırma

Dikkatli şekilde yapılan konumlandırma işleminin ardından, her alan uygun boyuttadır ve hatta alanlar arasında yatay uzanan bir aralık mevcuttur:After careful positioning, the result has appropriate sizes for each field and even spacing horizontally between fields:

Üçüncü satırı tam olarak konumlandırılmış şekilde satış siparişi teslimat adresi

Kısaca ele almak gerekirse Sütunlara yasla seçeneğini etkinleştirme veya devre dışı bırakma arasında ne gibi farklar vardır?In summary, what are the differences when Snap to columns is on versus off?

DavranışBehavior Sütunlara yasla EtkinSnap to columns On Sütunlara yasla Devre DışıSnap to columns Off
Yaslamaları yeniden boyutlandırmaResize snaps to Seçebileceğiniz sütun sayısı:Number of columns you select:
1, 2, 3, 4, 6 veya 121, 2, 3, 4, 6, or 12
12 sütun12 columns
Yaslamayı yeniden boyutlandırma işleminin geçersiz kılınmasıResize snap can be overriden HayırNo Evet, Alt tuşu ile birlikteYes, with Alt key
Kartların, satırlar arasında yeniden düzenlenmesi (bu konuyu daha ayrıntılı olarak ele alacağız)Cards automatically re-layout between rows (more on this later) EvetYes HayırNo

Genişliği ve yüksekliği ayarlamaSet width and height

PowerApps'teki diğer her şeyde olduğu gibi formların düzeni de kart denetimlerindeki özellikler tarafından belirlenir.As with everything in PowerApps, the form's layout is governed by properties on the card controls. Daha önce de açıklandığı üzere, denetimleri farklı konumlara sürükleyerek veya yeniden boyutlandırmak için tutamaçları sürükleyerek bu özelliklerin değerlerini değiştirebilirsiniz.As already described, you can change the values of these properties by dragging controls to different locations or dragging grab handles to resize controls. Ancak, bu özellikleri daha net bir şekilde anlamak ve düzenlemek isteyeceğiniz (özellikle de formlarınızı formüllerle dinamik hale getirmek istediğinizde) durumlarla karşılaşacaksınız.But you'll discover situations in which you'll want to understand and manipulate these properties more precisely, especially when making your forms dynamic with formulas.

Temel Düzen: X, Y ve WidthBasic Layout: X, Y, and Width

X ve Y özellikleri, kartların konumunu denetler.The X and Y properties control the position of cards. Ham tuvalde denetimlerle çalıştığımızda bu özellikler konumu tam olarak belirtir.When we work with controls on the raw canvas, these properties provide an absolute position. Formlarda ise bu özellikler farklı anlamlar taşır:In a form, these properties have a different meaning:

  • X: Bir satırdaki sıra.X: Order within a row.
  • Y: Satır numarası.Y: Row number.

Tuvaldeki denetimlere benzer şekilde, Width özelliği kartın minimum genişliğini (daha çok bir andaki minimum en boy oranını) belirtir.Similar to controls on the canvas, the Width property specifies the minimum width of the card (more on the minimum aspect in a moment).

Formumuzdaki kartların X, Y ve Width özelliklerine göz atalım:Let's take a look at the X, Y, and Width properties of the cards in our form:

Satış siparişi formunun X ve Y koordinatları

Taşan satırlarOverflowing rows

Bir satırdaki kartlar satıra sığamayacak kadar genişse ne olur?What happens if the cards on a row are too wide to fit on that row? Normalde bu olasılık sizi endişelendirmemelidir.Normally you don't need to worry about this possibility. Sütunlara yasla seçeneği etkin olduğunda bu üç özellik, her şey satırlara taşma olmadan düzgün bir biçimde sığacak şekilde otomatik olarak ayarlanır.With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

Ancak Sütunlara yasla seçeneği devre dışı olduğunda veya kartlarınızın birinde ya da daha fazlasında formül tabanlı bir Width özelliği mevcut olduğunda satırlarda taşma meydana gelebilir.But with Snap to columns turned off or a formula-based Width on one or more of your cards, overflowing a row can happen. Böyle bir durumda kartlar otomatik olarak kaydırılır ve böylece başka bir satır oluşturulur.In this case, the cards will automatically wrap so that, effectively, another row is created. Örneğin, Müşteri satınalma siparişi referansı kartının (ilk satır, üçüncü öğe) Width özelliğini elle 500 olarak değiştirelim:For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 500:

Kart elle yeniden boyutlandırıldığında gerçekleşen, yeni bir satırda dinamik olarak düzenleme işlemi

Üst satırdaki üç kart artık yatay olarak sığmamaktadır ve taşma sonucunda kaydırma işleminin gerçekleşeceği başka bir satır oluşturulmuştur.The three cards on the top row no longer fit horizontally, and another row has been created to wrap the overflow. Bu kartların tümü için Y koordinatı hâlâ 0; Ad ve Açıklama kartlarının Y değeri ise hâlâ 1'dir.The Y coordinate for all these cards is still the same at 0, and the Name and Description cards still have a Y of 1. Y değerleri farklı olan kartlar satırlarda birleştirilmez.Cards that have different Y values aren't merged across rows.

Bu davranışı, kartların bir Z düzenine dayalı olarak yerleştirildiği ve bir sonraki satıra geçilmeden önce mevcut alanın mümkün olduğunca doldurulduğu tamamen dinamik bir düzen oluşturmak için kullanabilirsiniz.You can use this behavior to create a fully dynamic layout, where cards are placed based on a Z-order, filling across as much as possible before moving to the next row. Bu etkiyi elde etmek için tüm kartlara aynı Y değerini verin ve kartların sırası için X değerini kullanın.To achieve this effect, give all the cards the same Y value, and use X for the order of the cards.

Boşlukları doldurma: WidthFitFilling spaces: WidthFit

Son örnekteki taşma sonucunda, başlangıçta ilk satırdaki ikinci kart olan Sipariş durumu kartından sonra bir boşluk oluştu.The overflow in the last example created a space after the Order status card, which was the second card in the first row. Kalan iki kartın Width özelliğini bu boşluğu dolduracak şekilde elle ayarlayabilirdik ancak bu zorlayıcı bir yaklaşımdır.We could manually adjust the Width properties of the two remaining cards to fill this space, but this approach is tedious.

Bunun yerine WidthFit özelliğini kullanabilirsiniz.As an alternative, use the WidthFit property. Satırdaki bir veya daha fazla kart için bu özellik true olarak ayarlanırsa satırda kalan tüm boşluk söz konusu kartlar arasında eşit olarak dağıtılır.If this property is set to true for one or more cards in a row, any remaining space on the row will be evenly divided between them. Daha önce, bir kartın Width özelliği minimum olmasına rağmen gerçekte görünen alanın daha geniş olabileceğini belirttiğimizde bu davranışı kastetmiştik.This behavior is why we said earlier that the Width property of a card is a minimum, and what is actually seen can be wider. Bu özellik hiçbir zaman bir kartın küçülmesine neden olmaz, aksine yalnızca genişlemesini sağlar.This property will never cause a card to shrink, only expand.

Sipariş durumu kartında WidthFit özelliğini true olarak ayarlarsanız ilk kart değişmeden kalırken mevcut alan doldurulur:If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

İkinci kartta WidthFit özelliği true olarak ayarlanmıştır

Sipariş tarihi kartında da WidthFit özelliğini true olarak ayarlarsak mevcut alan her iki kart arasında eşit olarak bölünür:If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

WidthFit özelliği ilk ve ikinci kartta true olarak ayarlanmıştır

Bu kartlardaki tutamaçların, Width özelliği tarafından sağlanan minimum genişlik yerine WidthFit tarafından sağlanan fazladan genişliği hesaba kattığını unutmayın.Note that grab handles on these cards take into account the extra width provided by WidthFit, not the minimum width provided by the Width property. WidthFit özelliği etkinken Width özelliğini değiştirmek kafa karıştırıcı olabilir. Bu nedenle, Width özelliğinde değişiklik yapmak istediğinizde WidthFit özelliğini devre dışı bırakıp işleminizi tamamladıktan sonra tekrar etkinleştirebilirsiniz.It can be confusing to manipulate the Width property while WidthFit is turned on; you may want to turn it off, make changes to Width, and then turn it back on.

WidthFit hangi durumlarda kullanışlı olabilir?When might WidthFit be useful? Yalnızca belirli durumlarda kullanılan bir alanınız varsa Visible özelliğini false olarak ayarlayabilirsiniz. Böylece satırdaki diğer kartlar bu alanın etrafındaki boşluğu otomatik olarak doldurur.If you have a field that is used only in certain situations, you can set its Visible property to false, and the other cards on the row will automatically fill the space around it. Bir alanı yalnızca başka bir alan belirli değerlere sahip olduğunda gösterecek bir formül kullanmak isteyebilirsiniz.You might want to use a formula that shows a field only when another field has a particular value.

Bu örnekte, Sipariş durumu alanının Visible özelliğini statik bir false değeri olarak ayarlayacağız:Here, we'll set the Visible property of the Order status field to a static false:

Sipariş durumu görünmez durumdayken ilk kartta WidthFit true olarak ayarlanmıştır

İkinci kart kaldırıldığında üçüncü kart, ilk kartın bulunduğu satıra geri dönebilir.With the second card effectively removed, the third card can now return to the same row as the first card. İlk kartın WidthFit özelliği hâlâ true olduğundan bu kart genişleyerek mevcut alanı doldurur.The first card still has WidthFit set to true, so it alone expands to fill the available space.

Sipariş durumu görünmez olduğundan bu kartı tuvalde kolayca seçemezsiniz.Because Order status is invisible, you can't select it as easily on the canvas. Bununla birlikte, ekranın sol tarafındaki hiyerarşik denetim listesinden, görünür olsun ya da olmasın herhangi bir denetimi seçebilirsiniz.However, you can select any control, visible or not, in the hierarchical list of controls on the left side of the screen.

HeightHeight

Height özelliği her bir kartın yüksekliğini belirler.The Height property governs the height of each card. Kartların, Height için de WidthFit ile eş değer bir özelliği bulunur ve bu özelliğin değeri her zaman true'dur.Cards have the equivalent of WidthFit for Height, and it's always set to true. HeightFit özelliğinin de mevcut olduğunu varsayabilirsiniz; ancak henüz kullanıma sunulmadığından bu özelliği üründe bulmanız mümkün olmayacaktır.Imagine that a HeightFit property exists, but don't look for it in the product because such a property isn't yet exposed.

Bu davranışı devre dışı bırakamazsınız. Bu nedenle, kartların yüksekliklerini değiştirmek zor olabilir.You can't turn off this behavior, so changing the heights of cards can be challenging. Bir satırdaki tüm kartlar en uzun kartla aynı yükseklikte görünür.All cards within a row appear to be the same height as the tallest card. Aşağıdaki gibi bir satır görebilirsiniz:You might look at a row like this:

Sipariş durumu görünmez durumdayken ilk kartta WidthFit true olarak ayarlanmıştır

Bu satırın uzun görünmesini hangi kart sağlamaktadır?Which card is making the row tall? Önceki grafikte Toplam tutar kartı seçilidir ve bu kart uzun görünmektedir ancak kartın Height özelliği 80 (ilk satırın yüksekliğiyle aynı) olarak ayarlanmıştır.In the previous graphic, the Total amount card is selected and appears tall, but its Height property is set to 80 (same as the height of the first row). Bir satırın yüksekliğini azaltmak için söz konusu satırdaki en uzun kartın Height özelliğini azaltmanız gerekir ve her bir kartın Height özelliğine göz atmadan en uzun kartın hangisi olduğunu belirleyemezsiniz.To reduce the height of a row, you must reduce the Height of the tallest card in that row, and you can't identify the tallest card without reviewing the Height property of each card.

AutoHeightAutoHeight

Bir kart, AutoHeight özelliği true olarak ayarlanan bir denetim içermesi halinde de beklediğinizden uzun olabilir.A card might also be taller than you expect if it contains a control for which the AutoHeight property is set to true. Örneğin, birçok kart, alana girilen değerin doğrulama sorununa neden olması halinde gösterilecek hata iletisini görüntüleyen bir etiket içerir.For example, many cards contain a label that displays an error message if the field's value causes a validation problem.

Görüntülenecek herhangi bir metin olmadığında (hata olmaması) etiketin yükseklik değeri sıfıra düşer.Without any text to display (no error), the label collapses to zero height. Tam da olması gerektiği gibi, nasıl olduğunu bilmeseniz orada olup olmadığını fark etmezdiniz:If you didn't know any better, you wouldn't know it was there, and that's as it should be:

AutoHeight değeri true olarak ayarlanmış denetimler içeren ve yükseklik değeri sıfır olan kartlar

Ekranın sol tarafındaki denetim listesinde, etiket denetimimiz olan ErrorMessage1 gösterilmektedir.On the left side of the screen, the list of controls shows ErrorMessage1, which is our label control. Bir uygulamayı güncelleştirirken bu denetimi seçip yükseklik değerini artırabilir ve denetimi konumlandırıp boyutlandırmak için kullanacağınız tutamaçların gösterilmesini sağlayabilirsiniz.As you update an app, you can select this control to give it some height and show grab handles with which you can position and size the control. Mavi bir kutu içinde gösterilen "A", denetimin AutoHeight özelliğinin true olarak ayarlandığı anlamına gelir:The "A" in a blue box indicates that the control has AutoHeight set to true:

Yazma zamanında, AutoHeight özelliğine sahip denetimler daha yüksek görünür ve sürükleyip bırakma işlemini kolaylaştırır

Bu denetimin Text özelliği Parent.Error olarak ayarlanmıştır. Bu, doğrulama kurallarına dayalı olarak dinamik hata bilgilerinin alınması için kullanılır.The Text property of this control is set to Parent.Error, which is used to obtain dynamic error information based on validation rules. Yalnızca örnek amaçlı olarak, bu denetimin Text özelliğini statik şekilde ayarlayalım. Bu işlemin ardından denetimin yüksekliği (genişleme yoluyla kartın yüksekliği de) metnin uzunluğuna göre artırılır:For illustration purposes, let's statically set the Text property of this control, which will increase its height (and, by extension, the height of the card) to accommodate the length of the text:

Hata iletisi görüntülendiğinde denetim ve kart otomatik olarak büyütülür

Hata iletisini biraz daha uzattığımızda denetim ve kartın tekrar uygun şekilde büyütüldüğünü görürsünüz.Let's make the error message a little longer, and again the control and the card grow to accommodate. Satırın, kartlar arasındaki dikey hizalama korunarak, yalnızca yüksekliğinin arttığına dikkat edin:Note that the row overall grows in height, retaining vertical alignment between the cards:

Daha uzun bir hata iletisi olduğunda denetim ve kart daha da fazla büyütülür. Ayrıca, aynı satırdaki kartların birlikte büyütüldüğünü göz önünde bulundurun