Positie en indeling van besturingselementen

De plaatsing van besturingselementen in Windows Forms wordt niet alleen bepaald door het besturingselement, maar ook door het bovenliggende besturingselement. In dit artikel worden de verschillende instellingen beschreven die worden geboden door besturingselementen en de verschillende typen bovenliggende containers die van invloed zijn op de indeling.

Vaste positie en grootte

De positie waarop een bedieningselement op een bovenliggend element verschijnt, wordt bepaald door de waarde van de eigenschap Location ten opzichte van de linkerbovenhoek van het oppervlak van het bovenliggende element. De coördinaat linksboven van een besturingselement in het bovenliggende besturingselement is (x0,y0). De grootte van het besturingselement wordt bepaald door de eigenschap Size en vertegenwoordigt de breedte en hoogte van het besturingselement.

Wanneer een bedieningselement wordt toegevoegd aan een ouder dat automatische plaatsing afdwingt, wordt de positie en grootte van het bedieningselement gewijzigd. In dit geval kunnen de positie en grootte van het besturingselement mogelijk niet handmatig aangepast worden, afhankelijk van het type bovenliggend element.

De MaximumSize en MinimumSize eigenschappen helpen bij het instellen van de minimale en maximale ruimte die een besturingselement kan gebruiken.

Marge en opvulling

Er zijn twee besturingseigenschappen die helpen bij het nauwkeurig plaatsen van besturingselementen: Margin en Padding.

De eigenschap Margin bepaalt de ruimte rond het controle-element, zodat andere elementen op een bepaalde afstand van de randen blijven.

De eigenschap Padding definieert de ruimte in het interieur van een besturingselement waarmee de inhoud van het besturingselement (bijvoorbeeld de waarde van de eigenschap Text) een opgegeven afstand van de randen van het besturingselement wordt behouden.

In de volgende afbeelding ziet u de Margin en Padding eigenschappen van een besturingselement.

Visual Studio Designer respecteert deze eigenschappen wanneer u besturingselementen positioneert en het formaat ervan wijzigt. Snaplijnen worden weergegeven als hulplijnen om u te helpen buiten de opgegeven marge van een controle-element te blijven. Visual Studio geeft bijvoorbeeld de snapline weer wanneer u een besturingselement naast een ander besturingselement sleept:

Automatische plaatsing en grootte

Besturingselementen kunnen automatisch binnen hun bovenliggende element worden geplaatst. Sommige bovenliggende containers dwingen plaatsing af, terwijl anderen de controle-instellingen respecteren die de plaatsing begeleiden. Er zijn twee eigenschappen op een besturingselement die helpen bij automatische plaatsing en grootte binnen een bovenliggend item: Dock en Anchor.

Tekenvolgorde kan van invloed zijn op automatische plaatsing. De volgorde waarin een besturingselement wordt getekend, wordt bepaald door de index van het besturingselement in de verzameling van het bovenliggende element Controls. Deze index staat bekend als de Z-order. Elk bedieningselement wordt getekend in de omgekeerde volgorde zoals ze in de collectie staan. Dit betekent dat de verzameling een eerst-in-laatst getekende en laatst getekende verzameling is.

De MinimumSize en MaximumSize eigenschappen helpen bij het instellen van de minimale en maximale ruimte die een besturingselement kan gebruiken.

Dockingstation

Met Dock wordt ingesteld welke rand van het besturingselement is uitgelijnd op de bijbehorende zijde van de ouder en hoe de grootte van het besturingselement binnen de ouder wordt aangepast.

Wanneer een besturingselement is gedokt, bepaalt de container de ruimte die het moet innemen, en wijzigt de grootte en positie van het besturingselement. De breedte en hoogte van het besturingselement worden nog steeds gerespecteerd op basis van de dockingstijl. Als het besturingselement bijvoorbeeld bovenaan is gedokt, wordt de Height van het besturingselement gerespecteerd, maar wordt de Width automatisch aangepast. Als een besturingselement aan de linkerkant wordt gedockt, blijft het Width van het besturingselement behouden, maar wordt het Height automatisch bijgesteld.

