ParallaxParallax

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 is a visual effect where items closer to the viewer move faster than items in the background. Parallax crea una sensación de profundidad, perspectiva y movimiento.Parallax creates a feeling of depth, perspective, and movement. En una aplicación de UWP, puede usar el control ParallaxView para crear un efecto de Parallax.In a UWP app, you can use the ParallaxView control to create a parallax effect.

API de la biblioteca de interfaz de usuario de Windows: clase ParallaxView, propiedad VerticalShift, propiedad HorizontalShiftWindows UI Library APIs: ParallaxView class, VerticalShift property, HorizontalShift property

API de plataforma: clase ParallaxView, propiedad VerticalShift, propiedad HorizontalShiftPlatform APIs: ParallaxView class, VerticalShift property, HorizontalShift property

EjemplosExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Si tiene instalada la aplicación de Galería de controles de XAML , haga clic aquí para abrir la aplicación y ver el ParallaxView en acción.If you have the XAML Controls Gallery app installed, click here to open the app and see the ParallaxView in action.

Parallax y el sistema de diseño fluidaParallax and the Fluent Design System

Fluent Design System te ayuda a crear interfaces de usuario modernas y claras que incorporan luz, profundidad, movimiento, materiales y escala.The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. Parallax es un componente del sistema de diseño fluida que agrega movimiento, profundidad y escala a la aplicación.Parallax is a Fluent Design System component that adds motion, depth, and scale to your app. Para más información, consulta la Introducción a Fluent Design.To learn more, see the Fluent Design overview.

Cómo funciona en una interfaz de usuarioHow it works in a user interface

En una interfaz de usuario, puede crear un efecto de Parallax moviendo los distintos objetos a velocidades diferentes cuando la interfaz de usuario se desplaza o se gira.In a UI, you can create a parallax effect by moving different objects at different rates when the UI scrolls or pans. Para demostrar, echemos un vistazo a dos capas de contenido, una lista y una imagen de fondo.To demonstrate, let's look at two layers of content, a list and a background image. La lista se coloca en la parte superior de la imagen de fondo, que ya proporciona la ilusión de que la lista podría estar más cerca del visor.The list is placed on top of the background image which already gives the illusion that the list might be closer to the viewer. Ahora, para lograr el efecto de Parallax, queremos que el objeto más cercano a nosotros viaje "más rápido" que el objeto que está más lejos.Now, to achieve the parallax effect, we want the object closest to us to travel "faster" than the object that is farther away. A medida que el usuario se desplaza por la interfaz, la lista se mueve a una velocidad mayor que la imagen de fondo, lo que crea una ilusión de profundidad.As the user scrolls the interface, the list moves at a faster rate than the background image, which creates the illusion of depth.

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

Usar el control ParallaxView para crear un efecto parallaxUsing the ParallaxView control to create a parallax effect

Para crear un efecto de Parallax, use el control ParallaxView .To create a parallax effect, you use the ParallaxView control. Este control vincula la posición de desplazamiento de un elemento de primer plano, como una lista, a un elemento de fondo, como una imagen.This control ties the scroll position of a foreground element, such as a list, to a background element, such as an image. A medida que se desplaza por el elemento Foreground, anima el elemento Background para crear un efecto parallax.As you scroll through the foreground element, it animates the background element to create a parallax effect.

Para usar el control ParallaxView, se proporciona un elemento de origen, un elemento de fondo y se establecen las propiedades VerticalShift (para desplazamiento vertical) y/o HorizontalShift (para desplazamiento horizontal) en un valor mayor que cero.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 propiedad Source toma una referencia al elemento Foreground.The Source property takes a reference to the foreground element. Para que se produzca el efecto de Parallax, el primer plano debe ser un ScrollViewer o un elemento que contenga un control ScrollViewer, como ListView o 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.

  • Para establecer el elemento Background, agregue ese elemento como elemento secundario del control ParallaxView.To set the background element, you add that element as a child of the ParallaxView control. El elemento Background puede ser cualquier UIElement, como una imagen o un panel que contenga elementos de interfaz de usuario adicionales.The background element can be any UIElement, such as an Image or a panel that contains additional UI elements.

Para crear un efecto de Parallax, el ParallaxView debe estar detrás del elemento de primer plano.To create a parallax effect, the ParallaxView must be behind the foreground element. Los paneles de cuadrícula y de lienzo permiten disponer elementos en capas entre sí, por lo que funcionan bien con el control ParallaxView.The Grid and Canvas panels let you layer items on top of each other, so they work well with the ParallaxView control.

En este ejemplo se crea un efecto de Parallax para una lista: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>

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

Personalización del efecto parallaxCustomizing the parallax effect

Las propiedades VerticalShift y HorizontalShift permiten controlar el grado del efecto parallax.The VerticalShift and HorizontalShift properties let you control degree of the parallax effect.

  • La propiedad VerticalShift especifica hasta qué punto se desea que el fondo cambie verticalmente durante toda la operación de Parallax.The VerticalShift property specifies how far we want the background to vertically shift during the entire parallax operation. Un valor de 0 significa que el fondo no se mueve en absoluto.A value of 0 means the background doesn't move at all.
  • La propiedad HorizontalShift especifica hasta qué punto se desea que el fondo cambie horizontalmente durante toda la operación de Parallax.The HorizontalShift property specifies how far we want the background to horizontally shift during the entire parallax operation. Un valor de 0 significa que el fondo no se mueve en absoluto.A value of 0 means the background doesn't move at all.

Los valores más grandes crean un efecto más drástico.Larger values create a more dramatic effect.

Para obtener una lista completa de las formas de personalizar Parallax, vea la clase ParallaxView.For the complete list of ways to customize parallax, see the ParallaxView class.

Cosas que hacer y cosas que evitarDo's and don'ts

  • Usar Parallax en listas con una imagen de fondoUse parallax in lists with a background image
  • Considere la posibilidad de usar Parallax en controles ListviewItems cuando controles ListviewItems contiene una imagenConsider using parallax in ListViewItems when ListViewItems contain an image
  • No lo use en todas partes, el uso excesivo puede reducir su impactoDon't use it everywhere, overuse can diminish its impact