ParallaxParallax

"Parser" ist ein visueller Effekt, bei dem Elemente, die näher am Viewer liegen, schneller verschoben werden als Elemente im Hintergrund.Parallax is a visual effect where items closer to the viewer move faster than items in the background. "Parser" erstellt ein Gefühl für tiefe, Perspektive und Bewegung.Parallax creates a feeling of depth, perspective, and movement. In einer UWP-App können Sie das-Steuerelement "Parser" verwenden, um einen-Effekt zu erzeugen.In a UWP app, you can use the ParallaxView control to create a parallax effect.

APIs für die Windows-Benutzeroberflächen Bibliothek: parameterxview- Klasse, verticalshift-Eigenschaft, horizontalshift-EigenschaftWindows UI Library APIs: ParallaxView class, VerticalShift property, HorizontalShift property

Plattform-APIs: parametal View-Klasse, verticalshift-Eigenschaft, horizontalshift-EigenschaftPlatform APIs: ParallaxView class, VerticalShift property, HorizontalShift property

BeispieleExamples

XAML-SteuerelementekatalogXAML Controls Gallery
XAML controls gallery

Wenn Sie die Katalog-App für XAML -Steuerelemente installiert haben, klicken Sie hier, um die APP zu öffnen, und sehen Sie sich die in Aktion enthaltene Ansicht an.If you have the XAML Controls Gallery app installed, click here to open the app and see the ParallaxView in action.

"Parser" und "flüssiges Design System"Parallax and the Fluent Design System

Mit dem Fluent Design-System erstellen Sie moderne Oberflächen, die Licht, Tiefe, Bewegung, Material und Skalierungsmöglichkeiten beinhalten.The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. "Parser" ist eine fließende Entwurfs System Komponente, die Ihre APP um Bewegung, Tiefe und Skalierung erweitert.Parallax is a Fluent Design System component that adds motion, depth, and scale to your app. Weitere Informationen finden Sie in der Übersicht über Fluent Design.To learn more, see the Fluent Design overview.

Funktionsweise in einer BenutzeroberflächeHow it works in a user interface

In einer Benutzeroberfläche können Sie einen parameteffekt erstellen, indem Sie unterschiedliche Objekte mit unterschiedlichen Raten verschieben, wenn die Benutzeroberfläche einen Bildlauf durchführt.In a UI, you can create a parallax effect by moving different objects at different rates when the UI scrolls or pans. Um dies zu veranschaulichen, betrachten wir zwei Inhalts Ebenen, eine Liste und ein Hintergrundbild.To demonstrate, let's look at two layers of content, a list and a background image. Die Liste wird auf dem Hintergrundbild platziert. Dadurch wird bereits die Illusion angezeigt, dass die Liste näher am Viewer liegt.The list is placed on top of the background image which already gives the illusion that the list might be closer to the viewer. Um den Teil der Wirkung zu erzielen, soll das Objekt, das uns am nächsten geht, "schneller" als das Objekt, das sich weiter entfernt.Now, to achieve the parallax effect, we want the object closest to us to travel "faster" than the object that is farther away. Wenn der Benutzer einen Bildlauf zur Schnittstelle durchführt, verschiebt sich die Liste schneller als das Hintergrundbild, was die Illusion von Tiefe erzeugt.As the user scrolls the interface, the list moves at a faster rate than the background image, which creates the illusion of depth.

Beispiel für Parallaxe mit einer Liste und einem Hintergrundbild

Verwenden des Steuer Elements "parametenxview" zum Erstellen eines-ParameternUsing the ParallaxView control to create a parallax effect

Zum Erstellen eines-Parametern verwenden Sie das-Steuerelement " Parser ".To create a parallax effect, you use the ParallaxView control. Dieses Steuerelement bindet die Scrollposition eines Vordergrund Elements, z. b. eine Liste, an ein Hintergrund Element, z. b. ein Bild.This control ties the scroll position of a foreground element, such as a list, to a background element, such as an image. Wenn Sie einen Bildlauf durch das Vordergrund Element durchführen, animiert es das background-Element, um einen-Effekt zu erzeugen.As you scroll through the foreground element, it animates the background element to create a parallax effect.

