Princípy rozloženia údajových formulárov pre plátnové aplikácie v službe PowerAppsUnderstand data-form layout for canvas apps in PowerApps

Jednoducho vytvárajte atraktívne a efektívne formuláre pri tvorení plátnovej aplikácie v službe PowerApps.Easily create an attractive and efficient form when you build a canvas app in PowerApps. Pozrite sa napríklad na tento základný formulár na zaznamenávania predajných objednávok:For example, consider this basic form for recording sales orders:

Príklad predajných objednávok

V tomto kurze si prejdeme postup potrebný k vytvoreniu takéhoto formulára.In this tutorial, we'll walk through the steps to create this form. Zároveň se pozrieme na niektoré pokročilé témy, ako je dynamická veľkosť polí umožňujúca vyplniť dostupný priestor.We'll also look at some advanced topics, such as dynamic sizing of fields to fill available space.

Predtým, ako začneteBefore you start

Ak službu PowerApps nepoznáte (alebo ste aplikácie generovali iba automaticky), mali by ste vytvoriť aplikáciu od začiatku, skôr ako sa ponoríte do tejto témy.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. Keď vytvoríte aplikáciu od začiatku, zoznámite sa s potrebnými konceptmi, ako je pridanie zdroju údajov a ovládacích prvkov, ktoré táto téma spomína, ale nevysvetľuje.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. Vytvorte aplikáciu pre tablet od začiatku.Create a tablet app from scratch.

    Všetko, čo sa preberá v tejto téme, platí aj v prípade rozloženia pre telefón. Akurát aplikácie pre telefón majú často len jeden zvislý stĺpec.Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. Ako zdroj údajov pre aplikáciu pridajte entitu Sales order do služby Common Data Service.Add the Sales order entity in the Common Data Service as a data source for the app.

    Mimo tohto kurzu kurz môžete použiť akýkoľvek zdroj dát vrátane zoznamov služby SharePoint a tabuliek Excelu.Outside of this tutorial, you can use any data source, including SharePoint lists and Excel tables.

  3. Pridajte ovládací prvok zvislej Galérie a nastavte jeho vlastnosť Items na 'Sales order'.Add a vertical Gallery control, and set its Items property to 'Sales order'.

    (Voliteľné) Ak chcete, aby sa výsledok vašej práce zhodoval s príkladmi v tomto kurze, nastavte Rozloženie galérie, tak aby sa zobrazovali len Názov and podnadpis.(optional) To match the examples in this tutorial, change the gallery's Layout to show only Title and subtitle.

    Zoznam predajných objednávok

  4. V galérii kliknite alebo ťuknite na SO004.In the gallery, click or tap SO004.

    Zoznam predajných objednávok

    Tento záznam sa zobrazí vo formulári, ktorý vytvoríte neskôr vďaka postupu uvedenému v tejto téme.This record will appear in the form that you build by following steps later in this topic.

Pridanie záhlaviaAdd a title bar

  1. Pridajte prázdnu obrazovku, na ktorú vložíte formulár.Add a blank screen where you'll put the form.

    Mimo tento kurz môžete ovládacie prvky Galéria a Upraviť formulár umiestniť na rovnakú obrazovku. Ak ich ale vložíte na samostatné obrazovky, budete mať viac miesta na prácu s nimi.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. Do vrchnej časti novej obrazovky pridajte ovládací prvok Označenie a nastavte jeho vlastnosť Textna nasledujúci výraz: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

    Označenie zobrazuje číslo predajnej objednávky záznamu, ktorý ste vybrali v galérii.The label shows the sales-order number of the record that you selected in the gallery.

  3. (Voliteľné) Naformátujte toto označenie nasledovne:(optional) Format the label as follows:

    1. Vlastnosť Align nastavte na Center.Set its Align property to Center.

    2. Vlastnosť Size nastavte na 20.Set its Size property to 20.

    3. Vlastnosť File nastavte na Navy.Set its Fill property to Navy.

    4. Vlastnosť Color nastavte na White.Set its Color property to White.

    5. Vlastnosť Width nastavte na Parent.Width.Set its Width property to Parent.Width.

    6. Vlastnosti X a Y nastavte na 0.Set its X and Y properties to 0.

      Záhlavie

