Delen via

Walkthrough: Besturingselementen indelen met opvulling, marges en de AutoSize-eigenschap

  • Artikel

Nauwkeurige plaatsing van besturingselementen op uw formulier is een hoge prioriteit voor veel toepassingen. De Windows Forms Designer- in Visual Studio biedt u veel indelingshulpprogramma's om dit te bereiken. Drie van de belangrijkste eigenschappen zijn Margin, Paddingen AutoSize, die op alle Windows Forms-besturingselementen aanwezig zijn.

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 eigenschappen Padding en Margin op een besturingselement.

Opvulling en Marges voor Besturingselementen voor Windows Forms

De eigenschap AutoSize geeft een besturingselement aan automatisch zijn grootte aan de inhoud aan te passen. Het zal zichzelf niet verkleinen tot minder dan de waarde van zijn oorspronkelijke eigenschap Size, en het zal rekening houden met de waarde van zijn eigenschap Padding.

Voorwaarden

U hebt Visual Studio nodig om deze handleiding te voltooien.

Het project maken

  1. Maak in Visual Studio een Windows Application-project met de naam LayoutExample.

  2. Selecteer het formulier in de Windows Forms Designer-.

Marges instellen voor besturingselementen

U kunt de standaardafstand tussen uw besturingselementen instellen met behulp van de eigenschap Margin. Wanneer u een besturingselement dicht genoeg naar een ander besturingselement verplaatst, ziet u een snapline met de marges voor de twee besturingselementen. Het besturingselement dat u verplaatst, wordt ook uitgelijnd op de afstand die door de marges is gedefinieerd.

Rangschik besturingselementen op uw formulier gebruikmakend van de eigenschap Margin

  1. Sleep twee Button besturingselementen uit de Gereedschapskist op jouw formulier.

  2. Selecteer een van de Button bedieningselementen en verplaats deze naar de andere toe, totdat ze bijna aanraken.

    Bekijk de snapline die ertussen wordt weergegeven. Deze afstand is de som van de Margin waarden van de twee besturingselementen. Het besturingselement dat u verplaatst, wordt naar deze afstand verplaatst. Zie Walkthrough: Besturingselementen in Windows Forms rangschikken met behulp van snaplinesvoor meer informatie.

  3. Wijzig de eigenschap Margin van een van de besturingselementen door de Margin vermelding in het venster Eigenschappen uit te vouwen en de eigenschap All in te stellen op 20.

  4. Selecteer een van de Button bedieningspanelen en verplaats deze dicht bij de rest.

    De snaplijn die de som van de margewaarden definieert, is langer, waardoor het controle-element naar een grotere afstand van het andere controle-element toe snapt.

  5. Wijzig de eigenschap Margin van het geselecteerde besturingselement door de Margin vermelding in het venster Eigenschappen uit te vouwen en de eigenschap Top in te stellen op 5.

  6. Verplaats het geselecteerde besturingselement onder het andere besturingselement en kijk of de snapline korter is. Verplaats het geselecteerde besturingselement links van het andere besturingselement en kijk of de snapline de waarde behoudt die in stap 4 is waargenomen.

  7. U kunt elk van de aspecten van de eigenschap Margin, Left, Top, Right, Bottom, instellen op verschillende waarden of u kunt ze allemaal instellen op dezelfde waarde met de eigenschap All.

Opvulling instellen voor bedieningselementen

Om de precieze opmaak te bereiken die nodig is voor uw applicatie, bevatten uw besturingselementen vaak subbesturingselementen. Als u de nabijheid van de rand van het kindbesturingselement tot de rand van het ouderbesturingselement wilt opgeven, gebruikt u de eigenschap Padding van het ouderbesturingselement in combinatie met de eigenschap Margin van het kindbesturingselement. De eigenschap Padding wordt ook gebruikt om de nabijheid van de inhoud van een besturingselement te beheren (bijvoorbeeld de eigenschap Button van een besturingselement Text) aan de randen.

Besturingselementen in uw formulier rangschikken met behulp van opvulling

  1. Sleep een Button controle van de Toolbox naar je formulier.

  2. Wijzig de waarde van de eigenschap AutoSize van het Button besturingselement in true.

  3. Wijzig de eigenschap Padding door de Padding vermelding in het venster Eigenschappen uit te vouwen en de eigenschap All in te stellen op 5.

    Het controle-element breidt zich uit om ruimte te maken voor de nieuwe opvulling.

  4. Sleep een GroupBox besturingselement van de Toolbox naar je formulier. Sleep een Button besturingselement uit de Werkset naar het besturingselement GroupBox. Plaats het Button-element zo dat het aansluit tegen de rechterbenedenhoek van het GroupBox-element.

    Bekijk de snaplines die worden weergegeven als het Button besturingselement de onder- en rechterranden van het GroupBox besturingselement nadert. Deze snaplines komen overeen met de eigenschap Margin van de Button.

  5. Wijzig de eigenschap Padding van het GroupBox besturingselement door de vermelding Padding uit te vouwen in het venster Eigenschappen en de eigenschap All in te stellen op 20.

  6. Selecteer de regelaar Button binnen de regelaar GroupBox en verplaats deze richting het midden van de GroupBox.

    De snaplines verschijnen op een grotere afstand van de randen van de GroupBox-besturing. Deze afstand is de som van de eigenschap Margin van het Button besturingselement en de eigenschap Padding van het GroupBox besturingselement.

