Compartir vía

Paralaje

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 XAML, puedes usar el control ParallaxView para crear un efecto parallax.

Abra la aplicación Galería de WinUI y vea ParallaxView en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtén la aplicación desde la Microsoft Store o consigue el código fuente en GitHub

Parallax y Fluent Design System

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 de Fluent Design System 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 diferentes objetos a diferentes velocidades cuando la interfaz de usuario se desplaza o se mueve horizontalmente. Para demostrarlo, echemos un vistazo a dos capas de contenido, una lista y una imagen de fondo. La lista se coloca sobre la imagen de fondo dando la impresión de que la lista podría estar más cerca del visor. Ahora, para lograr el efecto parallax, queremos que el objeto más cercano a nosotros se mueva "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 impresió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 hace referencia al elemento de primer plano. Para que se produzca el efecto parallax, 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 de primer plano. Los paneles Grid y Canvas permiten colocar los elementos uno encima de otro, 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 con el efecto parallax, de modo que no tenga que preocuparse por que la imagen se desplace 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 espectacular.

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

Recommendations

  • Usar parallax en listas con una imagen de fondo
  • Considerar la posibilidad de usar parallax en ListViewItems cuando ListViewItems contenga una imagen
  • No lo uses en todas partes, el uso excesivo puede disminuir su impacto

UWP y WinUI para UWP

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulta la referencia de la API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene la información que necesitas para utilizar el control en una aplicación UWP o WinUI 2.

  • Last updated on