Pridanie formuláraAdd a form

  1. Pridajte ovládací prvok Upraviť formulár, premiestnite ho a zmeňte jeho veľkosť tak, aby vyplnil obrazovku pod označením.Add an Edit form control, and then move and resize it to fill the screen under the label.

    V ďalšom kroku pripojíte tento ovládací prvok ku zdroju údajov Sales order pomocou tably na pravej strane, nie pomocou riadku vzorcov.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. Ak použijete riadok vzorcov, v predvolenom nastavení sa vo formulári nezobrazia žiadne polia.If you use the formula bar, the form won't show any fields by default. Akékoľvek pole môžete kedykoľvek zobraziť začiarknutím jedného alebo viacerých políčok na pravej table.You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  2. V pravej table kliknite alebo ťuknite na šípku dolu vedľa textu No data source selected a potom kliknite alebo ťuknite na Sales order.In the right-hand pane, click or tap the down arrow next to No data source selected, and then click or tap Sales order.

    Predvolená množina polí zo zdroja údajov Sales order sa zobrazí v jednoduchom rozložení s troma stĺpcami.A default set of fields from the Sales order data source will appear in a simple, three-column layout. Mnohé z nich sú prázdne, a preto môže chvíľku trvať, kým sa usporiadajú do konečných pozícií.However, many are blank, and they may take a few moments to settle into their final positions.

  3. Vlastnosť Item formulára nastavte na Gallery1.Selected.Set the form's Item property to Gallery1.Selected.

    Vo formulári sa zobrazí záznam, ktorý ste si vybrali v galérii, ale predvolená množina polí sa nemusí zhodovať s tým, čo chcete mať v konečnom produkte.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. V pravej table skryte zrušením začiarknutia všetky tieto polia:In the right-hand pane, hide each of these fields by clearing its checkbox:

    • Sales order IDSales order ID
    • AccountAccount
    • Sales personSales person
    • Account contactAccount contact
  5. Pole Order status potiahnite doľava na opačnú stranu poľa Customer purchase order reference.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.

    Obrazovka by mala pripomínať tento príklad:Your screen should resemble this example:

    Predajné objednávky v základnom rozložení s troma stĺpcami

Výber karty údajovSelect a data card

Každé zobrazené pole má vo formulári príslušnú kartu údajov.Each field displayed has a corresponding data card on the form. Táto karta obsahuje množinu ovládací prvkov pre názov poľa, vstupné pole, hviezdičku (ktorá sa objaví, ak je pole povinné) a overovaciu chybovú správu.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.

Karty môžete vyberať priamo vo formulári.You can also select cards directly on the form. Pri vybraní karty sa nad ňou objaví čierny titulok.When a card is selected, a black caption appears above it.

Výber karty údajov

Poznámka

Ak chcete kartu odstrániť (nie ju len skryť), vyberte ju a stlačte kláves Delete.To delete a card (not just hide it), select it, and then press Delete.

Usporiadanie kariet do stĺpcovArrange cards in columns

Štandardne obsahujú formuláre v aplikáciach pre tablet tri stĺpce a v aplikáciach pre telefón jeden stĺpec.By default, forms in tablet apps have three columns, and those in phone apps have one. Môžete určiť nielen to, koľko stĺpcov formulár obsahuje, ale tiež či sa majú všetky karty vojsť do orámovania stĺpca.You can specify not only how many columns a form has but also whether all cards should fit within column borders.

Na tomto obrázku bol počet stĺpcov vo formulári zmenený z troch na štyri so začiarknutým políčkom Prichytiť ku stĺpcom.In this graphic, the number of columns in the form was changed from three to four with the Snap to columns check box selected. Karty v tomto formulári sa automaticky usporiadali podľa nového rozloženia.The cards in the form were arranged automatically to fit the new layout.

Predajné objednávky v základnom rozložení so štyrmi stĺpcami

Zmena veľkosti kariet naprieč viacerými stĺpcamiResize cards across multiple columns

Podľa toho, aké údaje sú na jednotlivých kartách, môžete chcieť, aby boli niektoré karty v jednom stĺpci a iné zas roztiahnuté naprieč viacerými stĺpcami.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. Ak niektorá karta obsahuje viacero údajov ako sa dá a presuniete a úchyt na ľavej alebo pravej strane jej poľa výberu.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. Pri presúvaní úchytu sa bude karta „prichytávať“ ku krajom stĺpcov.As you drag the handle, the card will "snap" to column boundaries.

