Parallax
Parallax ist ein visueller Effekt, bei dem Elemente näher an der Anzeige 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.
Windows UI-Bibliotheks-APIs:ParallaxView-Klasse, VerticalShift-Eigenschaft, HorizontalShift-Eigenschaft
Plattform-APIs: ParallaxView-Klasse, VerticalShift-Eigenschaft, HorizontalShift-Eigenschaft
Beispiele
| WinUI 2 Gallery | |
|---|---|
 |
Wenn Sie die WinUI 2 Gallery-App installiert haben, klicken Sie hier, um die App zu öffnen und die ParallaxView in Aktion anzuzeigen. |
Parallax 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 Bewegung, Tiefe und Skalierung zu Ihrer App 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 Parallax-Effekt erstellen, indem Sie unterschiedliche Objekte mit unterschiedlichen Raten verschieben, wenn die Benutzeroberfläche scrollt oder schwenkt. Um zu veranschaulichen, sehen wir uns zwei Inhaltsebenen, eine Liste und ein Hintergrundbild an. Die Liste wird oben auf dem Hintergrundbild platziert, das bereits die Illusion gibt, dass die Liste näher an den Betrachter liegt. Um den Parallaxeffekt zu erreichen, wollen wir das Objekt, das uns am nächsten ist, "schneller" als das Objekt zu reisen, das weit entfernt ist. Während der Benutzer die Schnittstelle scrollt, wird die Liste schneller als das Hintergrundbild verschoben, das die Illusion der Tiefe erzeugt.
Verwenden des ParallaxView-Steuerelements zum Erstellen eines Parallax-Effekts
Um einen Parallax-Effekt 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, stellen Sie ein Source-Element, ein Hintergrundelement bereit, und legen Sie die Eigenschaften VerticalShift (für vertikale Bildlauf) und/oder HorizontalShift (für horizontales Scrollen) auf einen Wert fest, der größer als null ist.
Die Source-Eigenschaft verwendet einen Verweis auf das Vordergrundelement. Damit der Parallaxeffekt auftritt, sollte der Vordergrund ein ScrollViewer oder ein Element sein, das einen ScrollViewer enthält, z. B. eine 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 Panel, das zusätzliche UI-Elemente enthält.
Um einen Parallax-Effekt zu erstellen, muss die ParallaxView hinter dem Vordergrundelement stehen. Die Raster- und Canvas-Panels ermöglichen Es Ihnen, Elemente oben aufeinander zu layern, sodass sie gut mit dem ParallaxView-Steuerelement funktionieren.
In diesem Beispiel wird ein Parallaxeffekt 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>
Die ParallaxView passt automatisch die Größe des Bilds an, damit es für den Parallax-Vorgang funktioniert, damit Sie sich nicht sorgen müssen, dass das Bild aus der Ansicht scrollt.
Anpassen des Parallaxeffekts
Mit den Eigenschaften VerticalShift und HorizontalShift können Sie den Grad des Parallax-Effekts steuern.
- Die VerticalShift-Eigenschaft gibt an, wie weit der Hintergrund während des gesamten Parallax-Vorgangs vertikal verschoben werden soll. Ein Wert von 0 bedeutet, dass der Hintergrund nicht überhaupt verschoben wird.
- Die HorizontalShift-Eigenschaft gibt an, wie weit der Hintergrund während des gesamten Parallax-Vorgangs horizontal verschoben werden soll. Ein Wert von 0 bedeutet, dass der Hintergrund nicht überhaupt verschoben wird.
Größere Werte schaffen einen dramatischeren Effekt.
Eine vollständige Liste der Möglichkeiten zum Anpassen von Parallax finden Sie in der ParallaxView-Klasse.
Empfohlene und nicht empfohlene Vorgehensweisen
- Verwenden von Parallax in Listen mit einem Hintergrundbild
- Verwenden von Parallax in ListViewItems, wenn ListViewItems ein Bild enthält
- Verwenden Sie es nicht überall, Übernutzung kann ihre Auswirkungen verringern