Teilen über

Parallax

  • Artikel

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 UWP-App können Sie das ParallaxView-Steuerelement verwenden, um einen Parallax-Effekt zu erstellen.

WinUI-APIs:ParallaxView-Klasse, VerticalShift-Eigenschaft, HorizontalShift-Eigenschaft

Plattform-APIs: ParallaxView-Klasse, VerticalShift-Eigenschaft, HorizontalShift-Eigenschaft

Beispiele

WinUI 2-Katalog
WinUI-Katalog

Falls die WinUI 2 Gallery-App installiert ist, klicken Sie hier, um die App zu öffnen und ParallaxView in Aktion zu sehen.

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. Zur Veranschaulichung 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.

Empfohlene und nicht empfohlene Vorgehensweisen

  • 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.