Kontrollers placering och layout

Kontrollplacering i Windows Forms bestäms inte bara av kontrollen, utan även av kontrollens överordnade. Den här artikeln beskriver de olika inställningarna som tillhandahålls av kontroller och de olika typer av överordnade containrar som påverkar layouten.

Fastställd position och storlek

Positionen som en kontroll visas på en överordnad bestäms av värdet för egenskapen Location i förhållande till den överordnade ytans övre vänstra del. Den övre vänstra positionskoordinaten för en kontroll i den överordnade är (x0,y0). Kontrollens storlek bestäms av egenskapen Size och representerar kontrollens bredd och höjd.

När en kontroll läggs till i en överordnad som framtvingar automatisk placering ändras kontrollens position och storlek. I det här fallet kanske kontrollens position och storlek inte justeras manuellt, beroende på typen av överordnad.

Egenskaperna MaximumSize och MinimumSize hjälper till att ange det minsta och högsta utrymme som en kontroll kan använda.

Marginal och utfyllnad

Det finns två kontrollegenskaper som hjälper till med exakt placering av kontroller: Margin och Padding.

Egenskapen Margin definierar utrymmet runt kontrollen som håller andra kontroller ett angivet avstånd från kontrollens kantlinjer.

Egenskapen Padding definierar utrymmet i det inre av en kontroll som behåller kontrollens innehåll (till exempel värdet för dess Text egenskap) ett angivet avstånd från kontrollens kantlinjer.

Följande bild visar Margin och Padding egenskaperna på en kontroll.

Visual Studio Designer respekterar dessa egenskaper när du placerar och ändrar storlek på kontroller. Snaplines visas som stödlinjer som hjälper dig att hålla dig utanför den angivna marginalen för en kontroll. Visual Studio visar till exempel snaplinjen när du drar en kontroll bredvid en annan kontroll:

Automatisk placering och storlek

Kontroller kan placeras automatiskt inom deras överordnade. Vissa föräldrakontainrar tvingar placering medan andra respekterar inställningar som styr placering. Det finns två egenskaper för en kontroll som underlättar automatisk placering och storleksändring inom en överordnad behållare: Dock och Anchor.

Ritningsordning kan påverka automatisk placering. I vilken ordning en kontroll ritas bestäms av kontrollens index i den överordnade Controls samlingen. Det här indexet Z-orderkallas . Varje kontroll ritas i omvänd ordning som de förekommer i samlingen. Det innebär att samlingen är en först in, sist ut och sist in, först ut-samling.

Egenskaperna MinimumSize och MaximumSize hjälper till att ange det minsta och högsta utrymme som en kontroll kan använda.

Docka

Egenskapen Dock anger vilken kantlinje av kontrollen som är justerad till motsvarande sida av den överordnade och hur kontrollen storleksändras inom den överordnade.

När en kontroll dockas avgör containern det utrymme den ska uppta och ändrar storlek på och placerar kontrollen. Kontrollens bredd och höjd respekteras fortfarande baserat på dockningsformatet. Om kontrollen till exempel är dockad överst, respekteras Height-egenskapen, men Width justeras automatiskt. Om en kontroll dockas till vänster respekteras Width för kontrollen, men Height justeras automatiskt.

Kontrollen Location kan inte anges manuellt eftersom dockning av en kontroll automatiskt anger positionen.

Kontrollen Z-order påverkar dockningen. När dockade kontroller har lagts ut använder de vilket utrymme som är tillgängligt för dem. Till exempel, om en kontroll ritas först och dockas överst, tar den upp hela bredden av containern. Om nästa kontroll är dockad till vänster, har den mindre vertikalt utrymme tillgängligt.

Om kontrollens Z-order är omvänd har kontrollen som är dockad till vänster nu mer ledigt initialt utrymme. Kontrollen använder hela containerns höjd. Kontrollen som är dockad överst har mindre horisontellt utrymme tillgängligt.

När containern växer och krymper flyttas kontrollerna som dockas till containern och storleksanpassas så att de bibehåller sina tillämpliga positioner och storlekar.

Animering som visar hur ett Windows-formulär med knappar som dockas i alla positioner storleksändras.

