Delen via

Overzicht: Besturingselementen in Windows Forms rangschikken met behulp van een TableLayoutPanel

  • Artikel

Voor sommige toepassingen is een formulier met een indeling vereist die op de juiste manier wordt gerangschikt wanneer het formulier wordt aangepast of als de inhoud in grootte verandert. Wanneer u een dynamische indeling nodig hebt en u niet expliciet Layout gebeurtenissen in uw code wilt verwerken, kunt u overwegen een indelingspaneel te gebruiken.

Het besturingselement FlowLayoutPanel en het besturingselement TableLayoutPanel bieden intuïtieve manieren om besturingselementen in uw formulier te rangschikken. Beide bieden een automatische, configureerbare mogelijkheid om de relatieve posities van onderliggende besturingselementen waarbinnen zij zijn geplaatst te beheren, en beide geven u dynamische lay-outfuncties tijdens uitvoeringstijd, waardoor ze de grootte van en de posities van onderliggende besturingselementen kunnen aanpassen als de afmetingen van het bovenliggende formulier veranderen. Lay-outpanelen kunnen worden genest binnen lay-outpanelen, om de realisatie van geavanceerde gebruikersinterfaces mogelijk te maken.

De FlowLayoutPanel rangschikt de inhoud ervan in een specifieke stroomrichting: horizontaal of verticaal. De inhoud ervan kan worden verpakt van de ene rij naar de volgende, of van de ene kolom naar de volgende. De inhoud ervan kan ook worden geknipt in plaats van verpakt. Zie Walkthrough: Besturingselementen in Windows Forms rangschikken met behulp van een FlowLayoutPanel-voor meer informatie.

De TableLayoutPanel rangschikt de inhoud ervan in een raster en biedt functionaliteit die vergelijkbaar is met de HTML-<-tabel> element. Met het TableLayoutPanel besturingselement kunt u besturingselementen in een rasterindeling plaatsen zonder dat u de positie van elk afzonderlijk besturingselement nauwkeurig hoeft op te geven. De cellen zijn gerangschikt in rijen en kolommen en deze kunnen verschillende grootten hebben. Cellen kunnen worden samengevoegd tussen rijen en kolommen. Cellen kunnen alles bevatten wat een formulier kan bevatten en zich in de meeste andere opzichten gedragen als containers.

Het besturingselement TableLayoutPanel biedt ook een proportionele mogelijkheid voor het wijzigen van de grootte tijdens runtime, zodat de indeling soepel kan veranderen wanneer het formulier wordt gewijzigd. Hierdoor is de TableLayoutPanel controle geschikt voor doeleinden zoals formulieren voor gegevensinvoer en gelokaliseerde toepassingen. Zie voor meer informatie Walkthrough: Een resizable Windows-formulier maken voor gegevensinvoer en walkthrough: een gelokaliseerd Windows-formulier maken.

Over het algemeen moet u geen TableLayoutPanel besturingselement gebruiken als een container voor de hele indeling. Gebruik TableLayoutPanel-besturingselementen om proportionele grootte-mogelijkheden te bieden aan componenten van de lay-out.

Taken die in deze walkthrough worden geïllustreerd, omvatten:

  • Een Windows Forms-project maken

  • Besturingselementen in rijen en kolommen rangschikken

  • Rij- en kolomeigenschappen instellen

  • Rijen en kolommen omspannen met een besturingselement

  • Automatische verwerking van overlopen

  • Besturingselementen invoegen door erop te dubbelklikken in de werkset

  • Een besturingselement invoegen door het overzicht ervan te tekenen

  • Bestaande bedieningselementen opnieuw toewijzen aan een andere ouder

Wanneer u klaar bent, hebt u inzicht in de rol die wordt gespeeld door deze belangrijke indelingsfuncties.

Het project maken

De eerste stap is het maken van het project en het instellen van het formulier.

Het project maken

  1. Maak een Windows-toepassingsproject met de naam TableLayoutPanelExample. Zie Procedure: Een Windows Forms-toepassingsproject maken voor meer informatie.

  2. Kies het formulier in de WindowsForms Designer.

Het rangschikken van besturingselementen in rijen en kolommen

Met het besturingselement TableLayoutPanel kunt u eenvoudig besturingselementen in rijen en kolommen rangschikken.

Besturingselementen in rijen en kolommen rangschikken met behulp van een TableLayoutPanel

  1. Sleep een TableLayoutPanel control van de Toolbox op je formulier. Houd er rekening mee dat het besturingselement TableLayoutPanel standaard vier cellen heeft.

  2. Sleep een besturingselement Button van de Werkset naar het besturingselement TableLayoutPanel en zet het neer op een van de cellen. Houd er rekening mee dat het besturingselement Button wordt gemaakt in de cel die u hebt geselecteerd.

  3. Sleep nog drie Button besturingselementen uit de Werkset naar het besturingselement TableLayoutPanel, zodat elke cel een knop bevat.

  4. Pak de verticale formaatgreep tussen de twee kolommen en verplaats deze naar links. Houd er rekening mee dat de Button besturingselementen in de eerste kolom worden gewijzigd in een kleinere breedte, terwijl de grootte van de Button besturingselementen in de tweede kolom ongewijzigd blijft.

  5. Pak de verticale formaatgreep tussen de twee kolommen en verplaats deze naar rechts. Houd er rekening mee dat de Button besturingselementen in de eerste kolom terugkeren naar de oorspronkelijke grootte, terwijl de Button besturingselementen in de tweede kolom naar rechts worden verplaatst.

  6. Verplaats de horizontale formaatgreep naar boven en naar beneden om het effect op de bedieningselementen in het deelvenster te zien.