Ak chcete získať flexibilnejší návrh, ale zachovať určitú štruktúru, môžete počet stĺpcov zvýšiť na 12.To make your design more flexible but retain some structure, you can increase the number of columns to 12. Vďaka tejto zmene môžete jednoducho každú kartu nakonfigurovať tak, aby bola cez formulár, polovičku formulára, tretinu, štvrtinu, šestinu, atď.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. Pozrime sa, ako to funguje v praxi.Let's see this in action.

  1. V pravej table nastavte počet stĺpcov vo formulári na 12.In the right-hand pane, set the number of columns in the form to 12.

    Výber počtu stĺpcov

    Formulár sa napohľad nijak nezmení, pri presúvaní ľavého alebo pravého úchytu ale máte viac bodov prichytenia.The form doesn't visibly change, but you have more snap points as you drag the left or right grab handle.

  2. Zväčšite šírku karty Order date presunutím pravého úchytu o jeden bod prichytenia smerom doprava.Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    Karta je teraz roztiahnutá cez štyri z 12 stĺpcov formulára (resp. cez 1/3 formulára) namiesto cez tri z 12 stĺpcov formulára (resp. cez 1/4 formulára).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). Kedykoľvek zväčšíte šírku kartu o jeden bod prichytenia, roztiahne sa karta o 1/12 formulára.Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    Zmena veľkosti karty presunutím

  3. Opakujte tento postup aj pri kartách Order status a Customer purchase order reference.Repeat the previous step with the Order status and Customer purchase order reference cards.

    Tri karty v prvom riadku

  4. Zmeňte veľkosť kariet Name a Description tak, aby zaberali šesť stĺpcov (teda 1/2) formulára.Resize the Name and Description cards to take up six columns (or 1/2) of the form.

  5. Prvé dva riadky doručovacej adresy roztiahnite cez celý formulár:Make the first two lines of the delivery address stretch entirely across the form:

Hotovo.All done. Navrhli sme formulár a skombinovali riadky s rôznym počtom stĺpcov:We have our desired form, mixing rows with different numbers of columns:

Predajné objednávky v rozložení s 12 stĺpcami so zmenou veľkosti

Manipulácia s ovládacími prvkami na karteManipulate controls in a card

Doručovacia adresa sa skladá z niekoľkých údajov, ktoré chceme používateľovi vizuálne usporiadať dohromady.The delivery address comprises several pieces of information that we want to visually group together for the user. Všetky polia zostanú na svojej karte údajov, manipuláciou s ovládacími prvkami na karte ich ale môžete lepšie usporiadať.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. Vyberte kartu First line of Delivery address, vyberte označenie na tejto karte a odstráňte prvé tri slová textu.Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    Premenovanie označenia prvého riadku adresy doručenia predajných objednávok

  2. Vyberte kartu Second line of Delivery address, vyberte označenia na tejto karte a odstráňte všetok text, ktorý obsahuje.Select the Second line of Delivery address card, select the label within that card, and then delete all of the text in it.

    Možno by ste chceli tento ovládací prvok označenia jednoducho odobrať, pričom vo väčšine prípadov to bude fungovať.It may be tempting to simply remove the label control and, in many cases, that will work fine. Na existencii tohto ovládacieho prvku ale môžu závisieť vzorce.But formulas might depend on that control being present. Bezpečnejšie je odobrať text alebo nastaviť vlastnosť Visible ovládacieho prvku na false.The safer approach is to remove the text or to set the Visible property of the control to false.

    Premenovanie označenia druhého riadku adresy doručenia predajných objednávok

  3. Na rovnakej karte presuňte vstupné pole cez označenie tak, aby ste zmenšili medzeru medzi prvým a druhým riadkom adresy.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.

    Výška karty sa zmenší, ak jej obsah zaberá menej miesta.The height of the card shrinks when its contents take up less space.

    Premenovanie označenia druhého riadku adresy doručenia predajných objednávok

Teraz venujme pozornosť tretiemu riadku tejto adresy.Now let's turn our attention to the third line of the address. Podobne ako predtým skrátime text jednotlivých označení kariet a usporiadame pole textového vstupu, tak, aby bolo napravo od označení.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. Toto je postup pre kartu State:Here are the steps for the State card:

KrokStep PopisDescription VýsledokResult
11 Vyberte kartu State, aby sa okolo nej zobrazili úchyty.Select the State card so that grab handles appear around it. Vybratie karty
22 Vyberte označenie na tejto karte, aby sa okolo neho zobrazili úchyty.Select the label within this card so that grab handles appear around it. Výber ovládacieho prvok v rámci karty
33 Umiestnite kurzor napravo od textu a odstráňte nepotrebnú časť.Place the cursor to the right of the text, and then delete the portion that we don't need. Zmena textu v ovládacom prvku v rámci karty
44 Pomocou úchytov na stranách upravte veľkosť ovládacieho prvku označenia podľa novej veľkosti textu.Using the grab handles on the sides, size the label control to fit the new text size. Zmena veľkosti ovládacieho prvku v rámci karty
55 Vyberte ovládací prvok textového vstupu na tejto karte.Select the text input control within this card. Výber iného ovládacieho prvku v rámci karty
66 Pomocou úchytov na stranách upravte veľkosť ovládacieho prvku textového vstupu na požadovanú veľkosť.Using the grab handles on the sides, size the text input control to the size that you want. Zmena veľkosti ovládacieho prvku v rámci karty
77 Presuňte pole textového vstupu nahor a napravo od ovládacieho prvku označenia.Drag the text input box up and to the right of the label control, and then drop the text input box. Presun ovládacieho prvku v rámci karty
Úpravy karty State sú týmto hotové.Our modifications to the State card are now complete. Úpravy karty sú hotové

Výsledný tretí riadok adresy vyzerá takto:The result for the complete third address line:

Adresa doručenia predajnej objednávky s kratším tretím riadkom

Veľa kariet má vo svojich vlastnostiach najprv nastavené dynamické vzorce.Note that many of the cards start out with dynamic formulas for their properties. Napríklad ovládací prvok Vstup textu, ktorého veľkosť a umiestnenie sme skôr zmenili, mal vlasnosť Width nastavenú na šírku jeho nadradeného prvku.For example, the Text input control that we resized and moved above had a Width property based on the width of its parent. Keď zmeníte umiestnenie alebo veľkosť ovládacieho prvku, nahradia sa tieto dynamické vzorce statickými hodnotami.When you move or resize a control, these dynamic formulas are replaced with static values. Ak chcete, môžete pomocou riadkov vzorcov tieto dynamické vzorce obnoviť.If you want, you can restore the dynamic formulas by using the formula bar.

Vypnutie funkcie Prichytiť ku stĺpcomTurning off Snap to columns

Občas budete potrebovať detailnejšiu kontrolu, ako poskytuje štandardných 12 stĺpcov.Sometimes you'll want finer control than the standard 12 columns can provide. V týchto prípadoch môžete funkciu Prichytiť ku stĺpcom vypnúť a umiestniť karty ručne.For these cases, you can turn off Snap to columns and then position cards manually. Formulár sa bude naďalej prichycovať ku 12 stĺpcom, ak ale podržíte kláves Alt, môžete ručne zmeniť umiestnenie a veľkosť karty podľa potreby.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.

Všetky štyri súčasti, ktoré tvoria tretí riadok adresy, majú v našom príklade úplne rovnakú šírku.In our example, the four components that make up the third line of the address all have exactly the same width. To ale nemusí byť ideálne rozloženie, pretože názvy miesto sú dlhšie ako skratky štátov a pole Textový vstup pre krajiny a oblasti je krátke kvôli dĺžke jeho označenia.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.

Ak chcete toto miesto optimalizovať, vypnite funkciu Prichytiť ku stĺpcom v pravej table, a pri zmene veľkosti a umiestnenie týchto kariet držte stlačený kláves Alt.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. Vždy, keď podržíte kláves Alt, sa pri všetkých ovládacích prvkoch objavia čierne titulky.Whenever you hold down the Alt key, all controls show black captions. Toto správanie je zámerné kvôli zobrazeniu názvov ovládacích prvkov.This behavior is by design to show you control names.

Zmena umiestnenia a veľkosti so stlačeným klávesom Alt

Po starostlivom rozmiestnení získate správnu veľkosť jednotlivých polí a rovnomerné medzery medzi poliami vo vodorovnom smere:After careful positioning, the result has appropriate sizes for each field and even spacing horizontally between fields:

