Förstå dataformulärslayout i Microsoft PowerAppsUnderstand data-form layout in Microsoft PowerApps

Med PowerApps kan du enkelt skapa snygga och effektiva formulär.In PowerApps, you can easily create forms that are attractive and efficient to use. Titta t.ex. på det här basformuläret för att registrera försäljningsorder:For example, consider this basic form for recording sales orders:

Exempel på försäljningsorder

I den här självstudien går vi steg för steg igenom hur du skapar det här formuläret.In this tutorial, we'll walk through the steps to create this form. Vi ska också titta på några avancerade ämnen, t.ex. hur du ändrar storlek på fält dynamiskt så att de fyller ut tillgängligt utrymme.We'll also look at some advanced topics, such as dynamic sizing of fields to fill available space.

Innan du börjarBefore you start

Om du inte har arbetat med PowerApps (eller bara har genererat appar automatiskt) behöver du skapa en app från grunden innan du fördjupar dig i det här avsnittet.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. Genom att skapa en app från grunden kan du bekanta dig med de grundläggande momenten, t.ex. hur man lägger till datakällor och kontroller, vilket nämns men som inte beskrivs i det här avsnittet.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. Skapa en surfplatteapp från grunden.Create a tablet app from scratch.

    Allt som beskrivs här gäller även för telefonlayouter, men telefonappar har ofta bara en lodrät kolumn.Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. Lägg till entiteten Sales order i Common Data Service som datakälla för appen.Add the Sales order entity in the Common Data Service as a data source for the app.

    Du kan använda vilken datakälla du vill, inklusive SharePoint-listor och Excel-tabeller, utanför den här kursen.Outside of this tutorial, you can use any data source, including SharePoint lists and Excel tables.

  3. Lägg till en vertikal Galleri-kontroll och ange dess egenskap Objekt till Försäljningsorder.Add a vertical Gallery control, and set its Items property to 'Sales order'.

    (valfritt) Ändra galleriets Layout så att endast rubrik och underrubrik, vilket gör att den matchar exemplen i den här självstudiekursen.(optional) To match the examples in this tutorial, change the gallery's Layout to show only Title and subtitle.

    Försäljningsorderlista

  4. Klicka eller tryck på SO004 i galleriet.In the gallery, click or tap SO004.

    Försäljningsorderlista

    Den här posten visas i det formulär som du skapar genom att följa stegen senare i det här avsnittet.This record will appear in the form that you build by following steps later in this topic.

Lägg till en namnlistAdd a title bar

  1. Lägg till en tom skärm där du sen placerar formuläret.Add a blank screen where you'll put the form.

    Utanför den här kursen kan du placera kontrollerna Galleri och Redigera formulär på samma skärm, men du får mer utrymme att arbeta med om du placerar dem på separata skärmar.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. At the top of the new screen, Lägg till en Etikett-kontroll högst upp på den nya skärmen, och ange följande uttryck för dess egenskap Text:At the top of the new screen, add a Label control, and set its Text property to this expression:
    ”Försäljningsorder” & Gallery1.Selected.SalesOrderId"Sales Order " & Gallery1.Selected.SalesOrderId

    Etiketten visar säljordernumret för den post som du valde i galleriet.The label shows the sales-order number of the record that you selected in the gallery.

  3. (valfritt) Formatera etiketten på följande sätt:(optional) Format the label as follows:

    1. Ange dess egenskap Align till Center.Set its Align property to Center.

    2. Ange dess egenskap Size till 20.Set its Size property to 20.

    3. Ange dess egenskap Fill till Navy.Set its Fill property to Navy.

    4. Ange dess egenskap Color till White.Set its Color property to White.

    5. Ange dess egenskap Width till Parent.Width.Set its Width property to Parent.Width.

    6. Ange dess egenskaper X och Y till 0.Set its X and Y properties to 0.

      Namnlist

