Freigeben über

Schatten in Windows-Apps

Windows Apps verwenden Schatten, um Tiefe auszudrücken und visuelle Hierarchie hinzuzufügen. Schatten helfen dabei, das Erscheinungsbild von Höhen zu schaffen und den Fokus des Benutzers auf die wichtigsten Elemente in der Benutzeroberfläche zu lenken.

Schatten ist eine Möglichkeit, wie ein Benutzer die Erhöhung wahrnimmt. Licht über einem erhöhten Objekt erstellt einen Schatten auf der Oberfläche unten. Je höher das Objekt ist, desto größer und weicher wird der Schatten. Erhöhte Objekte in der Benutzeroberfläche müssen keine Schatten aufweisen, aber sie tragen dazu bei, die Darstellung von Höhen zu erzeugen.

In Windows Apps sollten Schatten gezielt und nicht auf ästhetische Weise verwendet werden. Die Verwendung zu vieler Schatten verringert oder beseitigt die Fähigkeit des Schattens, den Benutzer zu konzentrieren.

Wenn Sie Standardsteuerelemente verwenden, sind Schatten bereits in die Benutzeroberfläche integriert. Sie können jedoch Schatten manuell in die Benutzeroberfläche einfügen, indem Sie entweder die ThemeShadow - oder dropShadow-APIs verwenden.

ThemeShadow

Der ThemeShadow-Typ kann auf jedes XAML-Element angewendet werden, um Schatten entsprechend basierend auf x-, y-, Z-Koordinaten zu zeichnen.

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

Hier erfahren Sie, wie ThemeShadow in einem MenuFlyout implementiert wurde. MenuFlyout verfügt über einen integrierten Schatten mit einer Tiefe von 32 Px, die auf das Hauptmenü und alle geschachtelten Menüs angewendet wird.

Ein Screenshot von ThemeShadow, der auf ein MenuFlyout mit drei geöffneten, geschachtelten Menüs angewendet wurde.

Öffnen Sie die WinUI Gallery-App, und sehen Sie "ThemeShadow" in Aktion.

ThemeShadow in allgemeinen Steuerelementen

Die folgenden allgemeinen Steuerelemente verwenden ThemeShadow automatisch, um Schatten in einer Tiefe von 32px zu werfen, sofern nicht anders angegeben:

ThemeShadow in Pop-ups

Es ist häufig der Fall, dass die Benutzeroberfläche Ihrer App ein Popup für Szenarien verwendet, in denen Sie die Aufmerksamkeit und schnelle Aktion des Benutzers benötigen. Dies sind großartige Beispiele, wenn Schatten verwendet werden sollte, um die 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. Er wird Schatten auf den Hintergrundinhalt der App und alle anderen unten geöffneten Popups werfen.

Um ThemeShadow mit Popups zu verwenden, verwenden Sie die Shadow Eigenschaft, um ein ThemeShadow auf ein XAML-Element anzuwenden. Heben Sie dann das Element über die dahinterliegenden Elemente hervor, z. B. mithilfe der Z-Komponente der Translation-Eigenschaft. Für die meisten Popup-UI beträgt die empfohlene Standardhöhe relativ zum App-Hintergrundinhalt 32 effektive Pixel.

Dieses Beispiel zeigt ein Rechteck in einem Popup, das einen Schatten auf den Hintergrundinhalt der App und alle anderen Popups dahinter 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);

Ein einzelnes rechteckiges Popup mit einem Schatten.

Deaktivieren des Standard-Design-Shadows für benutzerdefinierte Flyout-Steuerelemente

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

Wenn der Standardschatten für den Inhalt Ihres Steuerelements nicht korrekt aussieht, können Sie ihn deaktivieren, indem Sie die IsDefaultShadowEnabled-Eigenschaftfalse auf das zugeordnete FlyoutPresenter 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-Auflistung ignoriert, wenn die App auf die Windows SDK Version 22000 oder höher ausgerichtet ist. Es gibt jedoch keine Fehler, und der Schatten funktioniert weiterhin.

Im Allgemeinen empfehlen wir Ihnen, sorgfältig über die Verwendung von Schatten nachzudenken und ihre Verwendung auf Fälle zu beschränken, in denen eine sinnvolle visuelle Hierarchie eingeführt wird. Wir bieten jedoch eine Möglichkeit, einen Schatten von jedem UI-Element zu werfen, falls Sie erweiterte Szenarien haben, die dies erfordern.

Wenn Sie einen Schatten von einem XAML-Element werfen möchten, das sich nicht in einem Popup befindet, müssen Sie explizit die anderen Elemente in der ThemeShadow.Receivers-Sammlung angeben, die den Schatten empfangen können. Empfänger können kein Vorfahre des Casters im visuellen Baum sein.

Dieses Beispiel zeigt zwei Rechtecke, die Schatten in 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);

Zwei türkisfarbene Rechtecke nebeneinander, beide mit Schatten.

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 sollte ich verwenden?

Eigentum ThemeShadow Dropshadow
Min SDK SDK 18362 SDK 14393
Anpassungsfähigkeit Ja Nein
Anpassung Nein Ja
Lichtquelle Nichts Nichts
Unterstützt in 3D-Umgebungen Ja (Während es in einer 3D-Umgebung funktioniert, werden die Schatten emuliert.) Nein
  • Denken Sie daran, dass der Zweck des Schattens darin besteht, eine sinnvolle Hierarchie bereitzustellen, nicht als einfache visuelle Behandlung.
  • Im Allgemeinen empfehlen wir die Verwendung von ThemeShadow, die konsistente Schattenwerte bereitstellt.
  • Beschränken Sie bei Problemen mit der Leistung die Anzahl der Schatten, verwenden Sie andere visuelle Behandlung, oder verwenden Sie DropShadow.
  • Wenn Sie komplexere Szenarien haben, um eine visuelle Hierarchie zu erzielen, sollten Sie eine andere visuelle Behandlung (z. B. Farbe) verwenden. Wenn Schatten erforderlich ist, verwenden Sie DropShadow.
  • Last updated on