Schaduwen in Windows-apps

Windows-apps maken gebruik van schaduwen om diepte uit te drukken en visuele hiërarchie toe te voegen. Schaduwen helpen de indruk van verhoging te creëren, waardoor de focus van de gebruiker naar de belangrijkste elementen in uw gebruikersinterface wordt geleid.

Schaduw is een manier waarop een gebruiker hoogte waarneemt. Licht boven een verhoogd object creëert een schaduw op het oppervlak eronder. Hoe hoger het object, hoe groter en zachter de schaduw wordt. Verhoogde objecten in uw gebruikersinterface hoeven geen schaduwen te hebben, maar ze helpen het uiterlijk van verhoging te creëren.

In Windows apps moeten schaduwen op een doelgerichte manier worden gebruikt in plaats van esthetisch. Als u te veel schaduwen gebruikt, vermindert of elimineert u de mogelijkheid van de schaduw om de gebruiker te concentreren.

Als u standaardbesturingselementen gebruikt, worden schaduwen al opgenomen in uw gebruikersinterface. U kunt echter handmatig schaduwen in uw gebruikersinterface opnemen met behulp van de ThemeShadow of de DropShadow-API's .

ThemeShadow

Het type ThemeShadow kan worden toegepast op elk XAML-element om schaduwen op de juiste wijze te tekenen op basis van x-, y-, z-coördinaten.

• Er worden schaduwen toegepast op elementen op basis van z-dieptewaarde, die diepte emuleren.
• Het houdt schaduwen consistent in alle toepassingen dankzij de ingebouwde schaduwesthetiek.

Hier ziet u hoe ThemeShadow is geïmplementeerd in een MenuFlyout. MenuFlyout heeft een ingebouwde schaduw met een diepte van 32 pixels toegepast op het hoofdmenu en alle geneste menu's.

ThemeShadow in algemene bedieningscomponenten

De volgende algemene besturingselementen gebruiken automatisch ThemeShadow om schaduwen met een diepte van 32px te maken, tenzij anders opgegeven.

• Contextmenu, opdrachtbalk, opdrachtenbalk flyout, MenuBar
• Dialoogvensters en uitvouwmenu's (dialoogvenster op 128px)
• Navigatieweergave
• ComboBox, DropDownButton, SplitButton, ToggleSplitButton
• TeachingTip
• AutoSuggestBox
• Kalender-/datum-/tijdkiezers
• Tooltip (16px)
• Nummervak
• TabWeergave
• Mediatransportbesturing, InkToolbar
• BreadcrumbBar
• Verbonden animatie

ThemeShadow in pop-ups

Het is vaak zo dat de gebruikersinterface van uw app gebruikmaakt van een pop-up voor scenario's waarin u de aandacht en snelle actie van de gebruiker nodig hebt. Dit zijn geweldige voorbeelden wanneer schaduw moet worden gebruikt om hiërarchie in de gebruikersinterface van uw app te maken.

ThemeShadow werpt automatisch schaduwen wanneer deze worden toegepast op een XAML-element in een pop-upvenster. Er worden schaduwen weergegeven op de achtergrondinhoud van de app en eventuele andere geopende pop-ups eronder.

Als u ThemeShadow met pop-ups wilt gebruiken, gebruikt u de Shadow eigenschap om een ThemeShadow toe te passen op een XAML-element. Vervolgens kunt u het element verheffen boven de andere elementen erachter, bijvoorbeeld door de z-component van de Translation eigenschap te gebruiken. Voor de meeste popupgebruikersinterfaces wordt een standaardhoogte van 32 effectieve pixels boven de achtergrondinhoud van de app aanbevolen.

In dit voorbeeld ziet u een rechthoek in een pop-up die een schaduw naar de achtergrondinhoud van de app werpt en eventuele andere pop-ups erachter:

<Popup>
    <Rectangle x:Name="PopupRectangle" Fill="Lavender" Height="48" Width="96">
        <Rectangle.Shadow>
            <ThemeShadow />
        </Rectangle.Shadow>
    </Rectangle>
</Popup>

// Elevate the rectangle by 32px
PopupRectangle.Translation += new Vector3(0, 0, 32);

Uitschakelen van standaard ThemeShadow op aangepaste Flyout-besturingselementen

Besturingselementen op basis van Flyout, DatePickerFlyout, MenuFlyout of TimePickerFlyout gebruiken automatisch ThemeShadow om een schaduw te casten.

Als de standaardschaduw er niet correct uitziet op de inhoud van uw controle, kunt u deze uitschakelen door de eigenschap IsDefaultShadowEnabled op de bijbehorende FlyoutPresenter in te stellen op false.

<Flyout>
    <Flyout.FlyoutPresenterStyle>
        <Style TargetType="FlyoutPresenter">
            <Setter Property="IsDefaultShadowEnabled" Value="False" />
        </Style>
    </Flyout.FlyoutPresenterStyle>
</Flyout>

"ThemeShadow" in andere elementen

Over het algemeen raden we u aan zorgvuldig na te denken over het gebruik van schaduw en het gebruik ervan te beperken tot gevallen waarin een zinvolle visuele hiërarchie wordt geïntroduceerd. We bieden echter wel een manier om een schaduw te werpen van elk UI-element voor het geval u geavanceerde scenario's hebt die dit noodzakelijk maken.

Als u een schaduw wilt werpen van een XAML-element dat zich niet in een pop-up bevindt, moet u expliciet de andere elementen opgeven die de schaduw in de ThemeShadow.Receivers verzameling kunnen ontvangen. Ontvangers kunnen geen voorouder zijn van de caster in de visuele structuur.

In dit voorbeeld ziet u twee rechthoeken die schaduwen naar een raster erachter werpen:

<Grid>
    <Grid.Resources>
        <ThemeShadow x:Name="SharedShadow" />
    </Grid.Resources>

    <Grid x:Name="BackgroundGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />

    <Rectangle x:Name="Rectangle1" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />

    <Rectangle x:Name="Rectangle2" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />
</Grid>

/// Add BackgroundGrid as a shadow receiver and elevate the casting buttons above it
SharedShadow.Receivers.Add(BackgroundGrid);

Rectangle1.Translation += new Vector3(0, 0, 16);
Rectangle2.Translation += new Vector3(120, 0, 32);

Slagschaduw

DropShadow biedt geen ingebouwde schaduwwaarden en u moet deze zelf opgeven. Zie bijvoorbeeld de klasse DropShadow .

Welke schaduw moet ik gebruiken?

• Houd er rekening mee dat het doel van schaduw is om zinvolle hiërarchie te bieden, niet als een eenvoudige visuele behandeling.
• Over het algemeen wordt u aangeraden ThemeShadow te gebruiken, wat consistente schaduwwaarden biedt.
• Als u zich zorgen maakt over prestaties, beperkt u het aantal schaduwen, gebruikt u andere visuele behandeling of gebruikt u DropShadow.
• Als u geavanceerdere scenario's hebt om een visuele hiërarchie te bereiken, kunt u overwegen om andere visuele behandelingen (bijvoorbeeld kleur) te gebruiken. Als schaduw nodig is, gebruikt u DropShadow.

Verwante artikelen

• Elevatie en lagen in Windows
• Materialen (Acryl / Mica)