Besturingselementen binnen cellen plaatsen met docking en verankering

Het ankergedrag van kindbesturingselementen in een TableLayoutPanel verschilt van het gedrag in andere containerbesturingselementen. Het dockinggedrag van kindbesturingselementen is vergelijkbaar met die van andere containerbesturingselementen.

Besturingselementen binnen cellen plaatsen

  1. Selecteer de eerste Button controle. Wijzig de waarde van de eigenschap Dock in Fill. Houd er rekening mee dat het besturingselement Button wordt uitgebreid om de cel te vullen.

  2. Selecteer een van de andere Button bedieningen. Wijzig de waarde van de eigenschap Anchor in Right. Houd er rekening mee dat deze wordt verplaatst, zodat de rechterrand zich in de buurt van de rechterrand van de cel bevindt. De afstand tussen de randen is de som van de eigenschap Margin van het besturingselement Button en de eigenschap Padding van het deelvenster.

  3. Wijzig de waarde van de eigenschap Anchor van het besturingselement Button in Right en Left. Houd er rekening mee dat de grootte van het besturingselement wordt aangepast aan de breedte van de cel, waarbij rekening wordt gehouden met de waarden Margin en Padding.

  4. Herhaal stap 2 en 3 met de stijlen Top en Bottom.

Rij- en kolomeigenschappen instellen

U kunt afzonderlijke eigenschappen van rijen en kolommen instellen met behulp van de verzamelingen RowStyles en ColumnStyles.

Rij- en kolomeigenschappen instellen

  1. Selecteer het besturingselement TableLayoutPanel in de Windows Forms Designer.

  2. Open in de vensters Eigenschappen de verzameling ColumnStyles door te klikken op het beletselteken (Knop Beletselteken (...) in het venster Eigenschappen van Visual Studio.) naast de kolommen vermelding.

  3. Selecteer de eerste kolom en wijzig de waarde van de eigenschap SizeType in AutoSize. Klik op OK- om de wijziging te accepteren. Houd er rekening mee dat de breedte van de eerste kolom wordt verkleind zodat deze past bij het Button besturingselement. Houd er ook rekening mee dat de breedte van de kolom niet kan worden aangepast.

  4. Open in het venster Eigenschappen de ColumnStyles verzameling en selecteer de eerste kolom. Wijzig de waarde van de eigenschap SizeType in Percent. Klik op OK- om de wijziging te accepteren. Wijzig het formaat van het besturingselement TableLayoutPanel in een grotere breedte en merk op dat de breedte van de eerste kolom wordt uitgebreid. Wijzig het formaat van het besturingselement TableLayoutPanel in een kleinere breedte en merk op dat de knoppen in de eerste kolom zijn aangepast aan de cel. Houd er ook rekening mee dat de breedte van de kolom kan worden aangepast.

  5. Open in het venster Eigenschappen de ColumnStyles verzameling en selecteer alle vermelde kolommen. Stel de waarde van elke SizeType eigenschap in op Percent. Klik op OK- om de wijziging te accepteren. Herhaal dit met de RowStyles collectie.

  6. Pak een van de formaatgrepen in de hoek en pas de breedte en hoogte van het TableLayoutPanel besturingselement aan. Houd er rekening mee dat de grootte van de rijen en kolommen wordt gewijzigd wanneer de grootte van het besturingselement TableLayoutPanel verandert. Houd er ook rekening mee dat de rijen en kolommen kunnen worden aangepast met de horizontale en verticale formaatgrepen.

Rijen en kolommen overspannen met een controle-element

Het besturingselement TableLayoutPanel voegt verschillende nieuwe eigenschappen toe aan besturingselementen tijdens het ontwerp. Twee van deze eigenschappen zijn RowSpan en ColumnSpan. U kunt deze eigenschappen gebruiken om een besturingselement van meer dan één rij of kolom te maken.

Rijen en kolommen overspannen met een besturingselement

  1. Selecteer het besturingselement Button in de eerste rij en de eerste kolom.

  2. Wijzig in de vensters Eigenschappen de waarde van de eigenschap ColumnSpan in 2. Houd er rekening mee dat het besturingselement Button de eerste kolom en de tweede kolom vult. Houd er ook rekening mee dat er een extra rij is toegevoegd om aan deze wijziging te voldoen.

  3. Herhaal stap 2 voor de eigenschap RowSpan.

Besturingselementen invoegen door erop te dubbelklikken in de werkset