Lägga till ett formulärAdd a form

  1. Lägg till en Redigera formulär-kontroll, och flytta den och ändra dess storlek så att den fyller skärmen under etiketten.Add an Edit form control, and then move and resize it to fill the screen under the label.

    I nästa steg ska du få ansluta formulärkontrollen till datakällan Försäljningsorder med hjälp av rutan till höger, inte formelfältet.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. Om du använder formelfältet visar formuläret inte några fält som standard.If you use the formula bar, the form won't show any fields by default. Du kan alltid visa alla fält som du vill genom att markera en eller flera kryssrutor i den högra rutan.You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  2. Klicka eller tryck i rutan till höger på nedåtpilen bredvid Ingen datakälla har valts och klicka sedan eller tryck på Försäljningsorder.In the right-hand pane, click or tap the down arrow next to No data source selected, and then click or tap Sales order.

    En standarduppsättning med fält från datakällan Försäljningsorder visas i en enkel trekolumnerslayout.A default set of fields from the Sales order data source will appear in a simple, three-column layout. Många är dock tomma, och det kan ta några ögonblick innan de hamnar i sina slutliga positioner.However, many are blank, and they may take a few moments to settle into their final positions.

  3. Ställ in formulärets egenskap ItemGallery1.Selected.Set the form's Item property to Gallery1.Selected.

    Formuläret visar den post som du valde i galleriet, men som standarduppsättningen av fält kanske inte stämmer med vad du vill ha i din slutliga produkt.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. Dölj vart och ett av dessa fält i den högra rutan genom att avmarkera respektive kryssruta:In the right-hand pane, hide each of these fields by clearing its checkbox:

    • Försäljningsorderns IDSales order ID
    • KontoAccount
    • SäljareSales person
    • KontokontaktAccount contact
  5. Flytta fältet Orderstatus genom att dra det åt vänster och sedan släppa det på den andra sidan av fältet Kundens IO-referens.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.

    Skärmen bör se ut ungefär så här:Your screen should resemble this example:

    Försäljningsorder i en enkel layout med tre kolumner

Välj ett datakortSelect a data card

Varje fält som visas har ett motsvarande datakort i formuläret.Each field displayed has a corresponding data card on the form. Det här kortet omfattar en uppsättning kontroller för fältrubrik, textruta, stjärna (som visas om fältet är obligatoriskt) och ett felmeddelande för verifiering.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.

Du kan också välja kort direkt i formuläret.You can also select cards directly on the form. När du har valt ett kort visas en svart rubrik ovanför det.When a card is selected, a black caption appears above it.

Val av datakort

Anteckning

Om du vill ta bort ett kort (inte bara dölja det), så markerar du det och trycker sedan på Ta bort.To delete a card (not just hide it), select it, and then press Delete.

Ordna kort i kolumnerArrange cards in columns

Formulär i surfplatteappar har som standard tre kolumner och de i telefonappar har en.By default, forms in tablet apps have three columns, and those in phone apps have one. Förutom att du kan ange hur många kolumner i ett formulär ska ha, så kan du även ange om alla kort ska rymmas inom kolumnen kantlinjer.You can specify not only how many columns a form has but also whether all cards should fit within column borders.

På den här bilden har antalet kolumner i formuläret ändrats från tre till fyra med kryssrutan Fäst vid kolumner markerad.In this graphic, the number of columns in the form was changed from three to four with the Snap to columns check box selected. Korten i formuläret har ordnats automatiskt så att de passar den nya layouten.The cards in the form were arranged automatically to fit the new layout.

Försäljningsorder i en enkel layout med fyra kolumner

Ändra storlek på kort i flera kolumnerResize cards across multiple columns

Beroende på informationen i respektive kort vill du kanske att vissa kort ska passas in en enkel kolumn och att andra ska spänna över flera kolumner.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. Om ett kort innehåller mer information än vad du vill visa i en kolumn, så kan du utvidga kortet genom att markera det och sedan dra handtaget på dess markeringsrutas högra eller vänstra kant.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. När du drar i handtaget fästs kortet vid kolumngränserna.As you drag the handle, the card will "snap" to column boundaries.