Presné umiestnenie tretieho riadku doručovacej adresy predajnej objednávky

Aký je rozdiel medzi zapnutou a vypnutou funkciou Prichytiť ku stĺpcom?In summary, what are the differences when Snap to columns is on versus off?

SprávanieBehavior Zapnutá funkcia Prichytiť ku stĺpcomSnap to columns On Vypnutá funkcia Prichytiť ku stĺpcomSnap to columns Off
Stĺpce na prichytenie pri zmene veľkostiResize snaps to Počet vybraných stĺpcov:Number of columns you select:
1, 2, 3, 4, 6 alebo 121, 2, 3, 4, 6, or 12
12 stĺpcov12 columns
Prichytenie pri zmene veľkosti možno potlačiťResize snap can be overriden NieNo Áno, pomocou klávesu AltYes, with Alt key
Automatická zmena rozloženia kariet medzi riadkami (podrobnosti ďalej)Cards automatically re-layout between rows (more on this later) ÁnoYes NieNo

Nastavenie šírky a výškySet width and height

Rozloženie formulára je (rovnako ako všetko v PowerApps) určené vlastnosťami na ovládacích prvkoch kariet.As with everything in PowerApps, the form's layout is governed by properties on the card controls. Ako už bolo uvedené, hodnoty týchto vlastností môžete zmeniť posunutím ovládacích prvkov na iné miesta alebo presunutím úchytov za účelom zmeny veľkosti ovládacích prvkov.As already described, you can change the values of these properties by dragging controls to different locations or dragging grab handles to resize controls. Občas ale budete chcieť tieto vlastnosti pochopiť, manipulovať s nimi presnejší, obzvlášť ak sa majú formulár dynamicky meniť na základe vzorcov.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.

Základné rozloženie: vlastnosti X, Y a WidthBasic Layout: X, Y, and Width

Vlastnosti X a Y určujú umiestnenie kariet.The X and Y properties control the position of cards. Ak s ovládacími prvkami pracujete priamo na plátne, určujú tieto vlastnosti absolútnu pozíciu.When we work with controls on the raw canvas, these properties provide an absolute position. Vo formulári majú tieto vlastnosti odlišný význam:In a form, these properties have a different meaning:

  • X: Poradie čísla v riadku.X: Order within a row.
  • Y: Číslo riadku.Y: Row number.

Podobne ako v prípade ovládacích prvkov na plátne určuje vlastnosť Width minimálnu šírku karty (tento aspekt čoskoro preberieme podrobne).Similar to controls on the canvas, the Width property specifies the minimum width of the card (more on the minimum aspect in a moment).

Pozrime sa na vlastnosti X, Y, a Width kariet v našom formulári:Let's take a look at the X, Y, and Width properties of the cards in our form:

Súradnice X a Y formulára predajnej objednávky

Pretekajúce riadkyOverflowing rows

Čo sa stane, keď sú karty v riadku príliš široké a nezmestia sa doň?What happens if the cards on a row are too wide to fit on that row? Obvykle sa touto možnosťou nemusíte zaoberať.Normally you don't need to worry about this possibility. Pri zapnutej funkcii Prichytiť ku stĺpcom sa tieto tri vlastnosti automaticky prispôsobia tak, aby sa všetky zmestili na riadky bez toho, došlo k pretečeniu.With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

Ak je však funkcia Snap to columns vypnutá alebo vlastnosť Width niektorých kariet je vypočítaná zo vzorca, môže riadok pretiecť.But with Snap to columns turned off or a formula-based Width on one or more of your cards, overflowing a row can happen. V tomto prípade sa karty automaticky zalomia, čím vznikne ďalší riadok.In this case, the cards will automatically wrap so that, effectively, another row is created. Skúsme napríklad ručne zmeniť vlastnosť Width karty Customer purchase order reference (prvý riadok, tretia položka) na hodnotu 500:For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 500:

Manuálna zmena veľkosti karty spôsobujúca pretekanie do nového riadku

Tri karty v hornom riadku sa už nezmestia vodorovne, tak vytvorili ďalší riadok, na ktorý sa pretečenie zalomí.The three cards on the top row no longer fit horizontally, and another row has been created to wrap the overflow. Súradnica Y všetkých týchto kariet má hodnotu 0 a karty Name a Description majú stále súradnicu Y s hodnotou 1.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. Karty, ktoré majú rozdielne hodnoty Y, nie sú zlúčené naprieč riadkami.Cards that have different Y values aren't merged across rows.

