MSDN España

Noticias, avisos, reflexiones... del equipo que hay detrás de MSDN en España... también tendremos alguna que otra firma invitada :)

Windows 8 Tips & Tricks. Parallax (XAML/C#).

Windows 8 Tips & Tricks. Parallax (XAML/C#).

En este tips & tricks de Windows 8 vamos a ver cómo implementar un parallax en nuestra aplicación. Para los que no lo conozcáis, el parallax es el efecto que se consigue moviendo ligeramente el fondo de nuestra aplicación cuando hacemos scroll horizontal en esta. Este sencillo efecto mejora mucho la apariencia visual de nuestras aplicaciones y es muy sencillo de realizar.

Para empezar necesitamos un ScrollViewer donde mostraremos el contenido de nuestra aplicación.

 1: <ScrollViewer x:Name="MainScroll" 
 2:     HorizontalScrollBarVisibility="Auto" 
 3:     VerticalScrollBarVisibility="Disabled" 
 4:     HorizontalScrollMode="Enabled" 
 5:     VerticalScrollMode="Disabled" 
 6:     ZoomMode="Disabled" 
 7:     Grid.Row="1">
 8:  
 9:     <!-- Contenido de nuestra App -->
 10:  
 11: </ScrollViewer>

 

Por otro lado, en el background de nuestra aplicación tenemos que modificar unas propiedades para que funcione correctamente el parallax.

 1: <Grid.Background>
 2:     <ImageBrush ImageSource="/Assets/Background.png" Stretch="UniformToFill">
 3:         <ImageBrush.Transform>
 4:             <CompositeTransform ScaleX="1.2" ScaleY="1.2" TranslateX="{Binding ElementName=MainScroll, Path=HorizontalOffset, Converter={StaticResource ParallaxConverter}}" />
 5:         </ImageBrush.Transform>
 6:     </ImageBrush>
 7: </Grid.Background>

Por un lado estamos realizando un binging de la translación, con el ScrollViewer que hemos creado anteriormente. Con esto conseguimos que nuestro fondo se mueva a la vez con el scroll del contenido de la App. Para suavizar el scroll utilizamos un converter que reduce la velocidad del movimiento además de invertir la dirección de este.

Por otro lado, también escalamos la imagen horizontalmente para evitar que se vea el corte del final de la imagen a la hora de moverla. Para evitar perder la proporción de la imagen también aplicamos el escalado horizontalmente.

A continuación vamos a ver el converter que hemos utilizado en el apartado anterior.

 1: public class ParallaxConverter : IValueConverter
 2: {
 3:     const double _factor = -0.10;
 4:     
 5:     public object Convert(object value, Type targetType, object parameter, string language)
 6:     {
 7:         if (value is double)
 8:         {
 9:             return (double)value * _factor;
 10:         }
 11:         return 0;
 12:     }
 13:  
 14:     public object ConvertBack(object value, Type targetType, object parameter, string language)
 15:     {
 16:         if (value is double)
 17:         {
 18:             return (double)value / _factor;
 19:         }
 20:         return 0;
 21:     }
 22: }

Por último, para poder utilizar este converter necesitamos crear un recurso estático. Esto lo podemos realizar en un diccionario de recursos que tengamos, en el app.xaml de nuestra aplicación, o incluso en los recursos de nuestra página, en nuestro ejemplo vamos a ver como se realizaría en el app.xaml.

 1: <Application.Resources>
 2:     <local:ParallaxConverter x:Key="ParallaxConverter" />
 3: </Application.Resources>

Haz click en la siguiente imagen para ver una animación de cómo quedaría el efecto parallax.

 

El ejemplo que hemos visto lo hemos realizado con un ScrollViewer, si quisiéramos utilizarlo en un GridView o ListView, podríamos insertar estos elementos dentro de un ScrollViewer y realizarlo de la misma forma.

Como podemos ver, podemos mejorar rápidamente la apariencia visual de nuestras Apps implementando este sencillo ejemplo.

También puedes estar al día de todas las novedades a través de nuestros rincones en las redes sociales:

Un saludo,

Carlos Carrillo Boj (3lcarry)