Wenn Sie das Steuerelement "-Steuerelement" verwenden möchten, geben Sie ein Quell Element, ein Background-Element und die verticalshift -Eigenschaften (für das vertikale Scrollen) und/oder horizontalshift (für horizontales Scrollen) auf einen Wert größer als 0 (null) an.To use the ParallaxView control, you provide a Source element, a background element, and set the VerticalShift (for vertical scrolling) and/or HorizontalShift (for horizontal scrolling) properties to a value greater than zero.

  • Die Source-Eigenschaft nimmt einen Verweis auf das Vordergrund Element an.The Source property takes a reference to the foreground element. Damit der Teil des Parametern auftritt, sollte der Vordergrund ein ScrollViewer oder ein Element sein, das einen ScrollViewer enthält, z. b. ein ListView -oder RichTextBox-Element.For the parallax effect to occur, the foreground should be a ScrollViewer or an element that contains a ScrollViewer, such as a ListView or a RichTextBox.

  • Um das background-Element festzulegen, fügen Sie dieses Element als untergeordnetes Element des-Steuer Elements "Parser" hinzu.To set the background element, you add that element as a child of the ParallaxView control. Beim Background-Element kann es sich um ein beliebiges UIElementhandeln, z. b. ein Bild oder ein Panel, das zusätzliche Benutzeroberflächen ElementeThe background element can be any UIElement, such as an Image or a panel that contains additional UI elements.

Um einen Teil des Effekts zu erstellen, muss sich die "Parser"-Sicht hinter dem Vordergrund Element befinden.To create a parallax effect, the ParallaxView must be behind the foreground element. Mit dem Raster -und dem Canvas -Panel können Sie Elemente auf der obersten Ebene anlagern, sodass Sie gut mit dem Steuerelement "parameallaxview" funktionieren.The Grid and Canvas panels let you layer items on top of each other, so they work well with the ParallaxView control.

In diesem Beispiel wird ein Teil des Parametern für eine Liste erstellt:This example creates a parallax effect for a list:

<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 "Parser"-Sicht passt automatisch die Größe des Bilds an, sodass es für den unter-und-Vorgang funktioniert, sodass Sie sich keine Gedanken machen müssen, dass das Bild nicht mehr in der Ansicht angezeigt wird.The ParallaxView automatically adjusts the size of the image so it works for the parallax operation so you don't have to worry about the image scrolling out of view.

Anpassen des ParameternCustomizing the parallax effect

Mit den Eigenschaften verticalshift und horizontalshift können Sie den Grad des-Parametern steuern.The VerticalShift and HorizontalShift properties let you control degree of the parallax effect.

  • Die verticalshift-Eigenschaft gibt an, wie weit der Hintergrund während des gesamten Parametern vertikal verschoben werden soll.The VerticalShift property specifies how far we want the background to vertically shift during the entire parallax operation. Der Wert 0 bedeutet, dass der Hintergrund überhaupt nicht verschoben wird.A value of 0 means the background doesn't move at all.
  • Die horizontalshift-Eigenschaft gibt an, wie weit der Hintergrund während des gesamten Parametern horizontal verschoben werden soll.The HorizontalShift property specifies how far we want the background to horizontally shift during the entire parallax operation. Der Wert 0 bedeutet, dass der Hintergrund überhaupt nicht verschoben wird.A value of 0 means the background doesn't move at all.

Größere Werte führen zu einer größeren Auswirkung.Larger values create a more dramatic effect.

Eine umfassende Liste der Möglichkeiten zum Anpassen von "Parser" finden Sie in der Klasse "paramexview".For the complete list of ways to customize parallax, see the ParallaxView class.

Empfohlene und nicht empfohlene VorgehensweisenDo's and don'ts

  • Verwenden von "Parser" in Listen mit einem HintergrundbildUse parallax in lists with a background image
  • Verwenden Sie ggf. die Verwendung von "Parser" in ListViewItems, wenn ListViewItems ein Bild enthalten.Consider using parallax in ListViewItems when ListViewItems contain an image
  • Nicht überall verwenden, die über Auslastung kann seine Auswirkung verringernDon't use it everywhere, overuse can diminish its impact