Vďaka tomuto správaniu môžete vytvoriť plne dynamické rozloženie, v ktorom sa karty zoraďujú na základe poradia vykresľovania a vypĺňajú pozdĺžne čo najväčší priestor pred presunom na ďalší riadok.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. Tento efekt dosiahnete tak, že všetkým kartám dáte rovnakú hodnotu Y a hodnotu X použijete na poradie kariet.To achieve this effect, give all the cards the same Y value, and use X for the order of the cards.

Vypĺňanie miesta: WidthFitFilling spaces: WidthFit

Pri pretečení v poslednom riadku vzniklo miesto za kartou Order status, ktorá bola druhou kartou v prvom riadku.The overflow in the last example created a space after the Order status card, which was the second card in the first row. Ručnou úpravou vlastnosti Width zostávajúcich dvoch kariet by sme toto miesto mohli vyplniť, avšak tento postup je zdĺhavý.We could manually adjust the Width properties of the two remaining cards to fill this space, but this approach is tedious.

Alternatívne môžeme použiť vlastnosť WidthFit.As an alternative, use the WidthFit property. Ak je táto vlastnosť pre niektoré karty v riadku nastavená na hodnotu true, rozdelí sa medzi ne rovnomerne všetko zostávajúce miesto.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. Z tohto dôvodu sme si povedali, že vlastnosť Width karty určuje minimálnu šírku, pričom v skutočnosti môže byť širšia.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. Táto vlastnosť nikdy nespôsobí zmenšenie karty, len zväčšenie.This property will never cause a card to shrink, only expand.

Keď pre kartu Order status nastavíme vlastnosť WidthFit na true, vyplní táto karta dostupné miesto, kým prvá karta zostane nezmenená:If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

Hodnota WidthFit nastavená na true na druhej karte

Ak vlastnosť WidthFit nastavíme na hodnotu true aj pri karte Order date, rozdelia obe karty rovnomerne zostávajúce miesto:If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

Hodnota WidthFit nastavená na true na prvej a na druhých kartách

Pamätajte na to, že úchyty na týchto kartách berú do úvahy dodatočnú šírku určenú vlastnosťou WidthFit, nie minimálnu šírku určenú vlastnosťou Width.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. Manipulácia s vlastnosťou Width pri zapnutej vlastnosti WidthFit môže pôsobiť mätúco, preto je vhodné ju vypnúť, vykonať zmeny vlastnosti Width a potom ju opäť zapnúť.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.

Kedy môže byť vlastnosť WidthFit užitočná?When might WidthFit be useful? Ak máte pole, ktoré sa používa len v určitých situáciach, môžete jeho vlastnosť Visible nastaviť na false, takže ostatné kartu riadku automaticky vyplnia miesto okolo.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. Môžete tiež použiť vzorec, ktorý pole ukáže len vtedy, keď má iné pole konkrétnu hodnotu.You might want to use a formula that shows a field only when another field has a particular value.

Tu nastavíme vlastnosť Visible poľa Order status na statickú hodnotu false:Here, we'll set the Visible property of the Order status field to a static false:

Vlastnosť WidthFit nastavená na hodnotu true na prvej karte pri skrytom stave objednávky

Keď je druhá skutočne odobraná, môže sa tretia karta vrátiť na rovnaký riadok ako prvá karta.With the second card effectively removed, the third card can now return to the same row as the first card. Vlastnosť WidthFit prvej karty je stále nastavená na true, takže se sama roztiahne a vyplní dostupné miesto.The first card still has WidthFit set to true, so it alone expands to fill the available space.

Pretože pole Order status je neviditeľné, nedá sa na plátne jednoducho vybrať.Because Order status is invisible, you can't select it as easily on the canvas. Ktorýkoľvek ovládací prvok však môžete vybrať v hierarchickom zozname ovládacích prvkov na ľavej strane obrazovky a to bez ohľadu na to, či je alebo nie viditeľný.However, you can select any control, visible or not, in the hierarchical list of controls on the left side of the screen.

HeightHeight

