Parallaxe

  • Article

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. La 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 de bibliothèque d’interface utilisateur Windows :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

Si vous avez installé l’application Galerie WinUI 2 , cliquez ici pour ouvrir l’application et voir ParallaxView en action.

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

Fonctionnement d’une interface utilisateur

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 défile ou effectue un panoramique. Pour le démontrer, examinons deux couches de contenu, une liste et une image d’arrière-plan. La liste est placée au-dessus de l’image d’arrière-plan, ce qui donne déjà l’illusion que la liste peut être plus proche de la visionneuse. Maintenant, pour obtenir l’effet de parallaxe, nous voulons que l’objet le plus proche de nous voyage « plus rapidement » que l’objet qui est plus loin. Lorsque l’utilisateur fait défiler l’interface, la liste se déplace à un rythme plus rapide que l’image d’arrière-plan, ce qui crée l’illusion de la 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 utilisez le contrôle ParallaxView . 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. 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, vous fournissez un élément Source, 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) sur une valeur supérieure à zéro.

  • La propriété Source prend une référence à 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 qui contient un ScrollViewer, tel qu’un ListView ou un RichTextBox.

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

Pour créer un effet de parallaxe, parallaxView doit se trouver derrière l’élément de premier plan. Les panneaux Grille et Canevas vous permettent de superposer des éléments les uns sur les autres, afin qu’ils fonctionnent bien 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 afin qu’elle fonctionne pour l’opération de parallaxe afin que vous n’ayez pas à vous soucier de l’affichage de l’image qui défile en dehors de la vue.

Personnalisation de l’effet de parallaxe

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

  • La propriété VerticalShift spécifie la distance à laquelle nous voulons que l’arrière-plan se déplace verticalement 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 la distance à laquelle nous voulons que l’arrière-plan se déplace horizontalement pendant toute l’opération de parallaxe. La valeur 0 signifie que l’arrière-plan ne se déplace pas du tout.

Les valeurs plus grandes créent un effet plus dramatique.

Pour obtenir la liste complète des façons de personnaliser la parallaxe, consultez la classe ParallaxView.

Pratiques conseillées et déconseillées

  • Utiliser la parallaxe dans les listes avec une image d’arrière-plan
  • Envisagez d’utiliser la parallaxe dans ListViewItems lorsque listViewItems contiennent une image
  • Ne l’utilisez pas partout, la surutilisation peut diminuer son impact