Om flera kontroller dockas på samma sida av containern, placeras de staplade i enlighet med deras Z-order.

Fästpunkt

Om du fäster en kontroll kan du koppla kontrollen till en eller flera sidor av den överordnade containern. När containern ändras i storlek behåller förankrade barnkontroller avståndet till den förankrade sidan.

En kontroll kan förankras på en eller flera sidor, utan begränsning. Fästpunkten anges med egenskapen Anchor .

Automatisk storleksändring

Egenskapen AutoSize gör det möjligt för en kontroll att ändra dess storlek, om det behövs, så att den passar den storlek som anges av PreferredSize egenskapen. Du justerar storleksbeteendet för specifika kontroller genom att ange egenskapen AutoSizeMode .

Endast vissa kontroller stöder egenskapen AutoSize . Dessutom stöder vissa kontroller som stöder AutoSize egenskapen även egenskapen AutoSizeMode .

Alltid sant beteende	Beskrivning
Automatisk storleksändring är en funktion vid körning.	Det innebär att den aldrig växer eller krymper en kontroll och därmed inte har någon ytterligare effekt.
Om en kontroll ändrar storlek förblir värdet för dess Location egenskap alltid konstant.	När en kontrolls innehåll får den att växa, växer kontrollen både åt höger och nedåt. Kontrollerna växer inte till vänster.
Egenskaperna Dock och Anchor respekteras när AutoSize är true.	Värdet på kontrollens Location-egenskap justeras till rätt värde. Kontrollen Label är undantaget från den här regeln. När du anger egenskapen Label till AutoSize för en dockad true-kontroll, kommer Label-kontrollen inte att sträckas.
En kontrolls och MaximumSize egenskaper respekteras MinimumSize alltid, oavsett värdet för dess AutoSize egenskap.	Egenskaperna MaximumSize och MinimumSize påverkas inte av egenskapen AutoSize.
Ingen minsta storlek har angetts som standard.	Det innebär att om en kontroll är inställd på att krympa under AutoSize och den inte har något innehåll, är Size värdet för dess (0x,0y) egenskap. I det här fallet krymper kontrollen till en punkt, och den syns inte tydligt.
Om en kontroll inte implementerar GetPreferredSize metoden GetPreferredSize returnerar metoden det senaste värdet som tilldelats Size egenskapen.	Det innebär att inställningen AutoSizetrue inte har någon effekt.
En kontroll i en TableLayoutPanel-cell krymper alltid för att passa i cellen tills den når sin MinimumSize.	Den här storleken tillämpas som en maximal storlek. Detta är inte fallet när cellen är en del av en AutoSize rad eller kolumn.

Egenskapen AutoSizeMode

Egenskapen AutoSizeMode ger mer detaljerad kontroll över standardbeteendet AutoSize . Egenskapen AutoSizeMode anger hur en kontroll storleksanpassar sig till innehållet. Innehållet kan till exempel vara texten för en Button kontroll eller barnkontroller för en container.

I följande lista visas AutoSizeMode värdena och dess beteende.

• AutoSizeMode.GrowAndShrink

  Kontrollen växer eller krymper för att omfatta dess innehåll.

  Värdena MinimumSize och MaximumSize respekteras, men det aktuella värdet för Size egenskapen ignoreras.

  Det här är samma beteende som kontroller med egenskapen AutoSize och ingen AutoSizeMode egenskap.

• AutoSizeMode.GrowOnly

  Kontrollen växer så mycket som behövs för att omfatta dess innehåll, men den krymper inte mindre än det värde som anges av dess Size egenskap.

  Det här är standardvärdet för AutoSizeMode.

Kontroller som stöder egenskapen AutoSize

I följande tabell beskrivs nivån för stöd för automatisk storleksändring efter kontroll:

Kontroll	AutoSize stödd	AutoSizeMode stödd
Button	✔️	✔️
CheckedListBox	✔️	✔️
FlowLayoutPanel	✔️	✔️
Form	✔️	✔️
GroupBox	✔️	✔️
Panel	✔️	✔️
TableLayoutPanel	✔️	✔️
CheckBox	✔️	❌
DomainUpDown	✔️	❌
Label	✔️	❌
LinkLabel	✔️	❌
MaskedTextBox	✔️	❌
NumericUpDown	✔️	❌
RadioButton	✔️	❌
TextBox	✔️	❌
TrackBar	✔️	❌
CheckedListBox	❌	❌
ComboBox	❌	❌
DataGridView	❌	❌
DateTimePicker	❌	❌
ListBox	❌	❌
ListView	❌	❌
MaskedTextBox	❌	❌
MonthCalendar	❌	❌
ProgressBar	❌	❌
PropertyGrid	❌	❌
RichTextBox	❌	❌
SplitContainer	❌	❌
TabControl	❌	❌
TabPage	❌	❌
TreeView	❌	❌
WebBrowser	❌	❌
ScrollBar	❌	❌

Autosize i designmiljön

I följande tabell beskrivs storleksbeteendet för en kontroll vid designtillfället, baserat på värdet för dess AutoSize och AutoSizeMode egenskaper.

SelectionRules Åsidosätt egenskapen för att avgöra om en viss kontroll är i ett användarförståeligt tillstånd. I följande tabell betyder "kan inte ändra storlek" endast Moveable, medan "kan ändra storlek" betyder AllSizeable och Moveable.

AutoSize inställning	AutoSizeMode inställning	Beteende
true	Egenskapen är inte tillgänglig.	Användaren kan inte ändra storlek på kontrollen vid designtillfället, förutom följande kontroller: - TextBox - MaskedTextBox - RichTextBox - TrackBar
true	GrowAndShrink	Användaren kan inte ändra storlek på kontrollen vid designtillfället.
true	GrowOnly	Användaren kan ändra storlek på kontrollen vid designtillfället. När egenskapen Size har angetts kan användaren bara öka kontrollens storlek.
false eller AutoSize är dold	Ej tillämpbart.	Användaren kan ändra storlek på kontrollen vid designtillfället.

Anmärkning

För att maximera produktiviteten döljer Windows Forms Designer i Visual Studio egenskapen för klassen AutoSize. Vid designtillfället beter sig formuläret som om AutoSize egenskapen är inställd på false, oavsett dess faktiska inställning. Vid körning görs ingen särskild åtgärd, och egenskapen AutoSize tillämpas enligt egenskapsinställningen.

Container: Formulär

Form är huvudobjektet i Windows Forms. Ett Windows Forms-program har vanligtvis ett formulär som visas hela tiden. Formulär innehåller kontroller och respekterar kontrollens egenskaper Location och Size för manuell placering. Formulär svarar också på dockegenskapen för automatisk placering.

För det mesta har ett formulär grepp på kanterna som gör att användaren kan ändra storlek på formuläret. Med egenskapen Anchor för en kontroll kan kontrollen expanderas och kontraheras när formuläret storleksändras.

Behållare: Panel

Kontrollen Panel liknar ett formulär eftersom den bara grupperar kontroller tillsammans. Det stöder samma manuella och automatiska placeringsformat som ett formulär gör. Mer information finns i avsnittet Container: Form .

En panel blandas sömlöst med den överordnade panelen, och den skär av alla områden i en kontroll som faller utanför panelens gränser. Om en kontroll faller utanför panelens gränser och AutoScroll är inställd på truevisas rullningslister och användaren kan rulla panelen.

Till skillnad från grupprutekontrollen har en panel ingen bildtext och kantlinje.

Bilden ovan har en panel med BorderStyle egenskapen inställd för att visa panelens gränser.

Container: Gruppruta

Kontrollen GroupBox ger en identifierbar gruppering för andra kontroller. Vanligtvis använder du en gruppruta för att dela upp ett formulär efter funktion. Du kan till exempel ha ett formulär som representerar personlig information och fälten som är relaterade till en adress grupperas tillsammans. I designfasen är det enkelt att flytta grupprutan tillsammans med de inneslutna kontrollerna.

Grupprutan stöder samma manuella och automatiska placeringsformat som ett formulär gör. Mer information finns i avsnittet Container: Form . En gruppruta skär också av alla delar av en styrkomponent som faller utanför panelens gränser.