Het Location besturingselement kan niet handmatig worden ingesteld als het koppelen van een besturingselement automatisch de positie instelt.

Het Z-order besturingselement heeft wel invloed op docking. Wanneer gedockte bedieningselementen worden ingedeeld, gebruiken ze de beschikbare ruimte. Als een besturingselement bijvoorbeeld eerst wordt getekend en aan de bovenkant wordt vastgezet, neemt het de volledige breedte van de container in beslag. Als een volgend besturingselement aan de linkerkant is gekoppeld, is er minder verticale ruimte beschikbaar.

Als het Z-order van de bedieningselementen wordt omgekeerd, is er nu meer initiële ruimte beschikbaar voor het bedieningselement dat aan de linkerkant is geplaatst. Het besturingselement gebruikt de volledige hoogte van de container. Het besturingselement dat aan de bovenkant is gekoppeld, heeft minder horizontale ruimte beschikbaar.

Naarmate de container groeit en verkleint, worden de besturingselementen die aan de container zijn gekoppeld, verplaatst en verkleind om de toepasselijke posities en grootten te behouden.

Als meerdere besturingselementen aan dezelfde kant van de container zijn gedokt, worden ze gestapeld op basis van hun Z-order.

Anker

Als u een besturingselement verankert, kunt u het besturingselement aan een of meer zijden van de bovenliggende container koppelen. Naarmate de container in grootte verandert, houden onderliggende verankerde bedieningselementen hun afstand tot de verankerde zijde.

Een besturingselement kan zonder beperking worden verankerd aan een of meer zijden. Het anker wordt ingesteld met de Anchor eigenschap.

Automatische grootte

Met de AutoSize eigenschap kan een besturingselement, indien nodig, de grootte ervan aanpassen aan de grootte die door de PreferredSize eigenschap is opgegeven. U past het groottegedrag voor specifieke besturingselementen aan door de eigenschap AutoSizeMode in te stellen.

Alleen sommige besturingselementen ondersteunen de eigenschap AutoSize. Daarnaast ondersteunen sommige besturingselementen die ondersteuning bieden voor de AutoSize eigenschap ook de AutoSizeMode eigenschap.

De eigenschap AutoSizeMode

De eigenschap AutoSizeMode biedt meer gedetailleerde controle over het standaardgedrag van AutoSize. De eigenschap AutoSizeMode geeft aan hoe een besturingselement van zichzelf aanpast aan de inhoud ervan. De inhoud kan bijvoorbeeld de tekst zijn voor een Button besturingselement of de onderliggende besturingselementen voor een container.

In de volgende lijst ziet u de AutoSizeMode waarden en het gedrag ervan.

• AutoSizeMode.GrowAndShrink

  Het besturingselement groeit of verkleint om de inhoud ervan te omvatten.

  De waarden MinimumSize en MaximumSize worden gehonoreerd, maar de huidige waarde van de eigenschap Size wordt genegeerd.

  Dit is hetzelfde gedrag als besturingselementen met de eigenschap AutoSize en geen AutoSizeMode eigenschap.

• AutoSizeMode.GrowOnly

  Het besturingselement groeit zoveel als nodig is om de inhoud ervan te omvatten, maar wordt niet kleiner dan de waarde die is opgegeven door de eigenschap Size.

  Dit is de standaardwaarde voor AutoSizeMode.

Besturingselementen die ondersteuning bieden voor de eigenschap AutoSize

In de volgende tabel wordt het niveau van ondersteuning voor automatische grootte per besturingselement beschreven:

AutoSize in de ontwerpomgeving

In de volgende tabel wordt het formaatgedrag van een besturingselement bij ontwerptijd beschreven, gebaseerd op de waarde van zijn AutoSize- en AutoSizeMode-eigenschappen.

