Delen via

Grootte en dichtheid van bedieningselementen

  • Artikel

Gebruik een combinatie van controlegrootte en -dichtheid om uw Windows-toepassing te optimaliseren en een gebruikerservaring te bieden die het meest geschikt is voor de functionaliteit en interactievereisten van uw app.

XAML-apps worden standaard weergegeven met een lage dichtheidsindeling (of Standard). Vanaf WinUI 2.1 wordt echter ook een high-density indelingsoptie (of Compact) ondersteund voor informatie-rijke gebruikersinterfaces en vergelijkbare gespecialiseerde scenario's. Dit kan worden opgegeven via een eenvoudige stijlresource (zie de voorbeelden hieronder).

Hoewel de functionaliteit en het gedrag niet zijn gewijzigd en consistent blijven voor de twee opties voor grootte en dichtheid, is de standaardtekengrootte voor de hoofdtekst bijgewerkt naar 14px voor alle besturingselementen ter ondersteuning van deze twee dichtheidsopties. Deze tekengrootte werkt tussen regio's en apparaten en zorgt ervoor dat uw toepassing evenwichtig en comfortabel blijft voor gebruikers.

Voorbeelden

Open de WinUI 3 Gallery-app en zie voorbeelden van afstand

Open de WinUI 3 Gallery-app en zie Compacte grootte in actie

De WinUI 3 Gallery app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Download de app uit de Microsoft Store of haal de broncode op GitHub-

Standaardmaat voor Fluent

Fluent Standard-formaat is gemaakt om een balans te bieden tussen informatiedichtheid en gebruikerscomfort. In feite worden alle items op het scherm uitgelijnd op een doel van 40x40 effectieve pixels (epx), waarmee UI-elementen op een raster kunnen worden uitgelijnd en op de juiste manier kunnen worden geschaald op basis van schaalaanpassing op systeemniveau.

Standaardgrootte is ontworpen voor zowel aanraak- als aanwijzerinvoer.

Notitie

Zie Schermgrootten en onderbrekingspunten voor meer informatie over effectieve pixels en schalen

Zie Uitlijning, marge, opvullingvoor meer informatie over schalen op systeemniveau.

Fluent Compact formaat

Compact formaat maakt compacte, informatierijke groepen besturingselementen mogelijk en kan u helpen met het volgende:

  • Het doorbladeren van grote hoeveelheden inhoud.
  • Zichtbare inhoud op een pagina maximaliseren.
  • Navigeren en communiceren met besturingselementen en inhoud

Compact formaat is voornamelijk ontworpen voor aanwijzerinvoer.

Voorbeelden van compacte grootte

Compacte grootte wordt geïmplementeerd via een speciale resourcewoordenlijst die kan worden opgegeven in uw toepassing op paginaniveau of op een specifieke indeling. De resourcewoordenlijst is beschikbaar in het WinUI Nuget-pakket.

In de volgende voorbeelden ziet u hoe de stijl Compact kan worden toegepast op de pagina en een individueel gridbesturingselement.

Paginaniveau

<Page.Resources>
    <ResourceDictionary 
        Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml"/>
</Page.Resources>

Rasterniveau

<Grid>
    <Grid.Resources>
        <ResourceDictionary 
           Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml"/>
    </Grid.Resources>
</Grid>

Afmetingen instellen in Windows-apps

In de Update van Windows 10 oktober 2018 (versie 1809 en hoger) is de standaardgrootte voor alle Windows XAML-besturingselementen verminderd om de bruikbaarheid in alle gebruiksscenario's te verhogen.

In de volgende afbeelding ziet u enkele van de wijzigingen in de besturingselementindeling die zijn geïntroduceerd met de Update van Windows 10 oktober 2018. De marge tussen een koptekst en de bovenkant van een besturingselement is met name afgenomen van 8epx tot 4epx en het raster van 44epx is gewijzigd in een 40epx-raster.

voorbeeld van standaardbesturingsindeling

In deze afbeelding ziet u de wijzigingen in de grootte van besturingselementen voor de Windows 10-update van oktober 2018. Met name uitlijnen op het raster van 40epx.

Standaard commandovoordeelvoorbeeld