viernes, 16 de marzo de 2012

Silverlight y Blend: crear un botón con estilo Metro

Es curioso, como siendo Silverlight la tecnología que mas estoy usando en los últimos meses en mi trabajo, no he escrito aún nada sobre el tema.

Hoy voy a poner un pequeño tutorial sobre Blend, que es el complemento ideal de Silverlight. Con Blend se puede llegar a crear funcionalidad, pero básicamente yo lo uso para diseñar.

El estilo Metro de Windows Phone y Windows 8 empieza a verse mucho, y a mi personalmente me encanta. Así pues, hoy voy a explicar como podemos crear un botón con estilo Metro usando Expression Blend.

Lo voy a hacer usando estilos, que viene a ser el equivalente al CSS de las webs. Mas concretamente modificando el estilo de un botón estándar de Silverlight.

Una vez creamos el botón el Silverlight, pulsamos con el botón derecho sobre el y vamos a “Edit Template > Edit a Copy

CrearBoton

EditTemplate

Nos aparecerá una ventana para crear el estilo. Le ponemos un nombre y le definimos que el estilo lo usaremos a nivel de aplicación.

crearEstiloVentana

 

Una vez hecho esto, se nos abrirá el fichero App.xap con el botón para que modifiquemos el estilo.

ventanaAppEstilo

Bien, ahora solo hay que ir modificándolo para dejarlo a nuestro gusto. En esta caso, para que tenga un estilo Metro, vamos a dejarlo con un color plano y sin redondeos en los bordes.

Seleccionamos los modificadores del fondo del botón y los eliminamos. No queremos florituras, queremos un color plano:

eliminarSobrantes

Una vez eliminados, seleccionamos el Grid, y le damos un color de fondo, en este caso voy a hacerlo blanco.

seleccionarGrid

cambiarABlanco

Ahora seleccionamos el borde principal.

image

Y le quitamos el bordeado de las esquinas (Corner Radius) y le asignamos un fondo gris claro.

image

image

Ahora, para ajustar un poco mas el estilo, vamos a hacer que el borde sea gris claro.

Seguimos en las propiedades del borde, y en los pinceles de color seleccionamos el del borde.

image

Verás que no te deja modificarlo. Veras que al lado de cada propiedad del estilo hay un cuadradito, en este caso vemos que el fondo tiene el cuadradito blanco, el borde naranja, y la mascara de opacidad no tiene color asignado. Cuando esta en blanco quiere decir que tiene un valor asignado distinto al que viene por defecto, si no tiene color es que la propiedad tiene asignado el valor por defecto. El caso del naranja es por que tiene el valor del template bindado (ya veremos otro día el tema de los bindings).

Si clicamos sobre el cuadradito, vemos que aparece un menú contextual, donde podemos resetar al valor por defecto. Lo hacemos.

image

Ahora podemos ver el aspecto que tiene el botón.

image

Muy bien, pero aún no hemos acabado, por que queremos que el botón tenga un pequeño efecto al pasar por encima de el y al ser clicado. Cuando antes hemos borrado los modificadores de fondo, también hemos borrado estos efectos que tenia el botón por defecto, vamos a crearlos con estados.

Selecciona la pestaña de estados, el botón tiene unos creados por defecto:

image

Se puede ver claramente que tenemos un estado para cuando esta normal,. otro para cuando pasamos por encima y otro para cuando el botón esta presionado.

Seleccionamos, cada uno de ellos para ver el efecto que produce en nuestro botón, ahora no veremos la diferencia, pero si que se puede ver como al seleccionar un estado, Blend se pone en modo “grabación”.

image

Ahora en el modo grabación, hacemos los cambios que creamos pertinentes, en mi caso he puesto que el fondo sea de un gris muy claro. Puedes comprobar que elementos han cambiado en cada estado, por que el icono del elemento cambia añadiendo el indicador de grabación.

image

Modifica los estados a tu gusto y ya tienes el botón con el estilo deseado listo para funcionar!

Ahora bien, ya tienes este botón modificado, pero… ¿has de hacerlo en cada botón? No, como con el CSS en las páginas web, sólo has de aplicar el estilo al botón que quieras. ¿como? Muy sencillo.

Ves a la pestaña de recursos, y verás que en el App.xaml tienes el recurso que acabamos de crear.

image

Ahora tienes dos opciones, o arrastras el estilo sobre un botón ya existente y le dices que le aplique el estilo, o arrastras a la pantalla y te creara un botón con nuestro estilo.

image

 

Espero que os sirva! Nos leemos"!

4 comentarios:

  1. Muy copada (muy buena) toda la info sobre .Net y sus herramientas asociadas, son de gran utilidad.

    Saludos desde Argentina!

    ResponderEliminar
  2. Gracias por el comentario, me alegro que te guste el blog!

    ResponderEliminar
  3. Barbaro!!! justo lo que necesitaba!!!

    ResponderEliminar