A Microsoft PowerApps adatűrlap-elrendezésének ismertetéseUnderstand data-form layout in Microsoft PowerApps

A PowerApps-ban könnyedén hozhat létre vonzó és hatékonyan használatható űrlapokat.In PowerApps, you can easily create forms that are attractive and efficient to use. Vegyük példaként ezt az értékelési rendelések rögzítésére szolgáló alapvető űrlapot:For example, consider this basic form for recording sales orders:

Értékesítési rendelés sablonja

Ebben az oktatóanyagban végigvesszük az űrlap létrehozásához szükséges lépéseket.In this tutorial, we'll walk through the steps to create this form. Érintünk néhány speciális témakört is, például a mezők dinamikus méretezését a rendelkezésre álló terület kitöltéséhez.We'll also look at some advanced topics, such as dynamic sizing of fields to fill available space.

Előzetes teendőkBefore you start

Ha először használja a PowerApps-t (vagy csak automatikusan hozott létre alkalmazásokat), érdemes előzmények nélküli új alkalmazást készítenie az alapoktól kezdve, mielőtt alaposabban elmerülne ebben a témakörben.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. Egy teljesen új alkalmazás készítésével megismerheti az említett, de nem a jelen témakörben ismertetett szükséges fogalmakat, például az adatforrások és a vezérlők hozzáadását.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. Hozzon létre egy előzmények nélküli új táblagépes alkalmazást.Create a tablet app from scratch.

    Minden, a jelen a témakörben tárgyalt téma érvényes a telefonos elrendezésekre is, de a telefonos alkalmazások gyakran csak egy függőleges oszloppal rendelkeznek.Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. Az alkalmazás adatforrásaként vegye fel a Common Data Service Értékesítési rendelés entitását.Add the Sales order entity in the Common Data Service as a data source for the app.

    A jelen oktatóanyagon kívül bármilyen adatforrást használhat, beleértve a SharePoint-listákat és az Excel-táblázatokat is.Outside of this tutorial, you can use any data source, including SharePoint lists and Excel tables.

  3. Vegyen fel egy Gallery (Katalógus) vezérlőelemet, majd állítsa az Items (Elemek) tulajdonságát „Értékesítési rendelés” értékre.Add a vertical Gallery control, and set its Items property to 'Sales order'.

    (választható) A jelen oktatóanyagban szereplő példáknak megfelelően módosítsa a katalógus Layout (Elrendezés) tulajdonságát a Title and subtitle (Cím és alcím) értékre.(optional) To match the examples in this tutorial, change the gallery's Layout to show only Title and subtitle.

    Értékesítésirendelés-lista

  4. Kattintson vagy koppintson a katalógus SO004 elemére.In the gallery, click or tap SO004.

    Értékesítésirendelés-lista

    Ez a rekord a témakör későbbi részét követve létrehozott űrlapon jelenik majd meg.This record will appear in the form that you build by following steps later in this topic.

Címsor felvételeAdd a title bar

  1. Adjon hozzá üres űrlapot ott, ahová az űrlapot hozzá szeretné adni.Add a blank screen where you'll put the form.

    A jelen oktatóanyagon kívül ugyanazon a képernyőn helyezheti el a katalógus és szerkesztési űrlap vezérlőket, de ha külön képernyőkön helyezi el őket, több helye lesz a munkához.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. Az új képernyő tetején helyezzen el egy Label (Címke) vezérlőt, és állítsa Text (Szöveg) tulajdonságát a következő értékre:At the top of the new screen, add a Label control, and set its Text property to this expression:
    "Értékesítési rendelés: " & Gallery1.Selected.SalesOrderId"Sales Order " & Gallery1.Selected.SalesOrderId

    A címke a katalógusban kiválasztott rekord értékesítésirendelés-számát mutatja.The label shows the sales-order number of the record that you selected in the gallery.

  3. (választható) Formázza a címkét a következő módon:(optional) Format the label as follows:

    1. Állítsa be az Align (Igazítás) tulajdonságot a Center (Középre) értékre.Set its Align property to Center.

    2. Állítsa a Size (Méret) tulajdonságot 20-ra.Set its Size property to 20.

    3. Állítsa a Fill (Kitöltés) tulajdonságot Navy (Tengerészkék) -re.Set its Fill property to Navy.

    4. Állítsa a Color (Szín) tulajdonságot White (Fehér) -re.Set its Color property to White.

    5. Állítsa a Width (Szélesség) tulajdonságot a 640-re.Set its Width property to Parent.Width.

    6. Állítsa a X és Y tulajdonságokat 0-ra.Set its X and Y properties to 0.

      Címsor

