Dela via

Genomgång: Ordna kontroller i Windows-formulär med hjälp av en TableLayoutPanel

Vissa applikationer kräver ett formulär med en layout som anpassar sig lämpligt när formuläret ändras i storlek eller när innehållet ändrar storlek. När du behöver en dynamisk layout och inte vill hantera Layout händelser uttryckligen i koden bör du överväga att använda en layoutpanel.

Kontrollen FlowLayoutPanel och TableLayoutPanel ger intuitiva sätt att ordna kontroller i formuläret. Båda ger en automatisk, konfigurerbar möjlighet att kontrollera de relativa positionerna för underordnade kontroller som finns i dem, och båda ger dig dynamisk layoutfunktionalitet när körningen pågår, så att de kan ändra storlek på, samt flytta, underordnade kontroller när dimensionerna för det överordnade formuläret ändras. Layoutpaneler kan kapslas i layoutpaneler för att möjliggöra förverkligande av avancerade användargränssnitt.

FlowLayoutPanel ordnar innehållet i en specifik flödesriktning: vågrät eller lodrät. Innehållet kan omslutas från en rad till en annan, eller från en kolumn till en annan. Alternativt kan innehållet beskäras i stället för att omslutas. Mer information finns i Genomgång: Ordna kontroller i Windows-formulär med hjälp av en FlowLayoutPanel.

TableLayoutPanel ordnar innehållet i ett rutnät och tillhandahåller funktioner som liknar HTML-<tabell> element. Med TableLayoutPanel kontrollen kan du placera kontroller i en rutnätslayout utan att du behöver exakt ange positionen för varje enskild kontroll. Dess celler är ordnade i rader och kolumner, och dessa kan ha olika storlekar. Celler kan sammanfogas mellan rader och kolumner. Celler kan innehålla allt som ett formulär kan innehålla och bete sig i de flesta andra avseenden som containrar.

Kontrollen TableLayoutPanel erbjuder också en proportionell storleksändringsfunktion under körning, så att layouten kan ändras smidigt när formulärets storlek förändras. Detta gör kontrollen TableLayoutPanel väl lämpad för ändamål som datainmatningsformulär och lokaliserade program. Mer information finns i Genomgång: Skapa ett storleksbart Windows-formulär för datainmatning och genomgång: Skapa ett Lokalt Windows-formulär.

I allmänhet bör du inte använda en TableLayoutPanel kontroll som en container för hela layouten. Använd TableLayoutPanel kontroller för att tillhandahålla proportionella storleksändringsfunktioner till delar av layouten.

Uppgifter som illustreras i den här genomgången är:

  • Skapa ett Windows Forms-projekt

  • Ordna kontroller i rader och kolumner

  • Ange egenskaper för rad och kolumn

  • Sträcker sig över rader och kolumner med ett kontrollelement

  • Automatisk hantering av spill

  • Infoga kontroller genom att dubbelklicka på dem i verktygslådan

  • Infoga en kontroll genom att rita dess kontur

  • Överlåta befintliga kontroller till en annan förälder

När du är klar har du en förståelse för vilken roll dessa viktiga layoutfunktioner spelar.

Skapa projektet

Det första steget är att skapa projektet och konfigurera formuläret.

Så här skapar du projektet

  1. Skapa ett Windows-programprojekt med namnet "TableLayoutPanelExample". Mer information finns i Så här skapar du ett Windows Forms-programprojekt .

  2. Välj formuläret i WindowsForms Designer.

Ordna kontroller i rader och kolumner

Med TableLayoutPanel kontrollen kan du enkelt ordna kontroller i rader och kolumner.

Ordna kontroller i rader och kolumner med hjälp av en TableLayoutPanel

  1. Dra ett TableLayoutPanel-kontrollelement från -verktygslådan till ditt formulär. Observera att kontrollen som standard TableLayoutPanel har fyra celler.

  2. Dra en Button kontroll från verktygslådanTableLayoutPanel till kontrollen och släpp den i en av cellerna. Observera att Button kontrollen skapas i den cell som du har valt.

  3. Dra ytterligare Button tre kontroller från verktygslådanTableLayoutPanel till kontrollen, så att varje cell innehåller en knapp.

  4. Ta det lodräta storlekshandtaget mellan de två kolumnerna och flytta det till vänster. Observera att Button kontrollerna i den första kolumnen ändras till en mindre bredd, medan kontrollernas storlek Button i den andra kolumnen är oförändrad.

  5. Ta det lodräta storlekshandtaget mellan de två kolumnerna och flytta det till höger. Observera att Button kontrollerna i den första kolumnen återgår till sin ursprungliga storlek, medan Button kontrollerna i den andra kolumnen flyttas till höger.

  6. Flytta det vågräta storlekshandtaget uppåt och nedåt för att se effekten på kontrollerna i panelen.