Automatische regelingen voor grootte

In sommige toepassingen is de grootte van een besturingselement niet hetzelfde tijdens de uitvoering als tijdens het ontwerp. De tekst van een besturingselement Button kan bijvoorbeeld uit een database worden gehaald en de lengte ervan is niet van tevoren bekend.

Wanneer de eigenschap AutoSize is ingesteld op true, past het besturingselement zijn grootte aan zijn inhoud aan. Voor meer informatie, zie Overzicht van de AutoSize-eigenschap.

Besturingselementen in uw formulier rangschikken met de eigenschap AutoSize

  1. Sleep een Button besturingselement van de Toolbox naar uw formulier.

  2. Wijzig de waarde van de eigenschap AutoSize van het Button besturingselement in true.

  3. Wijzig de eigenschap Text van het besturingselement Button in Deze knop heeft een lange tekenreeks voor de eigenschap Tekst.

    Wanneer u de wijziging doorvoert, verkleint of vergroot controle Button zichzelf om aan de nieuwe tekst te passen.

  4. Sleep nog een Button besturingselement uit de Gereedschapskist naar het formulier.

  5. Wijzig de eigenschap Text van het Button besturingselement in 'Deze knop heeft een lange tekenreeks voor de eigenschap Tekst."

    Wanneer u de wijziging doorvoert, wordt het formaat van het besturingselement Button niet aangepast en wordt de tekst afgekapt door de rechterrand van het besturingselement.

  6. Wijzig de eigenschap Padding door de Padding vermelding in het venster Eigenschappen uit te vouwen en de eigenschap All in te stellen op 5.

    De tekst binnenin het bedieningselement wordt aan alle vier de zijden afgesneden.

  7. Wijzig de AutoSize-eigenschap van de Button-control naar waar.

    Het Button besturingselement wijzigt de grootte van de tekenreeks zodanig dat deze de hele tekenreeks omvat. Er is ook padding toegevoegd rond de tekst, waardoor het besturingselement Button in alle vier de richtingen uitbreidt.

  8. Sleep een Button besturingselement van de Toolbox naar uw formulier. Plaats deze rechtsonder in het formulier.

  9. Wijzig de waarde van de eigenschap AutoSize van het Button besturingselement in true.

  10. Stel de eigenschap Anchor van het Button besturingselement in op Right, Bottom.

  11. Wijzig de eigenschap Text van het Button besturingselement in 'Deze knop heeft een lange tekenreeks voor de eigenschap Tekst."

Wanneer u de wijziging doorvoert, wordt de grootte van het besturingselement Button automatisch naar links toe aangepast. Over het algemeen zal automatische dimensionering de grootte van een bedieningselement vergroten in de tegenovergestelde richting van de Anchor-eigenschap.

Eigenschappen AutoSize en AutoSizeMode

Sommige besturingselementen ondersteunen de eigenschap AutoSizeMode, waardoor u nauwkeuriger controle hebt over het automatische formaatgedrag van een besturingselement.

De eigenschap AutoSizeMode gebruiken

  1. Sleep een Panel-besturingselement vanuit de -gereedschapskist op uw formulier.

  2. Stel de waarde van de eigenschap AutoSize van het Panel besturingselement in op true.

  3. Sleep een Button besturingselement uit de Werkbalk naar het besturingselement Panel.

  4. Plaats het Button besturingselement naast de rechterbenedenhoek van het Panel besturingselement.

  5. Selecteer het Panel-bedieningselement en pak de formaatgreep rechtsonder. Wijzig het formaat van het Panel-besturingselement zodat dit zowel groter als kleiner kan worden.

    Notitie

    U kunt het formaat van het Panel besturingselement vrij wijzigen, maar u kunt het niet kleiner maken dan de positie van het Button besturingselement in de rechterbenedenhoek van het besturingselement. Dit gedrag wordt opgegeven met de standaardwaarde van de eigenschap AutoSizeMode, die GrowOnlyis.

  6. Stel de waarde van de eigenschap AutoSizeMode van het Panel besturingselement in op GrowAndShrink.

    De Panel past zichzelf aan om het Button-besturingselement te omgeven. U kunt het formaat van het besturingselement Panel niet wijzigen.

  7. Sleep het besturingselement Button naar de linkerbovenhoek van het Panel besturingselement.

    De grootte van het besturingselement Panel wordt aangepast aan de nieuwe positie van het Button besturingselement.

Volgende stappen

Er zijn veel andere indelingsfuncties voor het rangschikken van besturingselementen in uw Windows Forms-toepassingen. Hier volgen enkele combinaties die u kunt proberen:

Zie ook