Űrlap hozzáadásaAdd a form

  1. Adjon hozzá egy Edit form (Szerkesztési űrlap) vezérlőt, majd helyezze át és méretezze át a címke alatti képernyő kitöltéséhez.Add an Edit form control, and then move and resize it to fill the screen under the label.

    A következő lépésben összekapcsolja majd az űrlap-vezérlőelemet az Értékesítési rendelés adatforrással, a szerkesztőléc helyett a jobb oldali ablaktábla használatával.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. Ha a szerkesztőlécet használja, alapértelmezés szerint egy mező sem jelenik meg az űrlapon.If you use the formula bar, the form won't show any fields by default. Mindig megjelenítheti a kívánt mezőket a jobb oldali ablaktáblában egy vagy több jelölőnégyzet bejelölésével.You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  2. A jobb oldali ablaktáblában kattintson vagy koppintson a lefelé mutató nyílra a Nincs kiválasztva adatforrás elem mellett, majd kattintson vagy koppintson a Sales order (Értékesítési rendelés) lehetőségre.In the right-hand pane, click or tap the down arrow next to No data source selected, and then click or tap Sales order.

    A Sales order (Értékesítési rendelés) adatforrásból származó mezők alapértelmezett készlete egy egyszerű, háromoszlopos elrendezésben jelenik meg,A default set of fields from the Sales order data source will appear in a simple, three-column layout. sok azonban üres, és néhány pillanatig eltarthat, amíg a végső helyzetükbe kerülnek.However, many are blank, and they may take a few moments to settle into their final positions.

  3. Az Item (Elem) tulajdonságot állítsa Gallery1.Selected értékre.Set the form's Item property to Gallery1.Selected.

    Az űrlap a katalógusban kiválasztott rekordot jeleníti meg, de a mezők alapértelmezett készlete nem mindig felel meg annak, amit a végtermékben szeretne.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. A jobb oldali ablaktáblában rejtse el az egyes mezőket a jelölőnégyzet jelölésének törlésével:In the right-hand pane, hide each of these fields by clearing its checkbox:

    • Sales Order (Értékesítési megrendelés)Sales order ID
    • Account (Fiók)Account
    • Sales person (Értékesítő)Sales person
    • Account contact (Partner kapcsolattartója)Account contact
  5. Helyezze át az Order status (Rendelésállapot) mezőt balra húzva, majd a Customer purchase order reference (Vevői beszerzésirendelés-hivatkozás) mező másik oldalán elengedve azt.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.

    A képernyőnek a következő példában láthatóhoz kell hasonlítania:Your screen should resemble this example:

    Értékesítési rendelés alapszintű, háromoszlopos elrendezésben

Adatkártya kiválasztásaSelect a data card

Minden megjelenített mezőhöz megfelelő adatkártya tartozik az űrlapon.Each field displayed has a corresponding data card on the form. Ez a kártya a mezőnév, a beviteli mező, a csillag (amely akkor jelenik meg, ha a mező megadása kötelező) és egy érvényesítési hibaüzenet vezérlőinek csoportját tartalmazza.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.

A kártyákat közvetlenül az űrlapon is kijelölheti.You can also select cards directly on the form. A kártya kiválasztásakor felette fekete felirat jelenik meg.When a card is selected, a black caption appears above it.

Adatkártya kijelölése

Megjegyzés