Placera kontroller i celler med dockning och förankring

Förankringsbeteendet för barnkontroller i en TableLayoutPanel skiljer sig från beteendet i andra behållarkontroller. Dockningsbeteendet för underordnade kontroller är detsamma som för andra containerkontroller.

Positioneringskontroller i celler

  1. Välj den första Button-kontrollen. Ändra värdet för egenskapen Dock till Fill. Observera att kontrollen Button expanderar för att fylla cellen.

  2. Välj en av de andra Button kontrollerna. Ändra värdet för egenskapen Anchor till Right. Observera att den flyttas så att dess högra kantlinje ligger nära cellens högra kantlinje. Avståndet mellan kantlinjerna är summan av Button kontrollens Margin egenskap och panelens Padding egenskap.

  3. Ändra värdet för Button kontrollens Anchor egenskap till Right och Left. Observera att kontrollen är storleksanpassad till cellens bredd och att Margin värdena och Padding beaktas.

  4. Upprepa steg 2 och 3 med formaten Top och Bottom .

Ange egenskaper för rad och kolumn

Du kan ange enskilda egenskaper för rader och kolumner med hjälp av samlingarna RowStyles och ColumnStyles .

Ange rad- och kolumnegenskaper

  1. Välj kontrollen TableLayoutPanel i Windows Forms Designer.

  2. Öppna samlingen i fönstret ColumnStyles genom att klicka på ellipsen (knappen Ellips (...) i fönstret Egenskaper i Visual Studio.) bredvid posten Kolumner.

  3. Välj den första kolumnen och ändra värdet för dess SizeType egenskap till AutoSize. Klicka på OK för att acceptera ändringen. Observera att bredden på den första kolumnen är reducerad för att passa Button kontrollen. Observera också att kolumnens bredd inte kan ändras.

  4. Öppna samlingen i fönstret ColumnStyles och välj den första kolumnen. Ändra värdet för egenskapen SizeType till Percent. Klicka på OK för att acceptera ändringen. Ändra storlek på TableLayoutPanel kontrollen till en större bredd och observera att bredden på den första kolumnen expanderas. Ändra storlek på TableLayoutPanel kontrollen till en mindre bredd och observera att knapparna i den första kolumnen är storleksanpassade för att passa cellen. Observera också att kolumnens bredd kan ändras.

  5. I fönstret Egenskaper öppnar du ColumnStyles samlingen och markerar alla kolumner som visas. Ange värdet för varje SizeType egenskap till Percent. Klicka på OK för att acceptera ändringen. Upprepa med RowStyles kollektionen.

  6. Ta tag i ett av storlekshandtagen i hörnen och ändra storlek på kontrollens både bredd och höjd TableLayoutPanel. Observera att raderna och kolumnerna ändrar storlek när TableLayoutPanel kontrollens storlek ändras. Observera också att raderna och kolumnerna kan ändras med hjälp av de vågräta och lodräta draghandtagen.

Sträcker sig över rader och kolumner med ett kontrollelement

Kontrollen TableLayoutPanel lägger till flera nya egenskaper för kontroller vid designtillfället. Två av dessa egenskaper är RowSpan och ColumnSpan. Du kan använda de här egenskaperna för att göra ett kontrollintervall för mer än en rad eller kolumn.

Så här sträcker du dig över rader och kolumner med en kontroll

  1. Button Välj kontrollen i den första raden och den första kolumnen.

  2. I fönstret Egenskaper ändrar du värdet för ColumnSpan egenskapen till 2. Observera att kontrollen Button fyller den första kolumnen och den andra kolumnen. Observera även att en extra rad har lagts till för att hantera den här ändringen.

  3. Upprepa steg 2 för egenskapen RowSpan .