Om du vill göra din design mer flexibel, men samtidigt bibehålla en del av dess struktur, kan du öka antalet kolumner till 12.To make your design more flexible but retain some structure, you can increase the number of columns to 12. Med den här ändringen kan du enkelt konfigurera varje kort så att det sträcker sig över hela formuläret, halva formuläret, eller en tredje-, fjärde- eller sjättedel av formuläret, osv.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åt oss se hur det fungerar i praktiken.Let's see this in action.

  1. Ange antalet kolumner i formuläret till 12 i den högra rutan.In the right-hand pane, set the number of columns in the form to 12.

    Ange antalet kolumner

    Formuläret ändras inte så att det syns, men du har fler fästpunkter när du drar i det vänstra eller högra handtaget.The form doesn't visibly change, but you have more snap points as you drag the left or right grab handle.

  2. Öka bredden på kortet Order date (Orderdatum) genom att dra det högra handtaget åt höger.Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    Kortet spänner över fyra av formulärets 12 kolumner (eller 1/3 av formuläret), istället för bara tre av formulärets 12 kolumner (eller 1/4 av formuläret).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). När du ökar en kortets bredd med en fästpunkt, så spänner kortet över ytterligare 1/12 av formuläret.Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    Ändra storleken på ett kort genom att dra och släppa det

  3. Upprepa föregående steg med korten Orderstatus och Kundens IO-referens.Repeat the previous step with the Order status and Customer purchase order reference cards.

    Tre kort på första raden

  4. Ändra storlek på korten Namn och Beskrivning om du vill att de ska omfatta sex kolumner, dvs halva formuläret.Resize the Name and Description cards to take up six columns (or 1/2) of the form.

  5. Gör så att den leveransadressens första rad sträcker sig över hela formuläret:Make the first two lines of the delivery address stretch entirely across the form:

Klart!All done. Nu har vi ett formulär med blandade rader med olika antal kolumner:We have our desired form, mixing rows with different numbers of columns:

Försäljningsorder med layout med 12 kolumner och ändring av storlek

Hantera kontroller i ett kortManipulate controls in a card

Leveransadressen omfattar flera olika typer av information som vi vill gruppera visuellt för användaren.The delivery address comprises several pieces of information that we want to visually group together for the user. Varje fält kommer att finnas kvar i sitt respektive datakort, men vi kan justera kontrollerna i kortet så att de passar bättre i förhållande till varandra.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älj kortet Leveransadressens första rad, markera etiketten i kortet och välj sedan att ta bort de första tre orden i texten.Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    Ändra namnet på första raden i leveransadressen för försäljningsordern

  2. Välj kortet Leveransadressens andra rad, markera etiketten i kortet och ta sedan bort all text.Select the Second line of Delivery address card, select the label within that card, and then delete all of the text in it.

    Det kan vara lockande att helt enkelt bara ta bort etikettkontrollen, och i många fall fungerar det bra.It may be tempting to simply remove the label control and, in many cases, that will work fine. Men det kan finnas formler som är beroende av att kontrollen finns.But formulas might depend on that control being present. Det är säkrare att ta bort texten eller att ange egenskapen Visible för kontrollen till False.The safer approach is to remove the text or to set the Visible property of the control to false.

    Ändra namnet på andra raden i leveransadressen för försäljningsordern

  3. Flytta rutan för textinmatning ovanför etiketten för att minska utrymmet mellan den första och andra adressraden.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.

    Höjden på kortet krymper när dess innehåll tar upp mindre utrymme.The height of the card shrinks when its contents take up less space.

    Ändra namnet på andra raden i leveransadressen för försäljningsordern

Nu är det dags att ta itu med den tredje adressraden.Now let's turn our attention to the third line of the address. Vi gör ungefär som tidigare. Vi kortar ned texten i etiketterna för dessa kort och ordnar rutorna för textinmatning så att de hamnar till höger om varje etikett.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. Här följer stegen för kortet State (Delstat):Here are the steps for the State card:

StegStep BeskrivningDescription ResultatResult
11 Markera State-kortet, så att handtag visas runt det.Select the State card so that grab handles appear around it. Välj ett kort
22 Markera etiketten i kortet, så att handtag visas runt den.Select the label within this card so that grab handles appear around it. Välja en kontroll i ett kort
33 Placera markören till höger om texten och ta sedan bort den del som vi inte behöver.Place the cursor to the right of the text, and then delete the portion that we don't need. Ändra texten i en kontroll i ett kort
44 Ändra storleken på etikettkontrollen så att den passar den nya textstorleken genom att dra i handtagen på sidorna.Using the grab handles on the sides, size the label control to fit the new text size. Ändra storlek på en kontroll i ett kort
55 Välj textinmatningskontrollen i det här kortet.Select the text input control within this card. Välja en annan kontroll i kortet
66 Ändra textinmatningskontrollen till den storlek du önskar genom att dra i handtagen.Using the grab handles on the sides, size the text input control to the size that you want. Ändra storlek på en kontroll i ett kort
77 Dra textinmatningsrutan uppåt till höger om etikettkontrollen och släpp den sedan.Drag the text input box up and to the right of the label control, and then drop the text input box. Flytta på en kontroll i ett kort
Nu är vi färdiga med att justera State-kortet.Our modifications to the State card are now complete. Kortjusteringarna är klara