Overschrijf de eigenschap SelectionRules om te bepalen of een bepaalde bedieningselement zich in een door de gebruiker aanpasbare toestand bevindt. In de volgende tabel betekent Moveable 'kan het formaat niet worden aangepast' alleen, 'kan het formaat wijzigen' betekent AllSizeable en Moveable.

Container: Formulier

Het Form is het hoofdobject van Windows Forms. Een Windows Forms-toepassing bevat meestal een formulier dat altijd wordt weergegeven. Formulieren bevatten besturingselementen en respecteren de Location en Size eigenschappen van het besturingselement voor handmatige plaatsing. Formulieren reageren ook op de Dock-eigenschap voor automatische plaatsing.

Meestal heeft een formulier grips op de randen waarmee de gebruiker het formaat van het formulier kan wijzigen. Met Anchor de eigenschap van een besturingselement kan het besturingselement groter en kleiner worden naarmate het formaat van het formulier wordt gewijzigd.

Container: Paneel

Het Panel besturingselement is vergelijkbaar met een formulier doordat het eenvoudig besturingselementen samen groepeert. Het ondersteunt dezelfde handmatige en automatische plaatsingsstijlen die een formulier doet. Zie de sectie Container: Formulier voor meer informatie.

Een paneel mengt zich naadloos met het bovenliggende element en snijdt elk gebied van een besturingselement af dat buiten de grenzen van het paneel valt. Als een besturingselement buiten de grenzen van het deelvenster valt en AutoScroll is ingesteld op true, worden schuifbalken weergegeven en kan de gebruiker door het deelvenster schuiven.

In tegenstelling tot het groepsvak heeft een deelvenster geen bijschrift en rand.

De bovenstaande afbeelding heeft een deelvenster met de BorderStyle eigenschap ingesteld om de grenzen van het deelvenster te demonstreren.

Container: Groepsvak

Het GroupBox besturingselement biedt een identificeerbare groepering voor andere besturingselementen. Normaal gesproken gebruikt u een groepsvak om een formulier op functie te verdelen. U hebt bijvoorbeeld een formulier dat persoonlijke gegevens vertegenwoordigt en de velden met betrekking tot een adres worden gegroepeerd. Tijdens het ontwerp is het eenvoudig om het groepsvak samen met de ingesloten besturingselementen te verplaatsen.

Het groepsvak ondersteunt dezelfde handmatige en automatische plaatsingsstijlen die een formulier heeft. Zie de sectie Container: Formulier voor meer informatie. Een groepsvak snijdt ook een deel van een besturingselement af dat buiten de grenzen van het paneel valt.

In tegenstelling tot het configuratiescherm heeft een groepsvak niet de mogelijkheid om inhoud te schuiven en schuifbalken weer te geven.

Container: Stroomindeling

Het besturingselement FlowLayoutPanel rangschikt de inhoud ervan in een horizontale of verticale stroomrichting. U kunt de inhoud van het besturingselement inpakken van de ene rij naar de volgende, of van de ene kolom naar de volgende. U kunt ook knippen in plaats van de inhoud te omwikkelen.

U kunt de stroomrichting opgeven door de waarde van de eigenschap FlowDirection in te stellen. De FlowLayoutPanel-controle keert zijn stroomrichting correct om in indelingen van rechts naar links (RTL). U kunt ook opgeven of de inhoud van het besturingselement van het FlowLayoutPanel wordt verpakt of geknipt door de waarde van de eigenschap WrapContents in te stellen.

Het FlowLayoutPanel-besturingselement past zijn grootte automatisch aan de inhoud aan wanneer u de AutoSize-eigenschap instelt op true. Het biedt ook een FlowBreak eigenschap aan zijn kindbesturingselementen. Door de waarde van de FlowBreak eigenschap op true in te stellen, zorgt u ervoor dat het FlowLayoutPanel besturingselement stopt met het vullen van besturingselementen in de huidige stroomrichting en doorgaat naar de volgende rij of kolom.