U kunt uw TableLayoutPanel besturingselement vullen door te dubbelklikken op besturingselementen in de Werkset.

Besturingselementen invoegen door te dubbelklikken in de werkset

  1. Sleep een TableLayoutPanel-besturingselement van de -gereedschapskist op uw formulier.

  2. Dubbelklik op het Button controle-icon in de Werkbalk. Houd er rekening mee dat er een nieuwe knopbesturingselement wordt weergegeven in de eerste cel van het TableLayoutPanel-besturingselement.

  3. Dubbelklik op nog een aantal besturingselementen in de Werkset. Houd er rekening mee dat de nieuwe besturingselementen opeenvolgend worden weergegeven in de onbezette cellen van het TableLayoutPanel besturingselement. Houd er ook rekening mee dat het besturingselement TableLayoutPanel wordt uitgebreid om ruimte te bieden aan de nieuwe besturingselementen als er geen geopende cellen beschikbaar zijn.

Automatische afhandeling van overlopen

Wanneer u besturingselementen invoegt in het besturingselement TableLayoutPanel, hebt u mogelijk geen lege cellen meer voor de nieuwe besturingselementen. De TableLayoutPanel controle verwerkt deze situatie automatisch door het aantal cellen te verhogen.

Toekijken bij de automatische verwerking van overlopen

  1. Als het besturingselement TableLayoutPanel nog steeds lege cellen bevat, kunt u doorgaan met het invoegen van nieuwe Button besturingselementen totdat het besturingselement TableLayoutPanel vol is.

  2. Wanneer het TableLayoutPanel besturingselement vol is, dubbelklikt u op het pictogram Button in de Werkset om een ander Button besturingselement in te voegen. Houd er rekening mee dat besturingselement TableLayoutPanel nieuwe cellen maakt om de nieuwe controle op te vangen. Voeg nog een paar extra controles in en observeer het resizingsgedrag.

  3. Wijzig de waarde van de eigenschap GrowStyle van het TableLayoutPanel besturingselement in FixedSize. Dubbelklik op het pictogram Button in de Werkset om Button besturingselementen in te voegen totdat het TableLayoutPanel besturingselement vol is. Dubbelklik nogmaals op het pictogram Button in de Werkset. U ontvangt een foutmelding van de Windows Forms Designer die u informeert dat er geen extra rijen en kolommen kunnen worden gemaakt.

Een besturingselement invoegen door het overzicht ervan te tekenen

U kunt een besturingselement invoegen in een TableLayoutPanel besturingselement en de grootte ervan opgeven door het overzicht ervan in een cel te tekenen.

Een besturingselement invoegen door het overzicht ervan te tekenen

  1. Sleep een TableLayoutPanel besturingselement uit de Toolbox op uw formulier.

  2. Klik in de Gereedschapskistop het Button bedieningselement. Sleep deze niet naar het formulier.

  3. Beweeg de muisaanwijzer over de TableLayoutPanel controle. Houd er rekening mee dat de aanwijzer verandert in een kruisdraad met het besturingselementpictogram Button eraan gekoppeld.

  4. Klik en houd de muisknop ingedrukt.

  5. Sleep de muisaanwijzer om de omtrek van het besturingselement Button te tekenen. Wanneer u tevreden bent met de grootte, laat u de muisknop los. Houd er rekening mee dat het Button-besturingselement wordt gemaakt in de cel waarin u de omtrek van het besturingselement hebt getekend.

Meerdere besturingselementen in cellen zijn niet toegestaan

Het besturingselement TableLayoutPanel mag slechts één onderliggend besturingselement per cel bevatten.

Om aan te tonen dat meerdere besturingselementen in cellen niet zijn toegestaan

  • Sleep een Button-besturingselement uit de -gereedschapskist naar het TableLayoutPanel-besturingselement en plaats het in een van de bezette cellen. Houd er rekening mee dat u met het TableLayoutPanel besturingselement het Button besturingselement niet in de bezette cel kunt neerzetten.

Besturingselementen omwisselen

Met het besturingselement TableLayoutPanel kunt u de besturingselementen die zich in twee verschillende cellen bevinden omwisselen.

Besturingselementen wisselen

  • Sleep een van de Button besturingselementen van een bezette cel en laat deze vallen in een andere bezette cel. Houd er rekening mee dat de twee besturingselementen van de ene cel naar de andere worden verplaatst.

Volgende stappen

U kunt een complexe indeling bereiken met behulp van een combinatie van indelingspanelen en besturingselementen. Suggesties voor meer verkenning zijn:

  • Probeer het formaat van een van de Button elementen te vergroten en noteer het effect op de indeling.

  • Plak een selectie van meerdere besturingselementen in het TableLayoutPanel besturingselement en noteer hoe de besturingselementen worden ingevoegd.

  • Indelingspanelen kunnen andere indelingspanelen bevatten. Experimenteer met het plaatsen van een TableLayoutPanel-besturingselement op het bestaande besturingselement.

  • Het besturingselement TableLayoutPanel koppelen aan het bovenliggende formulier. Pas het formaat van het formulier aan en noteer het effect op de indeling.

Zie ook