Infoga kontroller genom att dubbelklicka på dem i verktygslådan

Du kan fylla på din TableLayoutPanel-kontroll genom att dubbelklicka på kontrollerna i Verktygslåda.

Infoga kontroller genom att dubbelklicka i verktygslådan

  1. Dra ett TableLayoutPanel-kontrollelement från -verktygslådan till ditt formulär.

  2. Dubbelklicka på Button-kontrollikonen i Toolbox-. Observera att en ny knappkontroll visas i den TableLayoutPanel kontrollens första cell.

  3. Dubbelklicka på fler kontroller i Toolbox-. Observera att de nya kontrollerna visas successivt i TableLayoutPanel kontrollens obebodda celler. Observera också att TableLayoutPanel kontrollen expanderas för att hantera de nya kontrollerna om det inte finns några öppna celler tillgängliga.

Automatisk hantering av spill

När du infogar kontroller i TableLayoutPanel kontrollen kan du få slut på tomma celler för dina nya kontroller. Kontrollen TableLayoutPanel hanterar den här situationen automatiskt genom att öka antalet celler.

Observera automatisk hantering av överflöden

  1. Om det fortfarande finns tomma celler i TableLayoutPanel kontrollen fortsätter du att infoga nya Button kontroller tills kontrollen TableLayoutPanel är full.

  2. TableLayoutPanel När kontrollen är full dubbelklickar du på Button ikonen i verktygslådan för att infoga en annan Button kontroll. Observera att kontrollen TableLayoutPanel skapar nya celler för den nya kontrollen. Infoga några fler kontroller och observera storleksändringsbeteendet.

  3. Ändra värdet för TableLayoutPanel-kontrollens egenskap GrowStyle till FixedSize. Dubbelklicka på Button ikonen i verktygslådan för att infoga Button kontroller tills TableLayoutPanel kontrollen är full. Dubbelklicka på Button ikonen i verktygslådan igen. Observera att du får ett felmeddelande från Windows Forms Designer som informerar dig om att ytterligare rader och kolumner inte kan skapas.

Infoga en kontroll genom att rita dess kontur

Du kan infoga en kontroll i en TableLayoutPanel-kontroll och ange dess storlek genom att rita dess kontur i en cell.

Infoga en kontroll genom att rita dess kontur

  1. Dra ett TableLayoutPanel-kontrollelement från -verktygslådan till ditt formulär.

  2. I Toolboxklickar du på kontrollikonen Button. Dra den inte till formuläret.

  3. Flytta muspekaren över TableLayoutPanel kontrollen. Observera att pekaren ändras till ett hårkors och har ikonen Button för kontroll kopplad.

  4. Klicka och håll musknappen.

  5. Dra muspekaren för att rita konturen av Button kontrollen. När du är nöjd med storleken släpper du musknappen. Observera att Button kontrollen skapas i cellen där du ritade kontrollens disposition.

Flera kontroller i celler tillåts inte

Kontrollen TableLayoutPanel kan bara innehålla en underordnad kontroll per cell.

För att visa att flera kontroller i celler inte är tillåtna

  • Dra en Button kontroll från verktygslådan till TableLayoutPanel kontrollen och släpp den i en upptagen cell. Observera att TableLayoutPanel kontrollen inte tillåter att du släpper Button kontrollen i den ockuperade cellen.

Växla kontroller

Med TableLayoutPanel kontrollen kan du växla kontrollerna som upptar två olika celler.

Växla kontroller

  • Dra en av Button kontrollerna från en fylld cell och släpp den i en annan fylld cell. Observera att de två kontrollerna flyttas från en cell till en annan.

Nästa steg

Du kan uppnå en komplex layout med hjälp av en kombination av layoutpaneler och kontroller. Förslag på mer utforskning är:

  • Försök att ändra storlek på en av Button kontrollerna till en större storlek och notera effekten på layouten.

  • Klistra in en markering av flera kontroller i TableLayoutPanel kontrollen och notera hur kontrollerna infogas.

  • Layout-paneler kan innehålla andra layout-paneler. Experimentera med att integrera en TableLayoutPanel kontrollenhet i den befintliga kontrollenheten.

  • Docka kontrollen TableLayoutPanel till det överordnade formuläret. Ändra storlek på formuläret och notera effekten på layouten.

Se även