Parallax

  • Artículo

Parallax es un efecto visual en el que los elementos más cercanos al visor se mueven más rápido que los elementos en segundo plano. Parallax crea una sensación de profundidad, perspectiva y movimiento. En una aplicación para UWP, puedes usar el control ParallaxView para crear un efecto parallax.

API de la biblioteca de interfaz de usuario de Windows:Clase ParallaxView, propiedad VerticalShift, propiedad HorizontalShift

API de plataforma: clase ParallaxView, propiedad VerticalShift, propiedad HorizontalShift

Ejemplos

WinUI 2 Gallery
Galería de WinUI

Si tienes instalada la aplicación Galería de WinUI 2 , haz clic aquí para abrir la aplicación y ver ParallaxView en acción.

Paralaje y el Sistema Fluent Design

Fluent Design System te ayuda a crear interfaces de usuario modernas y claras que incorporan luz, profundidad, movimiento, materiales y escala. Parallax es un componente Sistema Fluent Design que agrega movimiento, profundidad y escala a la aplicación. Para más información, consulta la Introducción a Fluent Design.

Cómo funciona en una interfaz de usuario

En una interfaz de usuario, puede crear un efecto de paralaje moviendo objetos diferentes a diferentes velocidades cuando la interfaz de usuario se desplaza o se desplaza por los paneles. Para demostrarlo, echemos un vistazo a dos capas de contenido, una lista y una imagen de fondo. La lista se coloca en la parte superior de la imagen de fondo que ya da la ilusión de que la lista podría estar más cerca del visor. Ahora, para lograr el efecto de paralaje, queremos que el objeto más cercano a nosotros viaje "más rápido" que el objeto que está más lejos. A medida que el usuario desplaza la interfaz, la lista se mueve a una velocidad más rápida que la imagen de fondo, lo que crea la ilusión de profundidad.

Ejemplo de efecto de paralaje con una lista y una imagen en segundo plano

Uso del control ParallaxView para crear un efecto parallax

Para crear un efecto parallax, use el control ParallaxView . Este control vincula la posición de desplazamiento de un elemento en primer plano, como una lista, a un elemento de fondo, como una imagen. Al desplazarte por el elemento en primer plano, se anima el elemento en el fondo para crear un efecto parallax.

Para usar el control ParallaxView, proporcione un elemento Source, un elemento de fondo y establezca las propiedades VerticalShift (para desplazamiento vertical) o HorizontalShift (para desplazamiento horizontal) en un valor mayor que cero.

  • La propiedad Source toma una referencia al elemento de primer plano. Para que se produzca el efecto paralaje, el primer plano debe ser ScrollViewer o un elemento que contenga un ScrollViewer , como listView o richTextBox.

  • Para establecer el elemento de fondo, agregue ese elemento como elemento secundario del control ParallaxView. El elemento de fondo puede ser cualquier UIElement, como una imagen o un panel que contenga elementos adicionales de la interfaz de usuario.

Para crear un efecto parallax, ParallaxView debe estar detrás del elemento en primer plano. Los paneles Cuadrícula y Lienzo permiten colocar los elementos de capa entre sí, por lo que funcionan bien con el control ParallaxView.

En este ejemplo se crea un efecto parallax para una lista:

<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 ajusta automáticamente el tamaño de la imagen para que funcione para la operación de parallax, por lo que no tiene que preocuparse por el desplazamiento de la imagen fuera de la vista.

Personalización del efecto parallax

Las propiedades VerticalShift y HorizontalShift permiten controlar el grado del efecto parallax.

  • La propiedad VerticalShift especifica hasta qué punto queremos que el fondo cambie verticalmente durante toda la operación de parallax. Un valor de 0 significa que el fondo no se mueve en absoluto.
  • La propiedad HorizontalShift especifica hasta qué punto queremos que el fondo cambie horizontalmente durante toda la operación de parallax. Un valor de 0 significa que el fondo no se mueve en absoluto.

Los valores más grandes crean un efecto más dramático.

Para obtener la lista completa de formas de personalizar parallax, consulte la clase ParallaxView.

Cosas que hacer y cosas que evitar

  • Uso de parallax en listas con una imagen de fondo
  • Considere la posibilidad de usar parallax en ListViewItems cuando ListViewItems contenga una imagen
  • No lo use en todas partes, el uso excesivo puede disminuir su impacto.