A kártya törléséhez (nem csak az elrejtéséhez) jelölje ki azt, és kattintson a Delete (Törlés) gombra.To delete a card (not just hide it), select it, and then press Delete.

Kártyák oszlopokba rendezéseArrange cards in columns

Alapértelmezés szerint a táblagépes alkalmazásokban az űrlapok háromoszloposak, a telefonos alkalmazásokban pedig egyoszloposak.By default, forms in tablet apps have three columns, and those in phone apps have one. Nem csak arról rendelkezhet, hogy hány oszlop legyen az űrlapon, hanem arról is, hogy az összes kártyának el kell-e férnie az oszlop határain belül.You can specify not only how many columns a form has but also whether all cards should fit within column borders.

Az ábrán az űrlapon szereplő oszlopok számát háromról négyre változtattuk, a Snap to columns (Oszlopokhoz igazítás) jelölőnégyzet bejelölése mellett.In this graphic, the number of columns in the form was changed from three to four with the Snap to columns check box selected. Az űrlapon lévő kártyák automatikusan az új elrendezésnek megfelelően rendeződnek.The cards in the form were arranged automatically to fit the new layout.

Értékesítési rendelés alapszintű, négyoszlopos elrendezésben

Kártyák átméretezése több oszlopbanResize cards across multiple columns

Az egyes kártyákon található adatoktól függően előfordulhat, hogy egyes kártyáknak egy oszlopban kell elférniük, míg más kártyákat több oszlopra szeretne felosztani.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. Ha a kártya több adatot tartalmaz, mint amennyi egyetlen oszlopban megjeleníthető, jelölje ki, és a kiválasztási mező jobb vagy bal szélén lévő fogópont húzásával állítsa nagyobb szélességűre a kártyát.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. A fogópont húzásakor a kártya illeszkedik az oszlophatárokhoz.As you drag the handle, the card will "snap" to column boundaries.

Az oszlopok száma 12-re növelhető a kialakítás rugalmasabbá tétele érdekében az eredeti szerkezet részleges megőrzése mellett.To make your design more flexible but retain some structure, you can increase the number of columns to 12. Ezzel a változtatással könnyen konfigurálhatja az egyes kártyákat az egész űrlapra, illetve annak felére, harmadára, negyedére, hatodára kiterjedőre és így tovább.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. Lássuk, hogy működik ez a valóságban.Let's see this in action.

  1. A jobb oldali ablaktáblában állítsa az űrlap oszlopainak számát a 12 értékre.In the right-hand pane, set the number of columns in the form to 12.

    Adja meg az oszlopok számát

    Az űrlap látható módon nem változik, de a bal vagy jobb fogópont húzásakor több illesztési pont áll rendelkezésére.The form doesn't visibly change, but you have more snap points as you drag the left or right grab handle.

  2. Növelje az Order date (Rendelési dátum) kártya szélességét a fogópont egy illesztési ponttal jobbra való húzásával.Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    A kártya az űrlap 12 oszlopából négyre (vagy az űrlap 1/3-ára) terjed ki, a 12 oszlopból csak három (vagy az űrlap egynegyede) helyett.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). Ha egy beillesztési ponttal növeli a kártya szélességét, a kártya az űrlap egy további 1/12-ed részére terjed ki.Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    A kártya átméretezése húzással

  3. Ismételje meg az előző lépést a Order status (Rendelési állapot) és Customer purchase order reference (Vevői megrendelési hivatkozás) kártyákon.Repeat the previous step with the Order status and Customer purchase order reference cards.

    Három kártya az első sorban

  4. Méretezze át a kártyák nevét és leírását hat oszlopra (vagy az űrlap felére).Resize the Name and Description cards to take up six columns (or 1/2) of the form.

  5. A szállítási cím első két sorát terjessze ki az űrlap teljes szélességére:Make the first two lines of the delivery address stretch entirely across the form:

Kész.All done. Az általunk kívánt űrlapon az oszlopok különböző számú sorra keverednek:We have our desired form, mixing rows with different numbers of columns:

Értékesítési rendelés 12 oszlopos elrendezésben átméretezéssel

