Uitlijning, marge, opvulling

In XAML-apps nemen de meeste gebruikersinterface-elementen (UI)-elementen over van de FrameworkElement-klasse . Elk FrameworkElement heeft dimensies, uitlijning, marge en opvullingseigenschappen, die invloed hebben op het gedrag van de indeling. De volgende richtlijnen bieden een overzicht van het gebruik van deze indelingseigenschappen om ervoor te zorgen dat de gebruikersinterface van uw app leesbaar en gemakkelijk te gebruiken is in elke context.

Afmetingen (hoogte, breedte)

De juiste grootte zorgt ervoor dat alle inhoud duidelijk en leesbaar is. Gebruikers hoeven niet te schuiven of in te zoomen om primaire inhoud te ontcijferen.

• Hoogte en breedte geven de grootte van een element op. De standaardwaarden zijn wiskundig NaN (geen getal). U kunt vaste waarden instellen die worden gemeten in effectieve pixels of u kunt automatische of proportionele grootte gebruiken voor vloeistofgedrag.

• ActualHeight en ActualWidth zijn alleen-lezeneigenschappen die de grootte van een element tijdens runtime bieden. Als vloeiende indelingen groter of kleiner worden, veranderen de waarden in een SizeChanged-gebeurtenis. Houd er rekening mee dat met een RenderTransform de waarden ActualHeight en ActualWidth niet worden gewijzigd.

• MinWidth/MaxWidth en MinHeight/MaxHeight geven waarden op die de grootte van een element beperken terwijl vloeiende herconfiguratie mogelijk is.

• FontSize en andere teksteigenschappen bepalen de indelingsgrootte voor tekstelementen. Hoewel tekstelementen niet expliciet dimensies hebben gedeclareerd, hebben ze wel ActualWidth en ActualHeight berekend.

Uitlijning

Uitlijning maakt uw gebruikersinterface er netjes, georganiseerd en evenwichtig uit en kan ook worden gebruikt om visuele hiërarchie en relaties tot stand te brengen.

• HorizontalAlignment en VerticalAlignment geven aan hoe een element in de bovenliggende container moet worden geplaatst.

  • De waarden voor HorizontalAlignment zijn Links, Centreren, Rechts en Stretch.
  • De waarden voor VerticalAlignment zijn Top, Center, Bottom en Stretch.

• Stretch is de standaardinstelling voor zowel de eigenschappen als de elementen, en deze vullen de gehele ruimte die ze in de bovenliggende container krijgen. Reële hoogte en breedte annuleren een Stretch-waarde, die in plaats daarvan optreedt als een centrale waarde. Sommige besturingselementen, zoals Button, overschrijven de standaard Stretch-waarde in hun standaardstijl.

• HorizontalContentAlignment en VerticalContentAlignment geven aan hoe kind-elementen in een container worden geplaatst.

• Uitlijning kan van invloed zijn op het afsnijden binnen een indelingsvenster. Met HorizontalAlignment="Left"bijvoorbeeld, de rechterkant van het element wordt geknipt als de inhoud groter is dan de ActualWidth.

• Tekstelementen gebruiken de eigenschap TextAlignment . Over het algemeen raden we u aan links uitlijning te gebruiken, de standaardwaarde. Zie Typografie voor meer informatie over stijltekst.

Marge en opvulling

Met marge- en opvullingseigenschappen wordt de gebruikersinterface niet te rommelig of te leeg gehouden, en kunnen bepaalde invoermethoden zoals pen en aanraken gemakkelijker gebruikt worden. Hier volgt een afbeelding met marges en opvulling voor een container en de inhoud ervan.

Marge

De marge bepaalt de hoeveelheid lege ruimte rond een element. Margin voegt geen pixels toe aan ActualHeight en ActualWidth en wordt niet beschouwd als onderdeel van het element voor hittests en het ophalen van invoergebeurtenissen.

