Partager via

Parallaxe

  • Article

La parallaxe est un effet visuel dans lequel les éléments les plus proches du viewer se déplacent plus rapidement que ceux situés en arrière-plan. L'effet de parallaxe crée une sensation de profondeur, de perspective et de mouvement. Dans une application UWP, vous pouvez utiliser le contrôle ParallaxView pour créer un effet de parallaxe.

API WinUI : classe ParallaxView, propriété VerticalShift, propriété HorizontalShift

API de plateforme : classe ParallaxView, propriété VerticalShift, propriété HorizontalShift

Exemples

Galerie WinUI 2
Galerie WinUI 2

Si l’application WinUI 2 Gallery est installée, cliquez ici pour ouvrir l’application et voir ParallaxView en action.

La parallaxe et le système Fluent Design

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. Parallax est un composant du système Fluent Design qui ajoute à votre application du mouvement, de la profondeur et une mise à l’échelle. Pour plus d’informations, consultez Vue d’ensemble de Fluent Design.

Fonctionnement dans une interface utilisateur

Vous pouvez créer un effet de parallaxe en déplaçant plusieurs objets à des vitesses différentes lors du mouvement de défilement ou panoramique d'une interface utilisateur. À titre d'illustration, examinons deux couches de contenu, une liste et une image d’arrière-plan. La liste est placée en haut de l’image d’arrière-plan, ce qui donne déjà l’illusion qu'elle est plus proche du viewer. Maintenant, pour obtenir l’effet de parallaxe, nous voulons que l’objet le plus proche de nous se déplace « plus rapidement » que celui qui est plus éloigné. Lorsque l’utilisateur fait défiler l’interface, la liste se déplace plus rapidement que l’image d’arrière-plan, créant ainsi une sensation de profondeur.

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

Utilisation du contrôle ParallaxView pour créer un effet de parallaxe

Pour créer un effet de parallaxe, vous devez utiliser le contrôle ParallaxView. Celui-ci relie la position de défilement d’un élément au premier plan, par exemple une liste, à un élément en arrière-plan, comme une image. Tandis que vous faites défiler l’élément au premier plan, celui-ci anime l’élément en arrière-plan pour créer un effet parallaxe.

Pour utiliser le contrôle ParallaxView, fournissez un élément Source et un élément d’arrière-plan, et définissez les propriétés VerticalShift (pour le défilement vertical) et/ou HorizontalShift (pour le défilement horizontal) en leur donnant une valeur supérieure à zéro.

  • La propriété Source se réfère à l’élément de premier plan. Pour que l’effet de parallaxe se produise, le premier plan doit être un ScrollViewer ou un élément contenant un ScrollViewer, comme un ListView ou un RichTextBox.

  • Pour définir l’élément d’arrière-plan, ajoutez cet élément en tant qu’enfant du contrôle ParallaxView. L’élément d’arrière-plan peut être n’importe quel UIElement, comme une image ou un panneau contenant des éléments d’interface utilisateur supplémentaires.

Pour créer un effet de parallaxe, le ParallaxView doit être situé derrière l’élément de premier plan. Les panneaux Grid et Canvas vous permettent de superposer des calques d'éléments les uns sur les autres, pour assurer leur bon fonctionnement avec le contrôle ParallaxView.

Cet exemple crée un effet de parallaxe pour une liste :

<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 ajuste automatiquement la taille de l’image pour l'adapter à l’opération de parallaxe et l'empêcher de disparaître de l'écran.

Personnalisation de l’effet de parallaxe

Les propriétés VerticalShift et HorizontalShift vous permettent de contrôler le degré de parallaxe.

  • La propriété VerticalShift spécifie l'ampleur du déplacement vertical de l’arrière-plan pendant toute l’opération de parallaxe. La valeur 0 signifie que l’arrière-plan ne se déplace pas du tout.
  • La propriété HorizontalShift spécifie l'ampleur du déplacement horizontal de l’arrière-plan pendant toute l’opération de parallaxe. La valeur 0 signifie que l’arrière-plan ne se déplace pas du tout.

Plus les valeurs sont élevées, plus l'effet est spectaculaire.

Pour obtenir la liste complète des possibilités de personnalisation de l'effet de parallaxe, consultez la classe ParallaxView.

Pratiques conseillées et déconseillées

  • Utilisez l'effet de parallaxe pour présenter des listes devant une image d’arrière-plan
  • Envisagez d’utiliser l'effet de parallaxe dans des ListViewItems qui contiennent une image
  • Évitez un usage excessif, au risque d'en diminuer l'impact