De bovenstaande afbeelding heeft twee FlowLayoutPanel besturingselementen waarbij de BorderStyle eigenschap is ingesteld om de grenzen van het besturingselement te demonstreren.

Container: Tabelindeling

Het besturingselement TableLayoutPanel rangschikt de inhoud ervan in een raster. Omdat de indeling zowel tijdens het ontwerp als tijdens de runtime wordt uitgevoerd, kan deze dynamisch worden gewijzigd wanneer de toepassingsomgeving verandert. Dit geeft de besturingselementen in het deelvenster de mogelijkheid om het formaat proportioneel te wijzigen, zodat ze kunnen reageren op wijzigingen zoals het wijzigen van de grootte van het bovenliggende besturingselement of het wijzigen van de tekstlengte vanwege lokalisatie.

Elk Windows Forms-besturingselement kan een kind zijn van het besturingselement TableLayoutPanel, inclusief andere exemplaren van TableLayoutPanel. Hiermee kunt u geavanceerde indelingen maken die zich aanpassen aan wijzigingen tijdens runtime.

U kunt ook de richting van het uitvouwen (horizontaal of verticaal) bepalen nadat de TableLayoutPanel controle vol is met kindcontrole-elementen. Standaard wordt besturingselement TableLayoutPanel naar beneden uitgebreid door rijen toe te voegen.

U kunt de grootte en stijl van de rijen en kolommen bepalen met behulp van de RowStyles en ColumnStyles eigenschappen. U kunt de eigenschappen van rijen of kolommen afzonderlijk instellen.

Het besturingselement TableLayoutPanel voegt de volgende eigenschappen toe aan de onderliggende besturingselementen: Cell, Column, Row, ColumnSpanen RowSpan.

De bovenstaande afbeelding bevat een tabel met de CellBorderStyle eigenschap die is ingesteld om de grenzen van elke cel weer te geven.

Container: Gesplitste container

Het Windows Forms SplitContainer besturingselement is een samengesteld besturingselement; het bestaat uit twee panelen gescheiden door een beweegbare balk. Wanneer de muis aanwijzer boven de balk staat, verandert de aanwijzer om aan te geven dat de balk beweegbaar is.

Met het SplitContainer besturingselement kunt u complexe gebruikersinterfaces maken; vaak bepaalt een selectie in het ene deelvenster welke objecten in het andere deelvenster worden weergegeven. Deze rangschikking is effectief voor het weergeven en browsen van informatie. Als u twee panelen hebt, kunt u informatie aggregeren in secties, en de balk of 'splitser' maakt het gemakkelijk voor gebruikers om de panelen van formaat te wijzigen.

De bovenstaande afbeelding bevat een gesplitste container om een linker- en rechterdeelvenster te maken. Het rechterdeelvenster bevat een tweede gesplitste container met de Orientation ingesteld op Vertical. De eigenschap BorderStyle is ingesteld om de grenzen van elk paneel te demonstreren.

Container: Tabblad-besturingselement

Het TabControl toont meerdere tabbladen, zoals scheidingstabbladen in een notitieblok of labels in een set mappen in een archiefkast. De tabbladen kunnen afbeeldingen en andere besturingselementen bevatten. Gebruik het tabbladbesturingselement om het type dialoogvenster met meerdere pagina's te produceren dat op veel plaatsen in het Windows-besturingssysteem wordt weergegeven, zoals het Configuratiescherm en Weergave-eigenschappen. Daarnaast kan de TabControl worden gebruikt om eigenschappenpagina's te maken, die worden gebruikt om een groep gerelateerde eigenschappen in te stellen.

De belangrijkste eigenschap van het TabControl is TabPages, die de afzonderlijke tabbladen bevat. Elk afzonderlijk tabblad is een TabPage object.