Z-Tiefe und Schatten

  • Artikel

A gif showing four gray rectangles that are stacked diagonally, one on top of the other. The gif is animated so that shadows appear and disappear.

Das Erstellen einer visuellen Hierarchie in deiner Benutzeroberfläche macht es einfach, die Benutzeroberfläche zu durchsuchen und transportiert die Information, was wichtig ist und beachtet werden muss. Die Erhöhung der Rechte, das In-den-Vordergrund-Stellen bestimmter Elemente deiner Benutzeroberfläche, wird häufig verwendet, um eine solche Hierarchie in Software zu erreichen. In diesem Artikel wird das Erstellen von Hervorhebung in einer Windows-App mithilfe von Z-Tiefe und Schatten erörtert.

Z-Tiefe ist ein Begriff, der von 3D-App-Entwicklern verwendet wird, um den Abstand zwischen zwei Oberflächen entlang der Z-Achse anzugeben. Er veranschaulicht, wie nah ein Objekt dem Beobachter ist. Stellen Sie es sich als ein ähnliches Konzept wie x/y-Koordinaten vor, aber in der Z-Richtung.

Windows-Apps verwenden Schatten, um Tiefe auszudrücken und visuelle Hierarchie hinzuzufügen. Um dies zu erreichen, bietet die Z-Achse einen einfachen Codierungspfad. Die Schatten werden jedoch emuliert; sie werden nicht im wahren 3D-Sinne angezeigt. Auf diese Weise können wir das Gefühl von Tiefe erreichen, ohne die Leistung der Benutzeroberfläche Ihrer Anwendung zu beeinträchtigen.

Gründe für die Verwendung von Z-Tiefe

In der physischen Welt neigen wir dazu, auf die Objekte zu fokussieren, die uns näher sind. Wir können diesen räumlichen Instinkt ebenfalls auf digitale Benutzeroberflächen anwenden. Wenn Sie beispielsweise ein Element näher an den Benutzer heranbringen, wird der Benutzer instinktiv auf das Element fokussieren. Durch das nähere Heranrücken von Elementen der Benutzeroberfläche auf der Z-Achse können Sie eine visuelle Hierarchie unter Objekten erstellen, was es Benutzern erleichtert, Aufgaben in deiner App natürlich und effizient abzuschließen.

Was ist Schatten?

Schatten sind eine Art, wie Benutzer Hervorhebung wahrnehmen. Licht oberhalb eines hervorgehobenen Objekts schafft einen Schatten auf der Oberfläche darunter. Je höher das Objekt, desto größer und weicher wird der Schatten. Hervorgehobene Objekte auf Ihrer Benutzeroberfläche müssen keine Schatten aufweisen, sie unterstützen aber den Eindruck von Hervorhebung.

In Windows-Apps sollten Schatten eher in zweckmäßiger statt in ästhetischer Weise verwendet werden. Die Verwendung zu vieler Schatten schwächt die Funktion von Schatten, den Benutzer zu leiten, oder beseitigt sie gar ganz.

Wenn Sie Standardsteuerelemente verwenden, werden Schatten bereits in Ihre Benutzeroberfläche einbezogen. Sie können Schatten jedoch manuell in Ihre Benutzeroberfläche einbeziehen, indem Sie die APIs ThemeShadow oder DropShadow verwenden.

ThemeShadow

Der ThemeShadow-Typ kann auf jedes XAML-Element angewendet werden, um auf der Grundlage der x-, y- und z-Koordinaten passende Schatten zu zeichnen.

  • Es wendet Schatten auf Elemente an, die auf dem Z-Tiefenwert basieren und die Tiefe emulieren.
  • Dank der eingebauten Schattenästhetik bleiben die Schatten in allen Anwendungen konsistent.

Hier sehen Sie, wie ThemeShadow für ein MenuFlyout implementiert wurde. MenuFlyout verfügt über einen integrierten Schatten mit einer Tiefe von 32 Px, der auf das Hauptmenü und alle verschachtelten Menüs angewendet wird.

A screen shot of ThemeShadow applied to a MenuFlyout with three open, nested menus.

ThemeShadow in allgemeinen Steuerelementen

Die folgenden allgemeinen Steuerelemente verwenden automatisch ThemeShadow, um Schatten von 32 Pixel Tiefe zu werfen, sofern nichts anderes angegeben ist:

Hinweis

ThemeShadow wurde in Windows 10 Version 1903 (SDK 18362) eingeführt. Es wird in Windows 11 aktualisiert, um ninegrid-Schatten anstelle des projizierten Schattens zu verwenden, um eine bessere Leistung zu erzielen.

ThemeShadow in Popups