Resultatet för hela den tredje adressraden:The result for the complete third address line:

Leveransadress med en tredje rad som är mer kort och koncis

Observera att många kort inledningsvis har dynamiska formler för sina egenskaper.Note that many of the cards start out with dynamic formulas for their properties. Textinmatningskontrollen som vi ändrade storlek på och flyttade ovan hade t.ex. en Width-egenskap som baserades på dess överordnades bredd.For example, the Text input control that we resized and moved above had a Width property based on the width of its parent. När du flyttar eller ändrar storlek på en kontroll ersätts dessa dynamiska formler med statiska värden.When you move or resize a control, these dynamic formulas are replaced with static values. Om du vill kan du återställa de dynamiska formlerna med formelfältet.If you want, you can restore the dynamic formulas by using the formula bar.

Inaktivera Fäst vid kolumnerTurning off Snap to columns

Ibland kanske du behöver mer detaljerad kontroll än vad du kan få med de vanliga 12 kolumnerna.Sometimes you'll want finer control than the standard 12 columns can provide. I så fall kan du inaktivera Fäst vid kolumner och sedan placera ut korten manuellt.For these cases, you can turn off Snap to columns and then position cards manually. Korten fästs fortfarande mot 12 kolumner i formuläret, men du kan även hålla ned ALT-tangenten och placera och ändra storlek på korten manuellt.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.

I vårt exempel har alla fyra komponenter som utgör den tredje adressraden exakt samma bredd.In our example, the four components that make up the third line of the address all have exactly the same width. Men det kanske inte den bästa layouten eftersom ortnamn ofta är längre än namnen på delstater, och textinmatningsrutan för Land/region är kort på grund av längden på dess etikett.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.

Du kan optimera utrymmet genom att stänga av Fäst vid kolumner i det högra fönstret och sedan hålla ned ALT-tangenten medan du ändrar kortens storlek och placering.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. När du håller ned ALT-tangenten visas alla kontroller med svarta bildtexter.Whenever you hold down the Alt key, all controls show black captions. Tanken med det här beteendet är att visa dig kontrollernas namn.This behavior is by design to show you control names.

Placera ut och ändra storlek med ALT-tangenten nedtryckt

Efter en noggrann placering av fälten har varje fält rätt storlek och avståndet är detsamma mellan fälten:After careful positioning, the result has appropriate sizes for each field and even spacing horizontally between fields:

Tredje leveransadressraden med exakt placering

Så vad är skillnaden när Fäst vid kolumner är aktiverat respektive inaktiverat?In summary, what are the differences when Snap to columns is on versus off?

BeteendeBehavior Fäst vid kolumner påSnap to columns On Fäst vid kolumner avSnap to columns Off
Storleksändring fäster motResize snaps to Antalet kolumner du markerar:Number of columns you select:
1, 2, 3, 4, 6 eller 121, 2, 3, 4, 6, or 12
12 kolumner12 columns
”Fäst mot kolumner” kan åsidosättasResize snap can be overriden NejNo Ja, med ALT-tangentenYes, with Alt key
Kort placeras automatiskt mellan rader (mer om detta senare)Cards automatically re-layout between rows (more on this later) JaYes NejNo

Ange bredd och höjdSet width and height

Som allt annat i PowerApps styrs formulärets layout av egenskaperna i kortkontrollerna.As with everything in PowerApps, the form's layout is governed by properties on the card controls. Så som redan beskrivits kan du ändra dessa egenskapers värden genom att dra kontrollerna till olika platser eller genom att ändra kontrollernas storlek genom att dra i handtagen.As already described, you can change the values of these properties by dragging controls to different locations or dragging grab handles to resize controls. Men du kommer att hamna i situationer då du vill ha mer kontroll och kunna justera dessa egenskaper mer precist, särskilt när du gör formulären dynamiska med formler.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.

Grundläggande layout: X, Y och breddBasic Layout: X, Y, and Width

Egenskaperna X och Y styr kortens positioner.The X and Y properties control the position of cards. När vi arbetar med kontroller på arbetsytan ger de här egenskaperna en absolut position.When we work with controls on the raw canvas, these properties provide an absolute position. I formulär har dessa egenskaper en annan betydelse:In a form, these properties have a different meaning:

  • X: Ordning inom en rad.X: Order within a row.
  • Y: Radnummer.Y: Row number.