Vlastnosť Height určuje výšku jednotlivých kariet.The Height property governs the height of each card. Karty majú pre vlastnosť Height ekvivalent vlastnosti WidthFit, ktorá je vždy nastavená na true.Cards have the equivalent of WidthFit for Height, and it's always set to true. Predstavte si, že vlastnosť HeightFit existuje, ale v produktu ju nenájdete, pretože táto vlastnosť ešte nie je dostupná.Imagine that a HeightFit property exists, but don't look for it in the product because such a property isn't yet exposed.

Toto správanie nie je možné vypnúť, takže zmena výšky kariet môže byť náročná.You can't turn off this behavior, so changing the heights of cards can be challenging. Všetky karty v riadku sa zobrazujú rovnako vysoké, ako najvyššia karta.All cards within a row appear to be the same height as the tallest card. Pozrite sa na tento riadok:You might look at a row like this:

Vlastnosť WidthFit nastavená na hodnotu true na prvej kartu pri skrytom stave objednávky

Kvôli ktorej karte je riadok tak vysoký?Which card is making the row tall? Na predchádzajúcom obrázku je vybraná karta Total amount, ktorá vyzerá byť vysoká. Avšak jej vlastnosť Height je nastavená na 80 (rovnako ako výška prvého riadku).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). Ak chcete zmenšiť výšku riadku, musíte zmenšiť vlastnosť Height najvyššej karty v tomto riadku, pričom najvyššiu kartu identifikuje jedine skontrolovaním vlastnosti Height všetkých kariet.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

Karta môže byť tiež vyššia, ako čakáte, ak obsahuje ovládací prvok, ktorého vlastnosť AutoHeight je nastavená na hodnotu true.A card might also be taller than you expect if it contains a control for which the AutoHeight property is set to true. Veľa kariet napríklad obsahuje označenie, ktoré zobrazí chybovú správu, ak hodnota poľa spôsobí problém pri overení.For example, many cards contain a label that displays an error message if the field's value causes a validation problem.

Ak neexistuje žiadny na zobrazenie (čo nie je chyba), zmenší sa výška označenia na nulu.Without any text to display (no error), the label collapses to zero height. Bez toho, aby ste o jej existencii vedeli. Vyzerala by takto:If you didn't know any better, you wouldn't know it was there, and that's as it should be:

Karty obsahujúce ovládacie prvky s vlastnosťou AutoHeight nastavenou na hodnotu true, kvôli čomu majú nulovú výšku

Na ľavej strane obrazovky sa v zozname ovládacích prvkov zobrazuje ErrorMessage1, čo je ovládací prvok označenia.On the left side of the screen, the list of controls shows ErrorMessage1, which is our label control. Pri aktualizácii aplikácie môžete tento ovládací prvok vybrať, nastaviť jeho výšku a zobraziť úchyty, pomocou ktorých zmeníte jeho umiestnenie a výšku.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. Písmeno „A“ v modrom rámčeku symbolizuje, že vlastnosť AutoHeight tohto ovládacieho prvku je nastavená na hodnotu true:The "A" in a blue box indicates that the control has AutoHeight set to true:

Pri vytváraní vlastnosť AutoHeight ovládacieho prvku zmení jeho výšku, takže je jednoduchšieho ho presunúť

Vlastnosť Text tohto ovládacieho prvku je nastavená na Parent.Error. Táto hodnota sa používa k získaniu dynamických informácií o chybe na základe overovacích pravidiel.The Text property of this control is set to Parent.Error, which is used to obtain dynamic error information based on validation rules. Pre názornosť nastavme vlastnosť Text tohto ovládacieho prvku staticky, čím sa zväčší jeho výška (a zároveň výška karty) tak, aby sa prispôsobila dĺžke textu: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:

Pri chybovej správe sa automaticky zväčší ovládací prvok aj karta

Keď túto chybovú správu ešte predĺžime, ovládací prvok a karta sa primerane zväčšia.Let's make the error message a little longer, and again the control and the card grow to accommodate. Všimnite si, že sa zväčší celková výška riadku a zvislé zarovnanie medzi kartami sa zachová:Note that the row overall grows in height, retaining vertical alignment between the cards:

Pri dlhšej chybovej správe sa ovládací prvok a karta zväčšia ešte viac. Všimnite si, že karty v rovnakom riadku sa zväčšia naraz