Parallax

  • Artikel

Parallax ist ein visueller Effekt, bei dem Elemente, die näher am Viewer liegen, schneller als Elemente im Hintergrund verschoben werden. Parallax schafft ein Gefühl von Tiefe, Perspektive und Bewegung. In einer UWP-App können Sie das ParallaxView-Steuerelement verwenden, um einen Parallaxeffekt zu erstellen.

APIs der Windows-UI-Bibliothek:ParallaxView-Klasse, VerticalShift-Eigenschaft, HorizontalShift-Eigenschaft

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

Beispiele

WinUI 2-Katalog
WinUI-Katalog

Wenn Sie die WinUI 2-Katalog-App installiert haben, klicken Sie hier, um die App zu öffnen und parallaxView in Aktion zu sehen.

Parallaxe und die 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 System-Komponente, 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 erstellen, indem Sie verschiedene Objekte mit unterschiedlichen Geschwindigkeiten verschieben, wenn die Benutzeroberfläche scrollt oder schwenkt. Zur Veranschaulichen sehen wir uns zwei Inhaltsschichten an: eine Liste und ein Hintergrundbild. Die Liste wird über dem Hintergrundbild platziert, was bereits die Illusion vermittelt, dass die Liste näher am Betrachter liegt. Um nun den Parallaxeneffekt zu erreichen, soll das Objekt, das uns am nächsten liegt, "schneller" reisen als das Objekt, das weiter entfernt ist. Während der Benutzer durch die Benutzeroberfläche scrollt, bewegt sich die Liste schneller als das Hintergrundbild, wodurch die Illusion der Tiefe entsteht.

Beispiel für Parallaxe mit einer Liste und einem Hintergrundbild

Verwenden des ParallaxView-Steuerelements zum Erstellen eines Parallaxeffekts

Um einen Parallaxeffekt zu erstellen, verwenden Sie das ParallaxView-Steuerelement . Dieses Steuerelement verknüpft die Bildlaufposition eines Vordergrundelements, z. B. einer Liste, mit einem Hintergrundelement, z. B. einem Bild. Bei einem Bildlauf durch das Vordergrundelement wird das Hintergrundelement animiert, um einen Parallaxeneffekt zu erzeugen.

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

  • Die Source-Eigenschaft nimmt einen Verweis auf das Vordergrundelement an. Damit der Parallax-Effekt auftritt, sollte der Vordergrund ein ScrollViewer oder ein Element sein, das einen ScrollViewer enthält, z. B. eine ListView oder ein RichTextBox.For the parallax effect to be occur, the foreground a ScrollViewer or an element that contains a ScrollViewer, such a ListView or a RichTextBox.

  • Um das Hintergrundelement festzulegen, fügen Sie dieses Element als untergeordnetes Element des ParallaxView-Steuerelements hinzu. Das Background-Element kann ein beliebiges UIElement sein, z. B. ein Bild oder ein Panel, das zusätzliche UI-Elemente enthält.

Um einen Parallaxeffekt zu erstellen, muss sich parallaxView hinter dem Vordergrundelement befinden. Mit den Bereichen Raster und Canvas können Sie Elemente übereinander schichten, 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 die Größe des Bilds automatisch an, damit es für den Parallax-Vorgang funktioniert, sodass Sie sich keine Gedanken darüber machen müssen, dass das Bild aus der Ansicht scrollt.

Anpassen des Parallaxeneffekts

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

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

Größere Werte erzeugen einen dramatischeren Effekt.

Eine 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, da eine übermäßige Nutzung die Auswirkungen verringern kann