WinRT. Background Parallax en aplicaciones Windows Store.

Introducción

El efecto Parallax  es una técnica de animación utilizada en diversos medios, que tiene su origen en la industria de los videojuegos a comienzos de los años 80. Con el efecto Parallax se consigue crear un efecto de profundidad mediante la superposición de varias capas. Es un efecto visual que está siendo muy utilizado últimamente en desarrollo web y que también puedes observar por ejemplo en la pantalla inicial de Windows 8. Al realizar scroll movemos en primer plano los Tiles correspondientes a las aplicaciones y en segundo plano también se produce el desplazamiento del fondo. En la entrada actual vamos a explicar paso a paso como lograr reproducir dicho efecto en nuestras aplicaciones.

Q42 Toolkit

Como siempre solemos hacer vamos a realizar un ejemplo lo más simple posible pero que nos sea válida para lograr nuestros objetivos. La plantilla selecciona para realizar el ejemplo lo más simple posible será “Blank Application”.

Para facilitarnos la tarea vamos a utilizar una librería open source creada por Michiel Post llamada Q42.WinRT que contiene controles, converters y helpers para crear aplicaciones Windows 8 (C# / XAML). Entre los controles que incluye la librería encontramos el Background Parallax.

Para poder utilizar el control primero debemos obtener la librería Q42.WinRT. Tenemos dos opciones posibles:

  • GitHub. Obtener el código de GitHub.
  • NuGet. Obtener directamente el paquete correspondiente de NuGet.

Obtener librería Q42.WinRT desde NuGet

Tras obtener la librería (en este ejemplo se ha obtenido directamente el paquete de NuGet) para poder añadir el efecto Parallax al fondo de nuestra aplicación utilizaremos un Converter incluido en la librería. Debemos añadir el xmlns a la misma antes de continuar:

xmlns:q42converters="using:Q42.WinRT.Converters"

A continuación, en los recursos de la página añadiremos el Converter a utilizar (ParallaxConverter):

<Page.Resources>
     <q42converters:ParallaxConverter x:Key="Parallax" />
</Page.Resources>

Añadimos una imágen de fondo (en el ejemplo un png llamado “Parallax.png”) al Grid principal de la aplicación donde aplicaremos una transformación de trasladación en el eje X (realizando binding a la propiedad  HorizontalOffset del ScrollViewer) donde utilizaremos el Converter añadido. El parámetro del Converter lo utilizamos para evitar que el fondo se mueva a la misma velocidad que el ScrollViewer. Para ello aplicamos un valor bajo y negativo. De esta forma logramos alterar la velocidad aplicada en la trasladación del fondo reduciendola notablemente y además logramos que el desplazamiento sea del sentido contrario hacia donde se hace scroll logrando un efecto visual mucho más eficaz:

<Grid Background="Black">
     <Image Source="/Assets/Parallax.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Stretch="UniformToFill">
          <Image.RenderTransform>
               <CompositeTransform TranslateX="{Binding ElementName=ScrollViewer, Path=HorizontalOffset, Converter={StaticResource Parallax}, ConverterParameter=-0.05}" />
          </Image.RenderTransform>
     </Image>
</Grid>

NOTA: El valor por defecto del parámetro del Converter es -0.10.

Por último, añadimos el ScrollViewer  al que hacíamos binding en la transformación anterior que contendrá cuatro grupos de textos (TextBlock) en primer plano que nos permitirá realizar scroll y lograr ver el resultado buscado:

<ScrollViewer x:Name="ScrollViewer" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto">
     <StackPanel Orientation="Horizontal" Margin="120">
          <TextBlock FontSize="22"                Width="320" TextWrapping="Wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</TextBlock>
          <TextBlock FontSize="22" Margin="80,0"  Width="320" TextWrapping="Wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</TextBlock>
          <TextBlock FontSize="22" Margin="80,0"  Width="320" TextWrapping="Wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</TextBlock>
          <TextBlock FontSize="22" Margin="80,0"  Width="320" TextWrapping="Wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</TextBlock>
     </StackPanel>
</ScrollViewer>

El código completo:

<Grid Background="Black">
     <Image Source="/Assets/Parallax.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Stretch="UniformToFill">
          <Image.RenderTransform>
               <CompositeTransform TranslateX="{Binding ElementName=ScrollViewer, Path=HorizontalOffset, Converter={StaticResource Parallax}, ConverterParameter=-0.05}" />
          </Image.RenderTransform>
     </Image>
     <ScrollViewer x:Name="ScrollViewer" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto">
     <StackPanel Orientation="Horizontal" Margin="120">
          <TextBlock FontSize="22"                Width="320" TextWrapping="Wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</TextBlock>
          <TextBlock FontSize="22" Margin="80,0"  Width="320" TextWrapping="Wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</TextBlock>
          <TextBlock FontSize="22" Margin="80,0"  Width="320" TextWrapping="Wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</TextBlock>
          <TextBlock FontSize="22" Margin="80,0"  Width="320" TextWrapping="Wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</TextBlock>
     </StackPanel>
</ScrollViewer>

</Grid>

A continuación, puedes ver el resultado conseguido en video:

También puedes descargar el ejemplo realizado:

Nada más por hoy. En próximas entradas seguiremos analizando las posibilidades que nos ofrece la librería Q42. Espero que lo visto en esta entrada os sea de utilidad. Cualquier duda o sugerencia podéis plantearlas en los comentarios.

Extras

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s