Häufig verwenden Benutzeroberflächen von Apps ein Popup in Szenarien, in denen die Aufmerksamkeit des Benutzers und ein schnelles Eingreifen erforderlich sind. Dies sind tolle Beispiele dafür, wann Schatten verwendet werden sollten, um eine Hierarchie in der Benutzeroberfläche Ihrer App zu erstellen.

ThemeShadow wirft automatisch Schatten, wenn es auf ein beliebiges XAML-Element in einem Popup angewendet wird. Es wirft Schatten auf die Hintergrundinhalte der App hinter ihm und alle anderen geöffneten Popups unter ihm.

Um ThemeShadow für Popups einzusetzen, verwenden Sie die Shadow-Eigenschaft, um einen ThemeShadow auf ein XAML-Element anzuwenden. Heben Sie anschließend das Element gegenüber anderen Elementen hinter ihm hervor, beispielsweise mithilfe der z-Komponente der Translation-Eigenschaft. Für den größten Teil von Popup-UI beträgt die empfohlene Standardhervorhebung relativ zum Inhalt des App-Hintergrunds 32 effektive Pixel.

Dieses Beispiel zeigt ein Rechteck in einem Popup, das einen Schatten auf den App-Hintergrundinhalt und alle anderen Popups hinter ihm wirft:

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

A single rectangular popup with a shadow.

Deaktivieren von standardmäßigem ThemeShadow für benutzerdefinierte Flyout-Steuerelemente

Steuerelemente, die auf Flyout, DatePickerFlyout, MenuFlyout oder TimePickerFlyout basieren, verwenden automatisch ThemeShadow, um einen Schatten zu werfen.

Wenn der Standardschatten auf dem Inhalt Ihres Steuerelements nicht richtig aussieht, können Sie es deaktivieren, indem Sie die IsDefaultShadowEnabled-Eigenschaft für den zugeordneten FlyoutPresenter auf false festlegen:

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

ThemeShadow in anderen Elementen

Hinweis

Ab Windows 11 wird die Receivers-Sammlung ignoriert, wenn die App auf die Windows SDK-Version 22000 oder höher ausgerichtet ist. Es treten jedoch keine Fehler auf und der Schatten funktioniert weiterhin.

Im Allgemeinen empfehlen wir Ihnen, sich sorgfältig mit der Verwendung von Schatten zu beschäftigen und ihren Einsatz auf Fälle zu beschränken, in denen sie zu einer sinnvollen visuellen Hierarchie führen. Wir bieten aber eine Möglichkeit, jedes beliebige UI-Element einen Schatten werfen zu lassen, falls das für erweiterte Szenarien erforderlich sein sollte.

Um einen Schatten von einem XAML-Element werfen zu lassen, das sich nicht in einem Popup befindet, müssen Sie explizit die anderen Elemente angeben, die den Schatten in der ThemeShadow.Receivers-Sammlung empfangen können. Als Empfänger kommt kein Vorgänger des werfenden Elements in der visuellen Baumstruktur in Frage.

Dieses Beispiel zeigt zwei Rechtecke, die Schatten auf ein Raster hinter ihnen werfen:

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

Two turquoise rectangles next to each other, both with shadows.

Schlagschatten

DropShadow stellt keine integrierten Schattenwerte bereit und Sie müssen sie selbst angeben. Beispielimplementierungen finden Sie in der DropShadow-Klasse.

Tipp

Ab Windows 11 verhält sich ThemeShadow wie ein Schlagschatten, wenn die App auf die Windows-SDK-Version 22000 oder höher ausgerichtet ist. Wenn Sie DropShadow verwenden, können Sie stattdessen ThemeShadow verwenden.

Welchen Schatten soll ich verwenden?

Eigenschaft ThemeShadow DropShadow
Min SDK SDK 18362 SDK 14393
Anpassungsfähigkeit Ja Nein
Anpassung Nein Ja
Lichtquelle Keine Keine
In 3D-Umgebungen unterstützt Ja (Während es in einer 3D-Umgebung funktioniert, werden die Schatten emuliert.) Nein
  • Beachten Sie, dass der Zweck von Schatten darin besteht, eine sinnvolle Hierarchie zu schaffen, keine einfache visuelle Bereicherung.
  • Im Allgemeinen empfehlen wir die Verwendung von ThemeShadow, das konsistente Schattenwerte liefert.
  • Bei Bedenken hinsichtlich der Leistung schränken Sie die Anzahl der Schatten ein, verwenden Sie eine andere visuelle Darstellung, oder verwenden Sie DropShadow.
  • Wenn Sie visuelle Hierarchie in komplexeren Szenarien schaffen müssen, erwägen Sie die Verwendung anderer visueller Darstellungen (beispielsweise Farbe). Wenn Schatten erforderlich ist, verwenden Sie DropShadow.