A kártya vezérlőinek kezeléseManipulate controls in a card

A szállítási cím több adatból áll, amelyeket szeretnénk vizuálisan egy csoportba rendezni a felhasználó számára.The delivery address comprises several pieces of information that we want to visually group together for the user. Az egyes mezők a saját adatkártyájukban maradnak, de módosíthatjuk a kártyán belül a vezérlőket, hogy azok jobban illeszkedjenek egymáshoz.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. Válassza ki a First line of Delivery address (Kézbesítési cím első sora) kártyát, válassza ki a címkét a kártyán belül, majd törölje a szöveg első három szavát.Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    Az értékesítési rendelés kézbesítési címe első címkéjének átnevezése

  2. Válassza ki a Second line of Delivery address (Kézbesítési cím második sora) kártyát, válassza ki a címkét a kártyán belül, majd törölje a teljes szöveget.Select the Second line of Delivery address card, select the label within that card, and then delete all of the text in it.

    Csábító lehetőség, hogy egyszerűen eltávolíthatjuk a címkevezérlőt, és számos esetben ez jól működhet.It may be tempting to simply remove the label control and, in many cases, that will work fine. Azonban képletek függhetnek attól, hogy megtalálható-e az adott vezérlő.But formulas might depend on that control being present. A biztonságosabb megoldás, ha eltávolítjuk a szöveget, vagy false (hamis) értékre állítjuk a vezérlőelem Visible (Látható) tulajdonságát.The safer approach is to remove the text or to set the Visible property of the control to false.

    Az értékesítési rendelés kézbesítési címe második címkéjének átnevezése

  3. Ugyanezen kártyán helyezze a beviteli mezőt a címkére a cím első és második sora közötti térköz csökkentése érdekében.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.

    A kártya magassága zsugorodik, amikor annak tartalma kevesebb helyet foglal el.The height of the card shrinks when its contents take up less space.

    Az értékesítési rendelés kézbesítési címe második címkéjének átnevezése

Most térjünk át a cím harmadik sorára.Now let's turn our attention to the third line of the address. Hasonlóan ahhoz, amit előbb csináltunk, most rövidítsük le minden címke szövegét ezeken a kártyákon, és a bemeneti szövegmezőt rendezzük a jobb oldalra minden címkén.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. A lépések a State (Állam) kártya esetén a következők:Here are the steps for the State card:

Lépés:Step LeírásDescription EredményResult
11 Kiválasztva a State (Állam) kártyát, körülötte fogópontok jelennek meg.Select the State card so that grab handles appear around it. Kártya kiválasztása
22 A kártyán belüli címkét kiválasztva, körülötte fogópontok jelennek meg.Select the label within this card so that grab handles appear around it. Vezérlőelem kiválasztása a kártyán belül
33 Vigye a kurzort a szöveg jobb oldalára, és törölje annak nem szükséges részét.Place the cursor to the right of the text, and then delete the portion that we don't need. Vezérlőelem szövegének módosítása kártyán belül
44 Az oldalsó fogópontok segítségével méretezze a címke vezérlőjét az új szövegmérethez.Using the grab handles on the sides, size the label control to fit the new text size. Vezérlőelem átméretezése a kártyán belül
55 Válassza ki a bemeneti vezérlőelemet a kártyán belül.Select the text input control within this card. Másik vezérlőelem kiválasztása a kártyán belül
66 Az oldalsó fogópontok használatával állítsa be a bemeneti vezérlőelem kívánt méretét.Using the grab handles on the sides, size the text input control to the size that you want. Vezérlőelem átméretezése a kártyán belül
77 A bemeneti szövegmezőt húzza a címke vezérlőtől felfelé és jobbra, majd engedje fel az egérgombot.Drag the text input box up and to the right of the label control, and then drop the text input box. Vezérlőelem áthelyezése a kártyán belül
Ezzel elkészült a State (Állam) kártya módosításaival.Our modifications to the State card are now complete. A kártya módosításai készek

A teljes harmadik címsorra vonatkozó eredmény:The result for the complete third address line:

Az értékesítési rendelés kézbesítési címe tömörebb harmadik sorral

Vegye figyelembe, hogy számos kártya dinamikus képletekből kiinduló tulajdonságokkal rendelkezik.Note that many of the cards start out with dynamic formulas for their properties. Például az általunk a fentiekben átméretezett és áthelyezett szövegbeviteli vezérlőelem Width (Szélesség) tulajdonsága a szülővezérlő szélességén alapszik.For example, the Text input control that we resized and moved above had a Width property based on the width of its parent. Ha áthelyezi vagy átméretezi a vezérlőt, ezeket a dinamikus képleteket statikus értékekkel helyettesíti.When you move or resize a control, these dynamic formulas are replaced with static values. A szerkesztőléc segítségével visszaállíthatja a dinamikus képleteket.If you want, you can restore the dynamic formulas by using the formula bar.

Oszlopokhoz illesztés kikapcsolásaTurning off Snap to columns

Néha szüksége lehet finomabb szabályozásra, mint amit a szokásos 12 oszlop biztosíthat.Sometimes you'll want finer control than the standard 12 columns can provide. Ezekben az esetekben kikapcsolhatja az oszlopokhoz illesztést, majd helyezze el manuálisan a kártyákat.For these cases, you can turn off Snap to columns and then position cards manually. Az űrlap továbbra is 12 oszlopra illeszkedik, de igény szerint az Alt billentyű lenyomva tartásával manuálisan is elhelyezheti és méretezheti a kártyát.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.

A példánkban a harmadik sorban az cím mind a négy összetevőjének azonos a szélessége.In our example, the four components that make up the third line of the address all have exactly the same width. Azonban ez nem a lehetséges legjobb elrendezés, mivel a városnév hosszabb, mint az állam rövidítése, és az országok és régiók bemeneti szövegmezője rövid a címke hossza miatt.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.

Ezen terület optimalizálása érdekében kapcsolja ki az oszlopokhoz illesztést a jobb oldali ablaktáblában, majd nyomja le az Alt billentyűt a kártyák méretezéshez és elhelyezéséhez.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. Amikor az Alt billentyűt lenyomva tartja, az összes vezérlő fekete feliratokat jelenít meg.Whenever you hold down the Alt key, all controls show black captions. Ez szándékosan van így a vezérlők nevének megjelenítése érdekében.This behavior is by design to show you control names.

Elhelyezés és méretezés az ALT billentyűt lenyomva tartva

A gondos elhelyezés után az eredmény minden mező megfelelő mérete, egyenletes vízszintes térközzel a mezők között:After careful positioning, the result has appropriate sizes for each field and even spacing horizontally between fields:

Értékesítési rendelés kézbesítési címének harmadik sor pontosan elhelyezve

Összefoglalva, mik a különbségek az oszlopokhoz illesztés engedélyezése és annak kikapcsolása között?In summary, what are the differences when Snap to columns is on versus off?

ViselkedésBehavior Oszlopokhoz illesztés bekapcsolvaSnap to columns On Oszlopokhoz illesztés kikapcsolvaSnap to columns Off
Átméretezés igazítása ehhez:Resize snaps to A kiválasztott oszlopok száma:Number of columns you select:
1, 2, 3, 4, 6 vagy 121, 2, 3, 4, 6, or 12
12 oszlop12 columns
Az automatikus oszlopszélesség felülbírálhatóResize snap can be overriden NemNo Igen, az Alt billentyűvelYes, with Alt key
A kártyák automatikus átrendezése a sorok között (erről bővebben később)Cards automatically re-layout between rows (more on this later) IgenYes NemNo

Beállított szélesség és magasságSet width and height

Az űrlap elrendezését, mint a PowerApps-ban mindent, a kártyavezérlők tulajdonságai szabályozzák.As with everything in PowerApps, the form's layout is governed by properties on the card controls. A már leírtak szerint a vezérlők különböző helyre húzásával vagy a vezérlők a fogópontok húzásával való átméretezésével a tulajdonságok értékeit módosíthatja.As already described, you can change the values of these properties by dragging controls to different locations or dragging grab handles to resize controls. De olyan helyzetek is adódhatnak, amelyekben pontosabban meg szeretné érteni és módosítani ezeket a tulajdonságokat, különösen akkor, ha képleteket tartalmazó dinamikus űrlapokat készít.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.

