ParallaxeParallax

La parallaxe est un effet visuel où les éléments plus proches de la visionneuse se déplacent plus rapidement que les éléments en arrière-plan.Parallax is a visual effect where items closer to the viewer move faster than items in the background. La parallaxe crée un sentiment de profondeur, de perspective et de mouvement.Parallax creates a feeling of depth, perspective, and movement. Dans une application UWP, vous pouvez utiliser le contrôle ParallaxView pour créer un effet parallaxe.In a UWP app, you can use the ParallaxView control to create a parallax effect.

API de la bibliothèque d’interface utilisateur Windows : classe ParallaxView, propriété VerticalShift, propriété HorizontalShiftWindows UI Library APIs: ParallaxView class, VerticalShift property, HorizontalShift property

API de plateforme: classe ParallaxView, propriété VerticalShift, propriété HorizontalShiftPlatform APIs: ParallaxView class, VerticalShift property, HorizontalShift property

ExemplesExamples

Galerie de contrôles XAMLXAML Controls Gallery
XAML controls gallery

Si l’application de la Galerie de contrôles XAML est installée, cliquez ici pour ouvrir l’application et voir le ParallaxView en action.If you have the XAML Controls Gallery app installed, click here to open the app and see the ParallaxView in action.

Parallaxe et le système de conception FluentParallax and the Fluent Design System

Le système Fluent Design vous aide à créer une interface utilisateur moderne et claire qui incorpore de la lumière, de la profondeur, du mouvement, des matières et une mise à l’échelle.The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. Parallaxe est un composant du système de conception Fluent qui ajoute des mouvements, des détails et une mise à l’échelle à votre application.Parallax is a Fluent Design System component that adds motion, depth, and scale to your app. Pour plus d’informations, consultez Vue d’ensemble de Fluent Design.To learn more, see the Fluent Design overview.

Fonctionnement dans une interface utilisateurHow it works in a user interface

Dans une interface utilisateur, vous pouvez créer un effet de parallaxe en déplaçant différents objets à des vitesses différentes lorsque l’interface utilisateur fait défiler le curseur ou le panoramique.In a UI, you can create a parallax effect by moving different objects at different rates when the UI scrolls or pans. Pour illustrer, observons deux couches de contenu, une liste et une image d’arrière-plan.To demonstrate, let's look at two layers of content, a list and a background image. La liste est placée en haut de l’image d’arrière-plan qui donne à l’illusion que la liste peut être plus proche de la visionneuse.The list is placed on top of the background image which already gives the illusion that the list might be closer to the viewer. À présent, pour obtenir l’effet de parallaxe, nous souhaitons que l’objet se rapproche le plus de l’objet plus loin.Now, to achieve the parallax effect, we want the object closest to us to travel "faster" than the object that is farther away. Lorsque l’utilisateur fait défiler l’interface, la liste se déplace à un débit plus rapide que l’image d’arrière-plan, ce qui crée l’illusion de profondeur.As the user scrolls the interface, the list moves at a faster rate than the background image, which creates the illusion of depth.

Un exemple de parallaxe avec une liste et une image d’arrière-plan

Utilisation du contrôle ParallaxView pour créer un effet parallaxeUsing the ParallaxView control to create a parallax effect

Pour créer un effet de parallaxe, vous utilisez le contrôle ParallaxView .To create a parallax effect, you use the ParallaxView control. Ce contrôle lie la position de défilement d’un élément de premier plan, tel qu’une liste, à un élément d’arrière-plan, tel qu’une image.This control ties the scroll position of a foreground element, such as a list, to a background element, such as an image. Lorsque vous faites défiler l’élément de premier plan, il anime l’élément d’arrière-plan pour créer un effet de parallaxe.As you scroll through the foreground element, it animates the background element to create a parallax effect.

Pour utiliser le contrôle ParallaxView, vous fournissez un élément source, un élément d’arrière-plan, puis définissez les propriétés VerticalShift (pour le défilement vertical) et/ou HorizontalShift (pour le défilement horizontal) sur une valeur supérieure à zéro.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.

  • La propriété source prend une référence à l’élément Foreground.The Source property takes a reference to the foreground element. Pour que l’effet parallaxe se produise, le premier plan doit être un ScrollViewer ou un élément qui contient un ScrollViewer, tel qu’un ListView ou un RichTextBox.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.

  • Pour définir l’élément d’arrière-plan, ajoutez cet élément en tant qu’enfant du contrôle ParallaxView.To set the background element, you add that element as a child of the ParallaxView control. L’élément d’arrière-plan peut être n’importe quel UIElement, tel qu’une image ou un panneau qui contient des éléments d’interface utilisateur supplémentaires.The background element can be any UIElement, such as an Image or a panel that contains additional UI elements.

Pour créer un effet de parallaxe, ParallaxView doit se trouver derrière l’élément de premier plan.To create a parallax effect, the ParallaxView must be behind the foreground element. Les panneaux grille et canevas vous permettent de superposer des éléments les uns aux autres, afin qu’ils fonctionnent bien avec le contrôle ParallaxView.The Grid and Canvas panels let you layer items on top of each other, so they work well with the ParallaxView control.

Cet exemple crée un effet de parallaxe pour une liste :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>

Le ParallaxView ajuste automatiquement la taille de l’image pour qu’elle fonctionne pour l’opération de parallaxe. vous n’avez donc pas à vous soucier de la déconnexion de l’image.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.

Personnalisation de l’effet parallaxeCustomizing the parallax effect

Les propriétés VerticalShift et HorizontalShift vous permettent de contrôler le degré de l’effet de parallaxe.The VerticalShift and HorizontalShift properties let you control degree of the parallax effect.

  • La propriété VerticalShift spécifie le décalage vertical de l’arrière-plan pendant toute l’opération de parallaxe.The VerticalShift property specifies how far we want the background to vertically shift during the entire parallax operation. La valeur 0 signifie que l’arrière-plan ne se déplace pas du tout.A value of 0 means the background doesn't move at all.
  • La propriété HorizontalShift spécifie le décalage horizontal de l’arrière-plan pendant toute l’opération de parallaxe.The HorizontalShift property specifies how far we want the background to horizontally shift during the entire parallax operation. La valeur 0 signifie que l’arrière-plan ne se déplace pas du tout.A value of 0 means the background doesn't move at all.

Des valeurs plus élevées créent un effet plus spectaculaire.Larger values create a more dramatic effect.

Pour obtenir la liste complète des méthodes de personnalisation de la parallaxe, consultez la classe ParallaxView.For the complete list of ways to customize parallax, see the ParallaxView class.

Pratiques conseillées et déconseilléesDo's and don'ts

  • Utiliser la fonction parallaxe dans les listes avec une image d’arrière-planUse parallax in lists with a background image
  • Envisagez d’utiliser la parallaxe dans ListViewItems quand les ListViewItems contiennent une imageConsider using parallax in ListViewItems when ListViewItems contain an image
  • Ne l’utilisez pas partout, une utilisation abusive peut réduire son impactDon't use it everywhere, overuse can diminish its impact