• Margewaarden kunnen uniform of uniek zijn. Hiermee Margin="20"wordt een uniforme marge van 20 pixels toegepast op het element aan de linker-, boven-, rechter- en onderzijde. Hiermee Margin="0,10,5,25"worden de waarden toegepast op links, boven, rechts en onder (in die volgorde).
• Marges zijn additief. Als twee elementen beide een uniforme marge van 10 pixels opgeven en aangrenzende peers zijn in elke richting, is de afstand tussen deze elementen 20 pixels.
• Negatieve marges zijn toegestaan. Het gebruik van een negatieve marge kan echter vaak leiden tot het knippen of overtrekken van peers, dus het is geen veelgebruikte techniek om negatieve marges te gebruiken.
• Margewaarden worden uiteindelijk beperkt, dus wees voorzichtig met marges, aangezien containers elementen kunnen afsnijden of beperken. Een margewaarde kan de oorzaak zijn van een element dat niet wordt weergegeven; met een toegepaste marge kan de dimensie van een element worden beperkt tot 0.

Opvulling

Met opvulling bepaalt u de hoeveelheid ruimte tussen de binnenrand van een element en de onderliggende inhoud of elementen. Een positieve opvullingswaarde vermindert het inhoudsgebied van het element.

In tegenstelling tot Margin is Opvulling geen eigenschap van FrameworkElement. Er zijn verschillende klassen die elk hun eigen opvullingseigenschap definiëren:

• Control.Padding: erft naar alle van Control afgeleide klassen. Niet alle besturingselementen hebben inhoud, dus voor deze besturingselementen doet het instellen van de eigenschap niets. Als het besturingselement een rand heeft, wordt de opvulling binnen die rand toegepast.
• Border.Padding: definieert ruimte tussen de rechthoekige lijn die is gemaakt door BorderThickness/BorderBrush en het Child-element.
• ItemsPresenter.Padding: draagt bij aan het uiterlijk van de items in itembesturingselementen, waarbij de opgegeven opvulling rond elk item wordt geplaatst.
• TextBlock.Padding en RichTextBlock.Padding: vouw het begrenzingsvak rond de tekst van het tekstelement uit. Deze tekstelementen hebben geen achtergrond, dus het kan visueel moeilijk te zien zijn. Gebruik daarom marge-instellingen in plaats daarvan voor blokcontainers .

In elk van deze gevallen hebben elementen ook een eigenschap Margin. Als zowel Marge als Opvulling worden toegepast, zijn ze additief: de schijnbare afstand tussen een buitencontainer en eventuele binneninhoud is marge plus opvulling.

Voorbeeld

Laten we eens kijken naar de effecten van Marge en Opvulling op echte besturingselementen. Hier ziet u een tekstvak in een raster met de standaardwaarden marge en opvulling van 0.

Dit is hetzelfde tekstvak en raster met marge- en opvullingswaarden in het tekstvak, zoals wordt weergegeven in deze XAML.

<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
    <TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>

Stijlbronnen

U hoeft niet elke eigenschapswaarde afzonderlijk in te stellen voor een besturingselement. Het is doorgaans efficiënter om eigenschapswaarden te groeperen in een stijlresource en de stijl toe te passen op een besturingselement. Dit geldt met name wanneer u dezelfde eigenschapswaarden op veel besturingselementen moet toepassen. Zie XAML-stijlen voor meer informatie over het gebruik van stijlen.

Algemene aanbevelingen

• Pas alleen meetwaarden toe op bepaalde belangrijke elementen en gebruik het gedrag van de vloeistofindeling voor de andere elementen. Dit zorgt voor responsieve gebruikersinterface wanneer de breedte van het venster verandert.
• Als u metingswaarden gebruikt, moeten alle dimensies, marges en opvulling oplopen tot 4 epx. Wanneer XAML effectieve pixels en schaalaanpassing gebruikt om uw app leesbaar te maken op alle apparaten en schermgrootten, worden ui-elementen geschaald op veelvouden van 4. Het gebruik van waarden in stappen van 4 resulteert in de beste rendering door uit te lijnen met hele pixels.
• Voor kleine vensterbreedten (minder dan 640 pixels) raden we 12 epx-gutters aan en voor grotere vensterbreedten raden we 24 epx-gutters aan.

Verwante onderwerpen

• FrameworkElement.Hoogte
• FrameworkElement.Width
• FrameworkElement.HorizontalAlignment
• FrameworkElement.VerticalAlignment
• FrameworkElement.Marge
• Controle.Opvulling