Alapszintű elrendezés: X, Y és Width (Szélesség)Basic Layout: X, Y, and Width

Az X és Y tulajdonságok a kártyák pozícióját szabályozzák.The X and Y properties control the position of cards. Amikor a nyers vásznon vezérlőkkel dolgozunk, ezek a tulajdonságokat egy abszolút helyzetet adnak meg.When we work with controls on the raw canvas, these properties provide an absolute position. Az űrlapokon ezen tulajdonságok eltérő jelentéssel rendelkeznek:In a form, these properties have a different meaning:

  • X: Egy soron belüli sorrend.X: Order within a row.
  • Y: A sor száma.Y: Row number.

A vásznon levő vezérlőkhöz hasonló a Width (Szélesség) tulajdonság határozza meg a kártya minimális szélességét (erről bővebben később).Similar to controls on the canvas, the Width property specifies the minimum width of the card (more on the minimum aspect in a moment).

Vessen egy pillantást az űrlapon lévő kártyák X, Y, és Width (Szélesség) tulajdonságaira:Let's take a look at the X, Y, and Width properties of the cards in our form:

Értékesítési megrendelési űrlap X és Y koordinátái

Túlcsorduló sorokOverflowing rows

Mi történik, ha a sorban a kártyák túl nagyok ahhoz, hogy elférjenek az adott sorban?What happens if the cards on a row are too wide to fit on that row? Általában nem kell foglalkoznia ezzel a lehetőséggel.Normally you don't need to worry about this possibility. Az oszlopokhoz illesztés engedélyezésével ezen három tulajdonság automatikusan módosul, hogy minden szépen elférjen túlcsorduló sorok nélkül.With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

Ha azonban az oszlopokhoz illesztés ki van kapcsolva, vagy képletalapú a Width értéke egy vagy több kártyán, előfordulhatnak túlcsorduló sorok.But with Snap to columns turned off or a formula-based Width on one or more of your cards, overflowing a row can happen. Ebben az esetben a kártyák automatikusan tördelve lesznek, gyakorlatilag egy újabb sort létrehozva.In this case, the cards will automatically wrap so that, effectively, another row is created. Például manuálisan módosítsuk a Customer purchase order reference (Vevői beszerzési rendelés hivatkozása) kártya (első sorának, harmadik elem) Width (Szélesség) tulajdonságát az 500 értékre:For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 500:

Manuális kártyaátméretezés, áttördelés új sorba

A három kártya a felső sorban már nem fér el vízszintesen, és egy új sor létrehozásával át lett tördelve a túlcsorduló sor.The three cards on the top row no longer fit horizontally, and another row has been created to wrap the overflow. Az Y koordináta az összes kártyán továbbra is 0, és a kártyák neve és leírása továbbra is 1 értékű Y tulajdonsággal bír.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. A különböző Y értékekkel rendelkező kártyák nem lesznek egyesítve a sorok között.Cards that have different Y values aren't merged across rows.

Használhatja ezt a viselkedést egy teljes mértékben dinamikus elrendezés létrehozására, ahol a kártyák elhelyezése egy mélységi (Z) sorrend alapján történik, a lehetséges legnagyobb kitöltéssel, mielőtt a következő sorba helyeződne át.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. A hatás eléréséhez adjon a kártyákhoz azonos Y értékét, és használja az X értéket a kártyák rendezéséhez.To achieve this effect, give all the cards the same Y value, and use X for the order of the cards.

Területek kitöltéséhez: WidthFitFilling spaces: WidthFit