Till skillnad från panelkontrollen har en gruppruta inte möjlighet att rulla innehåll och visa rullningslister.

Container: Flödeslayout

Kontrollen FlowLayoutPanel ordnar innehållet i en vågrät eller lodrät flödesriktning. Du kan omsluta kontrollens innehåll från en rad till en annan, eller från en kolumn till en annan. Alternativt kan du klippa ut i stället för att omsluta innehållet.

Du kan ange flödesriktningen genom att ange värdet för egenskapen FlowDirection. Kontrollen FlowLayoutPanel ändrar korrekt sin flödesriktning i RTL-layouter (höger till vänster). Du kan också ange om FlowLayoutPanel-kontrollens innehåll omsluts eller klipps av genom att ange värdet för egenskapen WrapContents.

FlowLayoutPanel kontrollerar automatiskt storleken på dess innehåll när du anger egenskapen AutoSize till true. Den tillhandahåller också en FlowBreak egenskap för sina underordnade kontroller. Om du anger värdet för FlowBreak egenskapen så true slutar FlowLayoutPanel kontrollen att lägga ut kontroller i den aktuella flödesriktningen och radbryts till nästa rad eller kolumn.

Bilden ovan har två FlowLayoutPanel kontroller med BorderStyle egenskapen inställd för att demonstrera kontrollens gränser.

Container: Tabelllayout

Kontrollen TableLayoutPanel ordnar innehållet i ett rutnät. Eftersom layouten görs både vid designtid och körning kan den ändras dynamiskt när programmiljön ändras. Detta ger kontrollerna i panelen möjlighet att ändra storlek proportionellt, så att de kan svara på ändringar som storleksändring av överordnad kontroll eller ändra textlängd på grund av lokalisering.

Alla Windows Forms-kontroller kan vara underordnade TableLayoutPanel-kontrollen, inklusive andra instanser av TableLayoutPanel. På så sätt kan du skapa avancerade layouter som anpassas till ändringar vid körning.

Du kan också styra expansionsriktningen (vågrät eller lodrät) efter att TableLayoutPanel-kontrollen har fyllts med underordnade kontroller. Som standard expanderar kontrollen TableLayoutPanel nedåt genom att lägga till rader.

Du kan styra storleken och stilen på raderna och kolumnerna genom att använda egenskaperna RowStyles och ColumnStyles. Du kan ange egenskaperna för rader eller kolumner individuellt.

Kontrollen TableLayoutPanel lägger till följande egenskaper i dess underordnade kontroller: Cell, Column, Row, ColumnSpanoch RowSpan.

Bilden ovan har en tabell med CellBorderStyle egenskapen inställd för att visa gränserna för varje cell.

Container: Uppdelad container

Windows Forms-kontrollen SplitContainer kan betraktas som en sammansatt kontroll. Det är två paneler avgränsade med ett flyttbart fält. När muspekaren är över stapeln ändrar pekaren form för att visa att stapeln kan flyttas.

Med SplitContainer kontroll kan du skapa komplexa användargränssnitt. Ofta avgör en markering i en panel vilka objekt som visas i den andra panelen. Det här arrangemanget är effektivt för att visa och bläddra information. Med två paneler kan du aggregera information i områden, och fältet, eller "splitter", gör det enkelt för användarna att ändra storlek på panelerna.

Bilden ovan har en delad container för att skapa ett vänster- och högerfönster. Den högra rutan innehåller en andra split-container med Orientation inställd på Vertical. Egenskapen BorderStyle är inställd på att visa gränserna för varje panel.

Container: Tabbkontroll

Visar TabControl flera flikar, till exempel avdelare i en anteckningsbok eller etiketter i en uppsättning mappar i ett arkivskåp. Flikarna kan innehålla bilder och andra kontroller. Använd flikkontrollen för att skapa den typ av dialogruta med flera sidor som visas på många platser i Windows-operativsystemet, till exempel Kontrollpanelen och Visningsegenskaper. Dessutom kan TabControl användas för att skapa egenskapssidor som används för att ange en grupp med relaterade egenskaper.

Den viktigaste egenskapen för TabControl är TabPages, som innehåller de enskilda flikarna. Varje enskild flik är ett TabPage objekt.