Dela via

Skuggor i Windows appar

Windows appar använder skuggor för att uttrycka djup och lägga till visuell hierarki. Skuggor hjälper till att skapa intrycket av höjd, vilket vägleder användarens fokus till de viktigaste elementen i ditt användargränssnitt.

Skugga är ett sätt som en användare uppfattar höjd. Ljus ovanför ett upphöjt objekt skapar en skugga på ytan under. Ju högre objektet är, desto större och mjukare blir skuggan. Upphöjda objekt i användargränssnittet behöver inte ha skuggor, men de hjälper till att skapa en känsla av höjd.

I Windows appar bör skuggor användas på ett målmedriktare snarare än estetiskt sätt. Om du använder för många skuggor minskar eller eliminerar du möjligheten för skuggan att fokusera användaren.

Om du använder standardkontroller införlivas skuggor redan i användargränssnittet. Du kan dock inkludera skuggor i användargränssnittet manuellt med hjälp av antingen ThemeShadow eller DropShadow-API :erna.

TemaShadow

Typen ThemeShadow kan tillämpas på valfritt XAML-element för att rita skuggor på lämpligt sätt baserat på x-, y-z-koordinater.

  • Den tillämpar skuggor på element som baseras på z-djupvärde och emulerar djup.
  • Det håller skuggor konsekventa i hela och över program tack vare inbyggd skuggestetik.

Så här har ThemeShadow implementerats på en MenuFlyout. MenuFlyout har en inbyggd skugga med ett djup på 32 px som tillämpas på huvudmenyn och alla kapslade menyer.

En skärmbild av ThemeShadow som tillämpas på en MenuFlyout med tre öppna, kapslade menyer.

Öppna WinUI-galleriappen och se TemaShadow i praktiken

ThemeShadow i vanliga kontroller

Följande vanliga kontroller använder automatiskt ThemeShadow för att kasta skuggor från 32px djup om inget annat anges:

Temaskugga i popup-fönster

Det är ofta så att appens användargränssnitt använder ett popup-fönster för scenarier där du behöver användarens uppmärksamhet och snabba åtgärder. Det här är bra exempel när skugga ska användas för att skapa hierarki i appens användargränssnitt.

ThemeShadow kastar automatiskt skuggor när det tillämpas på alla XAML-element i ett popup-fönster. Det kastar skuggor på appens bakgrundsinnehåll bakom det och andra öppna popup-fönster under det.

Om du vill använda ThemeShadow med popup-fönster använder du Shadow egenskapen för att tillämpa en ThemeShadow på ett XAML-element. Höj sedan elementet från andra element bakom det, till exempel med hjälp av z-komponenten i Translation egenskapen. För de flesta popup-gränssnitt är den rekommenderade standardhöjden i förhållande till bakgrundsinnehållet i appen 32 effektiva bildpunkter.

Det här exemplet visar en rektangel i ett popup-fönster som kastar en skugga till appens bakgrundsinnehåll och eventuella andra popup-fönster bakom den:

<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);

Ett enda rektangulärt popup-fönster med en skugga.

Avaktivera standard-ThemeShadow på anpassade Flyout-kontroller

Kontroller baserade på Flyout, DatePickerFlyout, MenuFlyout eller TimePickerFlyout använder automatiskt ThemeShadow för att kasta en skugga.

Om standardskugga inte ser korrekt ut på kontrollens innehåll kan du inaktivera det genom att ange egenskapen IsDefaultShadowEnabled till false på den associerade FlyoutPresenter:

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

ThemeShadow i andra element

Anmärkning

Från och med Windows 11 ignoreras samlingen Receivers om appen riktar sig mot Windows SDK version 22000 eller senare. Det kommer dock inte att finnas några fel och skuggan fortsätter att fungera.

I allmänhet rekommenderar vi att du tänker noga på hur du använder skuggor och begränsar dess användning till fall där den introducerar meningsfull visuell hierarki. Vi tillhandahåller dock ett sätt att kasta en skugga från något UI-element om du har avancerade scenarier som kräver det.

Om du vill kasta en skugga från ett XAML-element som inte finns i ett popup-fönster måste du uttryckligen ange de andra elementen som kan ta emot skuggan i ThemeShadow.Receivers samlingen. Mottagare kan inte vara en föregångare till castern i det visuella trädet.

Det här exemplet visar två rektanglar som kastar skuggor på ett rutnät bakom dem:

<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);

Två turkosa rektanglar bredvid varandra, båda med skuggor.

Skugga

DropShadow tillhandahåller inte inbyggda skuggvärden och du måste ange dem själv. Exempelimplementeringar finns i klassen DropShadow .

Tips/Råd

Från och med Windows 11 fungerar ThemeShadow som en skugga om appen riktar in sig på Windows SDK version 22000 eller senare. Om du använder DropShadow kan du överväga att använda ThemeShadow i stället.

Vilken skugga ska jag använda?

Fastighet TemaShadow DropShadow
Minsta SDK SDK 18362 SDK 14393
Anpassningsförmåga Ja Nej.
Kundanpassning Nej. Ja
Ljuskälla None None
Stöds i 3D-miljöer Ja (Även om det fungerar i en 3D-miljö emuleras skuggorna.) Nej.
  • Tänk på att syftet med skugga är att tillhandahålla meningsfull hierarki, inte som en enkel visuell behandling.
  • I allmänhet rekommenderar vi att du använder ThemeShadow, som ger konsekventa skuggvärden.
  • För problem med prestanda kan du begränsa antalet skuggor, använda annan visuell behandling eller använda DropShadow.
  • Om du har mer avancerade scenarier för att uppnå visuell hierarki bör du överväga att använda annan visuell behandling (till exempel färg). Om skugga behövs använder du DropShadow.
  • Last updated on