Liksom kontrollerna på arbetsytan anger egenskapen Width den minsta bredden för kortet (mer information om minsta förhållande kommer snart).Similar to controls on the canvas, the Width property specifies the minimum width of the card (more on the minimum aspect in a moment).

Låt oss ta en titt på egenskaperna X, Y och Width för korten i formuläret:Let's take a look at the X, Y, and Width properties of the cards in our form:

X- och Y-koordinaterna i försäljningsorderformuläret

Får inte plats på radenOverflowing rows

Vad händer om korten på en rad är för breda för att få plats på raden?What happens if the cards on a row are too wide to fit on that row? Normalt behöver du inte bekymra dig om den här möjligheten.Normally you don't need to worry about this possibility. När Fäst vid kolumner är aktiverat justeras dessa tre egenskaper automatiskt så att allt passar på ett snyggt sätt på raderna, inom radens gräns.With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

Men om Fäst vid kolumner är inaktiverat eller om det finns formler som är baserade på Width i ett eller flera kort kan kort spilla över och hamna utanför raden.But with Snap to columns turned off or a formula-based Width on one or more of your cards, overflowing a row can happen. I så fall görs automatiskt en radbrytning och en ny rad skapas.In this case, the cards will automatically wrap so that, effectively, another row is created. Låt oss till exempel ändra egenskapen Width manuellt för kortet Customer purchase order reference (Inköpsorder, kundreferens) (första raden, tredje objektet) till 500:For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 500:

Manuell storleksändring av kort med radbrytning

De tre korten på den översta raden får inte längre plats vågrätt, och en ny rad har skapats med innehållet som inte fick plats på raden.The three cards on the top row no longer fit horizontally, and another row has been created to wrap the overflow. Y-koordinaten för alla dessa kort är fortfarande 0 och korten Name och Description har fortfarande Y-värdet 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. Kort som har olika Y-värden kopplas inte samman över rader.Cards that have different Y values aren't merged across rows.

Du kan använda det här beteendet när du vill skapa en helt dynamisk layout där korten placeras baserat på Z-ordningen, så att de fyller ut så mycket som möjligt och innan de flyttar till nästa rad.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. Om du vill uppnå detta ger du alla kort samma Y-värde och använder X för ordningen på korten.To achieve this effect, give all the cards the same Y value, and use X for the order of the cards.

Fylla tomrum: WidthFitFilling spaces: WidthFit

Spillet i det sista exemplet skapade ett tomrum efter Order status-kortet, vilket var det andra kortet på den första raden.The overflow in the last example created a space after the Order status card, which was the second card in the first row. Vi kan justera Width-egenskaperna manuellt för de två återstående korten för att fylla tomrummet, men den metoden är lite omständlig.We could manually adjust the Width properties of the two remaining cards to fill this space, but this approach is tedious.

I stället kan du använda egenskapen WidthFit.As an alternative, use the WidthFit property. Om den här egenskapen anges till true för ett eller flera kort på en rad, så blir eventuella återstående tomrum jämnt fördelade mellan dem.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. Det är därför vi tidigare sa att egenskapen Width för ett kort är ett minimum och det som faktiskt visas kan vara bredare.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. Den här egenskapen gör aldrig så att ett kort krymper, bara så att det expanderar.This property will never cause a card to shrink, only expand.

Om vi ger WidthFit värdet true för kortet Order status så fyller det ut det tillgängliga utrymmet, medan det första kortet förblir oförändrat:If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

WidthFit med värdet true på det andra kortet

Om vi även ger WidthFit värdet true för det första Order date-kortet, så fördelas det tillgängliga utrymmet jämnt på de båda korten:If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

WidthFit med värdet true på det första och andra kortet

Observera att handtagen på dessa kort tar med den extra bredden från WidthFit i beräkningen, inte den minsta bredden som anges av egenskapen 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. Det kan vara förvirrande att ändra egenskapen Width medan WidthFit är aktiverat. Det kan vara bra att inaktivera det, göra ändringar i Width och sedan aktivera det igen.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.

När är WidthFit användbart?When might WidthFit be useful? Om du har ett fält som endast används i vissa situationer kan du ange dess Visible-egenskap till false så att andra kort på raden automatiskt fyller utrymmet runt fältet.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. Du kanske vill använda en formel som visar ett fält endast när ett annat fält har ett visst värde.You might want to use a formula that shows a field only when another field has a particular value.

Här anger vi Visible-egenskapen för fältet Order status till ett statiskt false:Here, we'll set the Visible property of the Order status field to a static false:

WidthFit är angett till true på första kortet med orderstatus osynlig

Med det andra kortet effektivt borttaget kan det tredje kortet nu återgå till samma rad som det första kortet.With the second card effectively removed, the third card can now return to the same row as the first card. Det första kortet har fortfarande WidthFit angett till true, så det fyller på egen hand ut det tillgängliga utrymmet.The first card still has WidthFit set to true, so it alone expands to fill the available space.

Eftersom Order status är osynligt, kan du inte välja det lika enkelt på arbetsytan.Because Order status is invisible, you can't select it as easily on the canvas. Du kan dock välja en kontroll, såväl synlig som osynlig, i den hierarkiska listan över kontroller på skärmens vänstra sida.However, you can select any control, visible or not, in the hierarchical list of controls on the left side of the screen.

HöjdHeight

Egenskapen Height styr höjden på varje kort.The Height property governs the height of each card. Det finns en motsvarighet till WidthFit för kortens höjd, och den har alltid värdet true.Cards have the equivalent of WidthFit for Height, and it's always set to true. Tänk dig att egenskapen HeightFit finns, men att du inte söker efter den i produkten, eftersom någon sådan egenskap ännu inte visas.Imagine that a HeightFit property exists, but don't look for it in the product because such a property isn't yet exposed.

Det går inte att inaktivera det här beteendet. Därför kan det vara lite knepigt att ändra höjden på korten.You can't turn off this behavior, so changing the heights of cards can be challenging. Alla kort i en rad får samma höjd som det högsta kortet.All cards within a row appear to be the same height as the tallest card. Du kan titta på en rad så här:You might look at a row like this:

WidthFit är angett till true för det första kortet med osynlig orderstatus

Vilket kort är det som gör att raden blir hög?Which card is making the row tall? På den tidigare bilden är kortet Total amount (Totalt belopp) markerat och ser högt ut, men dess egenskap Height har värdet 80 (samma höjd som den första raden).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). Om du vill minska höjden på en rad måste du minska egenskapen Height för radens högsta kort, och du kan inte identifiera det högsta kortet utan att kontrollera egenskapen Height för varje kort.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

Ett kort kan vara högre än vad du förväntar dig om det innehåller en kontroll för vilken egenskapen AutoHeight har getts värdet true.A card might also be taller than you expect if it contains a control for which the AutoHeight property is set to true. Många kort har t.ex. en etikett som visar ett felmeddelande om fältets värde orsakar verifieringsproblem.For example, many cards contain a label that displays an error message if the field's value causes a validation problem.

Om det inte finns någon text att visa (inga fel) får etiketten noll i höjd.Without any text to display (no error), the label collapses to zero height. Du skulle inte veta att den fanns där om du inte visste det. Och det är som det ska:If you didn't know any better, you wouldn't know it was there, and that's as it should be:

Höjden visas inte för kort som innehåller kontroller som har värdet true för AutoHeight

På skärmens vänstra sida visar listan över kontroller ErrorMessage1, vilket är vår etikettkontroll.On the left side of the screen, the list of controls shows ErrorMessage1, which is our label control. När du uppdaterar en app kan du markera den här kontrollen och ge den viss höjd och visa handtag med vilka du kan flytta kontrollen och ändra dess storlek.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. "A" i en blå ruta anger att kontrollens egenskap AutoHeight har värdet true:The "A" in a blue box indicates that the control has AutoHeight set to true:

När du redigerar får AutoHeight-kontroller en viss höjd så att de blir enklare att dra och släppa

Egenskapen Text för den här kontrollen har värdet Parent.Error, vilket används för att få dynamisk felinformation som baseras på verifieringsregler.The Text property of this control is set to Parent.Error, which is used to obtain dynamic error information based on validation rules. Vi kan illustrera detta genom att ange kontrollens egenskap Text statiskt, vilket ökar kontrollens höjd (och därmed även kortets) så att hela texten får plats: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:

Kontrollen och kortet expanderar automatiskt med ett felmeddelande

Lås oss göra felmeddelandet lite längre. Återigen expanderar kontrollen och kortet så att texten får plats.Let's make the error message a little longer, and again the control and the card grow to accommodate. Observera att hela radens höjd ökar så att korten fortsätter att vara lodrätt justerade:Note that the row overall grows in height, retaining vertical alignment between the cards:

Med ett längre felmeddelande blir kontrollen och kortet ännu större, och observera att alla kort på samma rad expanderar tillsammans