Hola a todos!
En el artículo anterior vimos una introducción rápida a Expression Blend 4 (Si no lo has visto, corre ¿A que esperas?) y lo fácil que resultaba con el mismo darle un aspecto personalizado a elementos de nuestra aplicación, unos botones más exactamente. En esta nueva entrega vamos a ver dos aspectos importantes: Por un lado veremos como controlar los estados visuales (y que son) de nuestros elementos.
Estados visuales
Los estados visuales de un elemento en Silverlight, son todos los posibles estados que dicho elemento puede tener. Por ejemplo, un botón puede estar presionado, normal, deshabilitado, con foco, sin foco… a estos diferentes estados es a lo que conocemos como estados visuales. Expression Blend nos permite al diseñar la plantilla de un elemento (como la que creamos para nuestros botones) indicar para cada estado del mismo que propiedades queremos alterar. Podemos ver esto mediante la pestaña “States” (Estados) que tenemos en la parte superior izquierda de la pantalla:
Por defecto al crear una nueva plantilla para un elemento (un botón, un textbox…) estos estados no realizan ninguna acción. ¿El resultado? Cuando usamos nuestro elemento, un botón por ejemplo, no responde de ninguna forma al usuario. no sabemos si está pulsado o no, si está activado o desactivado, en resumen: no da un feedback o respuesta visual a las acciones del usuario. Esto es algo muy desconcertante, pues estamos acostumbrados a obtener una respuesta inmediata a nuestras acciones, lo que en diseño se conoce como el patrón de gratificación instantánea. El no dar al usuario una respuesta rápida a sus acciones, de forma que pueda “saber” que la aplicación ha recibido su orden, puede ser muy frustrante.
Vamos a evitar esto de forma muy sencilla haciendo uso de los estados visuales. Partiremos de la base que dejamos terminada en el artículo anterior con nuestros botones. Si entramos a editar la plantilla del botón y seleccionamos la pestaña de States (Estados) veremos que al seleccionar cualquier estado, el punto que tiene a su izquierda se enciende en rojo y la pantalla central se rodea por un borde de este mismo color:
Esto significa que Blend está en modo “animación”, en este modo todos los cambios que hagamos a las propiedades de nuestra plantilla se quedarán guardados, de forma que cuando salgamos de este estado, por ejemplo al seleccionar el estado Normal, estos cambios se desharán y solo se aplicarán al volver al estado Pressed.
Para practicar un poco vamos a elegir el estado Pressed, seleccionar el ContentControl del árbol de objetos y vamos a incrementar su margen derecho hasta los 40 píxeles.
Veremos que además de modificar la propiedad y ver el efecto visual, en el árbol de objetos se ha marcado el ContentControl con un punto rojo y tenemos un desplegable que nos indica las propiedades que están siendo animadas:
Vamos a seleccionar ahora el estado Disabled, veremos que el punto rojo desaparece del ContentControl, pues todavía no hemos animado este estado. En este caso seleccionamos la Grid y cambiaremos sus colores a tonos grises, también seleccionaremos el ContentControl y estableceremos su opacidad al 20%. Si ahora establecemos un botón de los que teníamos en nuestra página inicial como deshabilitado obtendremos un resultado parecido a este:
El resultado hace que el usuario sepa fácilmente que botones puede usar y cuales no, además al pulsar un botón verá que el texto se desplaza levemente respondiendo a su pulsación.
Conclusión
Como hemos podido ver, usar los estados visuales nos permite dar más vida a nuestros elementos y nuestras plantillas, además de conseguir que la experiencia de nuestro usuario sea mucho mejor. En el siguiente artículo hablaremos más a fondo de las animaciones y como podemos, con sutiles detalles, mejorar el aspecto de nuestra aplicación y la experiencia global del usuario.
Por el camino, aquí tenéis el proyecto de ejemplo de este artículo, con la plantilla completa y los estados visuales definidos.
Un saludo y Happy Coding/Design
Hola a todos! Hoy volvemos a nuestra serie de artículos sobre Expression Blend y como usarlo para