Windows Phone. Tilt Effect.

La experiencia de usuario es algo vital a tener muy en cuenta en el desarrollo de aplicaciones para Windows Phone. La constante búsqueda de la mayor simpleza posible asignando un mayor peso al contenido que a las formas es uno de nuestros objetivos como desarrolladores. En esa búsqueda de simpleza debemos ofrecer al usuario un correcto feedback sobre las acciones que realiza sin adornos innecesarios y superfluos. En la entrada de hoy intentaremos ayudar a conseguir ese resultado.

Tilt Effect

El efecto Tilt nos permite ofrecer un feedback visual extra al usuario cuando realiza una accion como por ejemplo pulsar un botón. La palabra ya nos está indicando el efecto visual provocado. Tilt traducido al español es inclinación. Justo ese es el efecto logrado. Aplicando este efecto a un botón por ejemplo, logramos que al pulsarlo el botón se incline hacia adentro en la zona pulsada (sin duda verás el efecto perfectamente viendo el video que tienes al final de la entrada).

El efecto Tilt lo tenemos disponible dentro del Windows Phone Silverlight Toolkit, paquete de controles totalmente gratuito disponible tanto en Codeplex como utilizando Nuget. Ya hablamos de que como instalar y que contenía el Toolkit en la siguiente entrada:

Introducción al Windows Phone Silverlight Toolkit

Para analizar las posibilidades que nos brida en efecto Tilt vamos a realizar como de costumbre un ejemplo.

La plantilla seleccionada será “Windows Phone Application” para simplificar al máximo el ejemplo.

Tras crear el proyecto lo primero que debemos hacer es agregar la referencia a la librería del Toolkit para tener acceso al control. Para ello agregamos la referencia a la librería Microsoft.Phone.Controls.Toolkit.dll.

Lo primero que debemos añadir es la declaración del namespace:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;
assembly=Microsoft.Phone.Controls.Toolkit"

Agregamos dentro del Grid principal de la página MainPage.xaml:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel HorizontalAlignment="Center">
          <StackPanel Orientation="Horizontal">
               <Button Content="Sin Efecto"/>
               <Button Content="Con Efecto"/>
          </StackPanel>
          <StackPanel Orientation="Horizontal">
               <CheckBox Content="Sin Efecto"/>
               <CheckBox Content="Con Efecto"/>
          </StackPanel>
          <ListBox FontSize="38">
               <ListBoxItem Content="1º elemento"/>
               <ListBoxItem Content="2º elemento"/>
               <ListBoxItem Content="3º elemento"/>
               <ListBoxItem Content="4º elemento"/>
          </ListBox>
     </StackPanel>
</Grid>

El resultado lo podéis ver en la captura superior. Hemos añadido un par de botones, un par de checkboxes y un listado de elementos. El objetivo es sencillo, vamos a aplicar el efecto Tilt a uno de cada par de elementos para poder ver de manera rápida la diferencia entre usar el efecto y no usarlo. Vamos a comenzar habilitando el efecto Tilt en el primero de los botones. Para ello debemos utilizar la estática IsTiltEnabled:

  • IsTiltEnabled. Propiedad estática de tipo booleana. Determina si el efecto Tilt está habilitado o no. Afecta al contenedor donde se aplique y a todos sus hijos.
<Button Content="Con Efecto" toolkit:TiltEffect.IsTiltEnabled="True"/>

Aplicar el efecto al Checkbox es exactamente igual a lo aplicado al botón. Centremos entonces en la lista (Listbox). Volvemos a utilizar la propiedad IsTiltEnabled (como hemos mencionado anteriormente afectará a todos los ListBoxItem del Listbox):

<ListBox FontSize="38" toolkit:TiltEffect.IsTiltEnabled="True">
     <ListBoxItem Content="1º elemento"/>
     <ListBoxItem Content="2º elemento"/>
     <ListBoxItem Content="3º elemento"/>
     <ListBoxItem Content="4º elemento"/>
</ListBox>

¿Que hacemos entonces si no queremos aplicar el efecto a todos los elementos de la lista?

Tenemos a nuestra disposición otra propiedad estática llamada SuppressTilt que es perfecta para nuestro objetivo:

  • SuppressTilt. Propiedad estática de tipo booleano.  Determina si se suprime el efecto Tilt de un elemento en concreto que tenga aplicado el efecto.
<ListBox FontSize="38" toolkit:TiltEffect.IsTiltEnabled="True">
     <ListBoxItem Content="1º elemento" toolkit:TiltEffect.SuppressTilt="True"/>
     <ListBoxItem Content="2º elemento"/>
     <ListBoxItem Content="3º elemento" toolkit:TiltEffect.SuppressTilt="True"/>
     <ListBoxItem Content="4º elemento"/>
</ListBox>

Viendo el código de la parte superior podemos ya determinar el comportamiento. El efecto Tilt lo tendrán aplicado tanto el 2º elemento como el 4º elemento. El resto no.

Veamos entonces como queda el código de nuestra aplicación de ejemplo:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel HorizontalAlignment="Center">
          <StackPanel Orientation="Horizontal">
               <Button Content="Sin Efecto"/>
               <Button Content="Con Efecto" toolkit:TiltEffect.IsTiltEnabled="True"/>
          </StackPanel>
          <StackPanel Orientation="Horizontal">
               <CheckBox Content="Sin Efecto"/>
               <CheckBox Content="Con Efecto" toolkit:TiltEffect.IsTiltEnabled="True"/>
          </StackPanel>
          <ListBox FontSize="38" toolkit:TiltEffect.IsTiltEnabled="True">
               <ListBoxItem Content="1º elemento" toolkit:TiltEffect.SuppressTilt="True"/>
               <ListBoxItem Content="2º elemento"/>
               <ListBoxItem Content="3º elemento" toolkit:TiltEffect.SuppressTilt="True"/>
               <ListBoxItem Content="4º elemento"/>
          </ListBox>
     </StackPanel>
</Grid>

Puedes ver en video el resultado de nuestro ejemplo a continuación:

Puedes descargar el ejemplo realizado:

Extra

Veamos un detalle extra no visto en la aplicación que considero os puede resultar interesante.

¿Qué debemos hacer si deseamos aplicar el efecto Tilt a un conjunto de elementos de nuestra interfaz?

Visto lo visto, deberíamos utilizar la propiedad IsTiltEnabled en cada elemento que deseamos tenga el efecto. Sin embargo, es posible aplicar el efecto Tilt a nivel global de la página. Veamos como sería:

<phone:PhoneApplicationPage toolkit:TiltEffect.IsTiltEnabled="True">

Nada más en esta entrada. Recordar que cualquier duda o sugerencia podéis plantearlas en los comentarios. Espero que lo visto en la entrada os sea de utilidad.

Más información

Un pensamiento en “Windows Phone. Tilt Effect.

  1. Pingback: [Windows Phone] Tilt effect in MultiselectList « Melerin 2.0

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