Az utolsó példában a túlcsordulás létrehozott egy területet az Order status (Rendelésállapot) kártyán, amely az első sorban a második kártya volt.The overflow in the last example created a space after the Order status card, which was the second card in the first row. Manuálisan is módosíthatná a Width (Szélesség) tulajdonságot a két fennmaradó kártyán, hogy kitöltse ezt a helyet, de ez a módszer felesleges vesződséggel jár.We could manually adjust the Width properties of the two remaining cards to fill this space, but this approach is tedious.

Alternatív megoldásként használja a WidthFit tulajdonságot.As an alternative, use the WidthFit property. Ha ezen tulajdonság értéke true (igaz) egy sorban lévő egy vagy több kártya esetén, a sorból fennmaradó hely egyenletesen lesz elosztva közöttük.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. Ez a viselkedés az, amiért korábban említettük, hogy a kártya Width (Szélesség) tulajdonsága egy minimális érték, és a ténylegesen látható kártya szélesebb lehet.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. Ez a tulajdonság sosem okozza a kártya szélességének csökkenését, csak kiterjesztését.This property will never cause a card to shrink, only expand.

Ha az Order status (Rendelésállapot) kártya WidthFit tulajdonsága true (igaz) értékre van állítva, a kártya kitölti a rendelkezésre álló területet, míg az első kártya változatlan marad:If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

A WidthFit igaz értékre állítva a második kártyán

Ha az Order date (Rendelés dátuma) kártyán is true (igaz) értékre állítja a WidthFit tulajdonságot, mindkét kártya egyenletesen ossza fel a rendelkezésre álló területet:If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

A WidthFit igaz értékre állítva az első és a második kártyán

Ne feledje, hogy a kártyák fogópontjai a WidthFit által biztosított plusz szélességet veszik figyelembe, nem a Width (Szélesség) tulajdonság által megadott minimális szélességet.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. Ez összezavarhatja a Width (Szélesség) tulajdonság módosítását, miközben a WidthFit be van kapcsolva; érdemes lehet kikapcsolnia azt, hogy módosításokat végezhessen Width tulajdonságon, majd kapcsolja be újra.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.

Mikor lehet hasznos a WidthFit?When might WidthFit be useful? Ha egy mezőt csak bizonyos esetekben használ, false (hamis) értékre állíthatja a Visible (Látható) tulajdonságot, és a sorban a többi kártyák automatikusan kitöltik a körülötte található szabad területet.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. Előfordulhat, hogy olyan képletet szeretne használni, amely csak akkor jeleníti meg a mezőt, ha egy másik mező adott értékű.You might want to use a formula that shows a field only when another field has a particular value.

Itt statikus false (hamis) értékre állítjuk az Order status (Rendelésállapot) mező Visible (Látható) tulajdonságát:Here, we'll set the Visible property of the Order status field to a static false:

A WidthFit beállítása igaz értékre az első kártyán, láthatatlan rendelésállapottal

A második kártyát gyakorlatilag eltávolítva a harmadik kártya így visszakerülhet ugyanabba a sorba, mint az első kártya.With the second card effectively removed, the third card can now return to the same row as the first card. Az első kártya WidthFit beállítása továbbra is true (igaz), így egyedül kitölti a rendelkezésre álló területet.The first card still has WidthFit set to true, so it alone expands to fill the available space.

Mivel az Order status (Rendelésállapot) mező láthatatlan, nem jelölhető ki olyan egyszerűen a vásznon.Because Order status is invisible, you can't select it as easily on the canvas. Azonban bármelyik vezérlőt kiválaszthatja a vezérlők a képernyő bal oldalán található hierarchikus listájában, akár látható, akár nem.However, you can select any control, visible or not, in the hierarchical list of controls on the left side of the screen.

Height (Magasság)Height

A Height (Magasság) tulajdonság az összes kártya magasságát szabályozza.The Height property governs the height of each card. A kártyák rendelkeznek a WidthFit-tel egyenértékű beállítással a Height (Magasság) tulajdonság esetében is, és az mindig true (igaz) értékre van állítva.Cards have the equivalent of WidthFit for Height, and it's always set to true. Tegyük fel, hogy létezik egy HeightFit tulajdonság, de ne keresse a termékben, mert még nincs közzétéve ilyen tulajdonság.Imagine that a HeightFit property exists, but don't look for it in the product because such a property isn't yet exposed.

