Freigeben über

Parallax

Parallax ist ein visueller Effekt, bei dem sich Objekte, die näher am Betrachter sind, schneller bewegen als Objekte im Hintergrund. Parallax erzeugt ein Gefühl von Tiefe, Perspektive und Bewegung. In einer XAML-App können Sie das ParallaxView-Steuerelement verwenden, um einen Parallaxeffekt zu erstellen.

Öffnen Sie die WinUI 3 Gallery-App, und sehen Sie parallaxView in Aktion.

Die WinUI 3 Gallery-App enthält interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab

Parallax und das Fluent Design-System

Mit dem Fluent Design-System erstellen Sie moderne Oberflächen, die Licht, Tiefe, Bewegung, Material und Skalierungsmöglichkeiten beinhalten. Parallax ist eine Fluent Design-Systemkomponente, die Ihrer App Bewegung, Tiefe und Skalierung hinzufügt. Weitere Informationen finden Sie in der Übersicht über Fluent Design.

Funktionsweise in einer Benutzeroberfläche

In einer Benutzeroberfläche können Sie einen Parallaxeneffekt erzeugen, indem Sie beim Scrollen oder Schwenken der Benutzeroberfläche verschiedene Objekte mit unterschiedlicher Geschwindigkeit bewegen. Zum Veranschaulichen betrachten wir zwei Inhaltsebenen, eine Liste und ein Hintergrundbild. Die Liste wird über dem Hintergrundbild platziert, was bereits die Illusion erweckt, dass die Liste näher am Betrachter sein könnte. Um nun den Parallaxeneffekt zu erzielen, möchten wir, dass sich das Objekt, das uns am nächsten ist, „schneller“ bewegt als das weiter entfernte Objekt. Während der Benutzer durch die Benutzeroberfläche scrollt, bewegt sich die Liste schneller als das Hintergrundbild, wodurch die Illusion von Tiefe entsteht.

Beispiel für Parallaxe mit einer Liste und einem Hintergrundbild

Verwenden des ParallaxView-Steuerelements zum Erstellen eines Parallaxeneffekt

Zum Erstellen eines Parallaxeneffekts verwenden Sie das ParallaxView-Steuerelement. Dieses Steuerelement verknüpft die Bildlaufposition eines Vordergrundelements, beispielsweise einer Liste, mit einem Hintergrundelement, beispielsweise einem Bild. Bei einem Bildlauf durch das Vordergrundelement wird das Hintergrundelement animiert, um einen Parallaxeneffekt zu erzeugen.

Um das ParallaxView-Steuerelement zu verwenden, stellen Sie ein Source-Element, ein Hintergrundelement, bereit und legen Sie die VerticalShift-Eigenschaft (für vertikales Scrollen) und/oder die HorizontalShift-Eigenschaft (für horizontales Scrollen) auf einen Wert größer als 0 fest.

  • Die Source-Eigenschaft verwendet einen Verweis auf das Vordergrundelement. Damit der Parallaxeneffekt eintritt, sollte der Vordergrund ein ScrollViewer oder ein Element sein, das einen ScrollViewer enthält, z. B. ein ListView- oder ein RichTextBox-Element.
  • Um das Hintergrundelement festzulegen, fügen Sie dieses Element als untergeordnetes Element des ParallaxView-Steuerelements hinzu. Das Hintergrundelement kann ein beliebiges UIElement sein, z. B. ein Bild oder ein Bereich, der zusätzliche UI-Elemente enthält.

Um einen Parallaxeneffekt zu erstellen, muss sich ParallaxView hinter dem Vordergrundelement befinden. Mithilfe der Raster- und Canvas-Bereiche können Sie Elemente übereinander legen, sodass sie gut mit dem ParallaxView-Steuerelement funktionieren.

In diesem Beispiel wird ein Parallaxeneffekt für eine Liste erstellt:

<Grid>
    <ParallaxView Source="{x:Bind ForegroundElement}" VerticalShift="50">

        <!-- Background element -->
        <Image x:Name="BackgroundImage" Source="Assets/turntable.png"
               Stretch="UniformToFill"/>
    </ParallaxView>

    <!-- Foreground element -->
    <ListView x:Name="ForegroundElement">
       <x:String>Item 1</x:String>
       <x:String>Item 2</x:String>
       <x:String>Item 3</x:String>
       <x:String>Item 4</x:String>
       <x:String>Item 5</x:String>
       <x:String>Item 6</x:String>
       <x:String>Item 7</x:String>
       <x:String>Item 8</x:String>
       <x:String>Item 9</x:String>
       <x:String>Item 10</x:String>
       <x:String>Item 11</x:String>
       <x:String>Item 13</x:String>
       <x:String>Item 14</x:String>
       <x:String>Item 15</x:String>
       <x:String>Item 16</x:String>
       <x:String>Item 17</x:String>
       <x:String>Item 18</x:String>
       <x:String>Item 19</x:String>
       <x:String>Item 20</x:String>
       <x:String>Item 21</x:String>
    </ListView>
</Grid>

ParallaxView passt automatisch die Größe des Bilds an, sodass es für den Parallaxenvorgang funktioniert, damit Sie sich keine Gedanken über das Bild machen müssen, das aus der Ansicht verschoben wird.

Anpassen des Parallaxeneffekts

Mit den Eigenschaften VerticalShift und HorizontalShift können Sie den Grad des Parallaxeneffekts steuern.

  • Die VerticalShift-Eigenschaft gibt an, wie weit der Hintergrund während des gesamten Parallaxenvorgangs vertikal verschoben werden soll. Ein Wert von 0 bedeutet, dass der Hintergrund überhaupt nicht verschoben wird.
  • Die HorizontalShift-Eigenschaft gibt an, wie weit der Hintergrund während des gesamten Parallaxenvorgangs horizontal verschoben werden soll. Ein Wert von 0 bedeutet, dass der Hintergrund überhaupt nicht verschoben wird.

Größere Werte erzeugen einen dramatischeren Effekt.

Die vollständige Liste der Möglichkeiten zum Anpassen von Parallaxen finden Sie in der ParallaxView-Klasse.

Recommendations

  • Verwenden von Parallaxen in Listen mit einem Hintergrundbild
  • Erwägen Sie die Verwendung von Parallaxen in ListViewItems, wenn ListViewItems ein Bild enthalten.
  • Verwenden Sie es nicht überall, die zu häufige Anwendung kann seine Wirkung verringern.

UWP und WinUI 2

Von Bedeutung

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

  • Last updated on