Nem kapcsolhatja ki ezt a viselkedést, így a kártyák magasságának megváltoztatása kihívást jelenthet.You can't turn off this behavior, so changing the heights of cards can be challenging. Egy soron belül az összes kártya a legmagasabb kártyával egyező magasságúnak tűnik.All cards within a row appear to be the same height as the tallest card. A sor ehhez hasonló lehet:You might look at a row like this:

A WidthFit beállítása igaz értékre az első kártyán, láthatatlan rendelésállapottal

Melyik kártya miatt magas a sor?Which card is making the row tall? Az előző ábrán a Total amount (Teljes összeg) kártya ki van jelölve, és magas, de a Height (Magasság) tulajdonsága 80 (ugyanaz, mint az első sor magassága).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). Egy sor magasságának csökkentése érdekében csökkentenie kell a sor legmagasabb kártyájának Height (Magasság) értékét, és nem tudja azonosítani a legmagasabb kártyát minden egyes kártya Height tulajdonságának ellenőrzése nélkül.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

A kártya akkor is lehet a vártnál magasabb, ha olyan vezérlőt tartalmaz, amelynek AutoHeight tulajdonsága true (igaz) értékű.A card might also be taller than you expect if it contains a control for which the AutoHeight property is set to true. Például sok kártya tartalmaz egy címkét, amely hibaüzenetet jelenít meg, ha a mező értéke érvényesítési hibát okoz.For example, many cards contain a label that displays an error message if the field's value causes a validation problem.

Megjelenítendő szöveg (hiba) nélkül a címke nulla magasságúra csökken.Without any text to display (no error), the label collapses to zero height. Ha nem tud róla, nem tudja, hogy ott volt, és ez így helyes:If you didn't know any better, you wouldn't know it was there, and that's as it should be:

Az igaz értékre állított AutoHeight tulajdonsággal rendelkező vezérlőket tartalmazó kártyák nem jelenítenek meg magasságot

A képernyő bal oldalán a vezérlők listájában megjelenik az ErrorMessage1 (1. hibaüzenet), ami az általunk használt címkevezérlő.On the left side of the screen, the list of controls shows ErrorMessage1, which is our label control. Az alkalmazás frissítésekor kiválaszthatja ezt a vezérlőt, hogy némi magassággal jelenjen meg, és fogópontokkal, amelyekkel elhelyezheti és méretezheti.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. Az „A” kék mezőben azt jelzi, hogy rendelkezik-e a vezérlő true (igaz) értékű AutoHeight tulajdonsággal:The "A" in a blue box indicates that the control has AutoHeight set to true:

A létrehozáskor az AutoHeight vezérlők bizonyos magassággal jelennek meg, így könnyebben helyezhetők át húzással

A vezérlő beállított Text (Szöveg) tulajdonsága Parent.Error, amellyel ellenőrzési szabályok alapján dinamikus hibainformációkhoz juthat.The Text property of this control is set to Parent.Error, which is used to obtain dynamic error information based on validation rules. Az illusztráció kedvéért statikusan állítsa be a vezérlő Text tulajdonságát, ami növeli a magasságát (és ennek továbbgyűrűzéseként a kártya magasságát) a szöveg hosszának befogadásához: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:

A vezérlő és a kártya mérete egy hibaüzenettel automatikusan megnő

Kibővítve a hibaüzenetet a vezérlő és a kártya ismét megnő, hogy elférjen rajta.Let's make the error message a little longer, and again the control and the card grow to accommodate. Vegye figyelembe, hogy a teljes sor magassága növekszik, a kártyák közötti függőleges igazítása megőrzése mellett:Note that the row overall grows in height, retaining vertical alignment between the cards:

Hosszabb hibaüzenet esetén a vezérlő és a kártya még jobban növekszik, és megfigyelhető, hogy az összes ugyanabban a sorban lévő kártya együtt növekszik