[Windows Phone 7.5] Dale calidad a tus aplicaciones con Expression Blend (I)

Hola a todos!

Hoy vamos a conocer un poco mejor a un gran desconocido del desarrollo en Windows Phone 7.5: Expression Blend.

Microsoft-Expression-Blend-41

No es necesario ser un experto diseñador para, usando Expression Blend, dar a nuestras aplicaciones un toque de calidad extra, una apariencia única y mejorar globalmente el acabado de nuestro producto.

Una de las grandes ventajas de Expression Blend es que es capaz de trabajar con el mismo proyecto que usamos en Visual Studio, por lo que podremos crear nuestro proyecto en Expression Blend y luego programar en Visual Studio o crearlo en Visual Studio y luego “estilizarlo” en Expression Blend. También tenemos que tener en cuenta que con el SDK de Windows Phone obtenemos Expression Blend 4 totalmente gratis, no desperdiciemos este regalo.

Una vez que tenemos nuestro proyecto creado, ya sea desde Blend o Visual Studio, se nos presentará la vista por defecto:

image

La pantalla principal de Blend se divide en varias secciones. En la parte izquierda superior encontraremos las pestañas de proyecto, activos, estados y partes. En la izquierda inferior los objetos y linea de tiempo. En la parte derecha encontraremos las propiedades del objeto seleccionado, los recursos de nuestra aplicación y una pestaña de datos. Por último, en la parte central tenemos la vista de diseño de nuestra página.

Si seleccionamos la pestaña de Assets (Activos) en la parte superior izquierda encontraremos todo lo necesario para diseñar nuestra aplicación:

image

Además de tener una lista completa de controles, tenemos otras opciones como formas, estilos, comportamientos o proyecto. Una parte muy interesante de esta pestaña es la caja de búsqueda en la parte superior. Simplemente escribiendo el nombre de lo que deseamos buscar nos aparecerá en los resultados, por ejemplo escribiendo but:

image

Obtenemos los resultados de todos los elementos que coincidan con lo escrito, solo tenemos que seleccionar uno y arrastrarlo a nuestra página para añadirlo. Vamos a añadir 3 botones a nuestra página y ha colocarlos para que ocupen todo el ancho:

image

En muchas aplicaciones, aquí acabaría el diseño de la página principal. En nuestro caso vamos a darle algo más de estilo a los botones, para hacerlos totalmente diferentes a lo que se puede ver en otras aplicaciones.

Para empezar, vamos a presionar con el botón derecho sobre uno de los botones, da igual cual, y seleccionar del menú la opción “Edit Template” (Editar Plantilla) y “Edit a Copy” (Editar una copia). Al seleccionar la opción “Edit a Copy” Blend nos preguntará donde queremos crear la nueva plantilla y que nombre queremos asignarle:

image

En nuestro caso vamos a llamar a la plantilla “BrandNewButton” y la vamos a definir en la aplicación, pues deseamos que este nuevo estilo esté disponible para cualquier página de nuestra aplicación. Al presionar OK la pantalla cambiará para mostrarnos solo el botón y en la parte izquierda inferior, la pestaña de objetos mostrará los objetos que componen un botón standard:

image

Lo primero que vamos a hacer es seleccionar la Grid y las propiedades, pinchando sobre la pestaña “Properties” (Propiedades) que tenemos a la derecha de la pantalla, lo que nos mostrará todas las propiedades de la Grid:

image

Lo primero que encontramos en las propiedades es el editor de colores. Por defecto la Grid tiene un Background transparente. Tenemos 4 opciones posibles:

image

De izquierda a derecha: Sin background, color plano, degradado de color, imagen y por último usando un recurso. En nuestro caso vamos a seleccionar la tercera opción: degradado de color y vamos a formar el siguiente degradado:

image

Vaya, pero queremos que el degradado sea de izquierda a derecha, no de arriba a abajo. Para ello, en los iconos que tenemos a la izquierda de la pantalla seleccionamos uno que parece una flecha, la herramienta de degradado, lo cual mostrará una flecha en nuestro elemento, indicando la dirección que tiene el degradado:

image

Podemos modificar esta flecha para que el inicio esté en la izquierda y el final en la derecha, simplemente arrastrando el final y la punta de la flecha:

image

Ahora, vamos a darle una ligera inclinación al botón para que no sea totalmente recto. Para esto extendemos las propiedades “Transform” (Transformación) de la grid:

image

En este menú tenemos dos opciones: RenderTransform y Projection. RenderTransform aplica transformaciones al objeto seleccionado. Projection realiza proyecciones (Rotación, traslación) sobre el objeto. En nuestro caso usaremos la opción RenderTransform. Esta nos permite una variedad de transformaciones, de izquierda a derecha: Traslación, Rotación, Escalado, Sesgado, Centrado y Volteado. Vamos a usar dos: Rotación, donde le aplicaremos una rotación de –14º y sesgado, donde le aplicaremos un sesgado en el eje X de –15.

Con estos cambios, nuestro botón ahora debería tener el siguiente aspecto:

image

Si guardamos y volvemos a la página principal (Seleccionando MainPage.xaml en las pestañas encima de la vista de diseño) podremos ver el aspecto de nuestros botones:

image

Para aplicar este diseño al resto de botones, pinchamos sobre cada uno de ellos con el botón derecho, seleccionamos “Edit Template” (Editar Plantilla) y en el submenú escogemos “Apply Resource” donde nos aparecerá el nombre de nuestro estilo. Al seleccionarlo se aplicará automáticamente:

image

Ahora, esas líneas blancas y el texto centrado no ayudan mucho a la apariencia del botón, vamos a arreglarlo, simplemente vamos a la pestaña de recursos que tenemos en la parte derecha superior y al extender App.xaml veremos nuestro botón, haciendo doble click lo abriremos para editarlo. Si miramos la pestaña de objetos, veremos la siguiente jerarquía:

image

Hemos trabajado con la Grid. Dentro de ella encontramos el ButtonBackground, un elemento de tipo Border que es el que muestra el borde blanco, así mismo es el que se establece totalmente en blanco cuando presionamos el botón. Dentro de este encontramos un ContentControl llamado ContentContainer que es el encargado de mostrar el texto del botón. Vamos a seleccionar el objeto ContentContainer y lo vamos a arrastrar hasta la Grid, de forma que lo saquemos del Border y a continuación vamos a eliminar el Border ButtonBackground.

Ahora vamos a ver las propiedades del ContentContainer, para ello lo seleccionamos y lo primero que veremos es que la propiedad foreground tiene un punto amarillo a su derecha:

image

Este recuadro amarillo nos indica que esa propiedad está recibiendo su valor desde el objeto que use la plantilla. Por ejemplo, si en nuestro botón establecemos el foreground a Rojo, esta propiedad sería roja. Como queremos hacer un estilo que muestre lo que nosotros queremos y no tener que ir modificando cada botón por separado, podemos establecerlo pinchando sobre el punto amarillo y en el menú que aparece seleccionando "Reset” (Resetear) lo cual eliminará el enlace a datos y ya podremos cambiar el color a nuestro gusto. En este ejemplo he puesto como color el negro.

Lo siguiente que vamos a modificar es la alineación de este ContentContainer. Vamos a dejar el texto centrado verticalmente, pero lo vamos a posicionar a la derecha:

image

Con esto, si guardamos los cambios y ejecutamos la aplicación, el aspecto será el siguiente:

image

De esta forma, en muy pocos pasos y con muy poco trabajo hemos cambiado sustancialmente el aspecto de nuestra aplicación, veamos un antes y después, que en la TV siempre quedan bien:

image

En el próximo artículo veremos como poder añadir animaciones a nuestros estilos y plantillas para que reaccionen a las acciones del usuario. Pero eso será el año que viene jeje. Por ahora para practicar os dejo el proyecto de ejemplo con el estilo que hemos creado, podéis descargarlo aquí.

Un saludo y Happy Coding!

Published 28/12/2011 16:14 por Josué Yeray Julián Ferreiro
Comparte este post:

Comentarios

# Windows Phone 7 – Recomendación de enlaces interesantes (II)

Wednesday, January 18, 2012 10:07 AM por Jorge Serrano - MVP Visual Developer - Visual Basic

Vamos con una segunda retahíla de enlaces relacionados con Windows Phone 7.5 (Mango). En este caso y

# [Windows Phone 7.5] Dale calidad a tus aplicaciones con Expression Blend (II)

Tuesday, January 31, 2012 8:29 AM por Josue Yeray

Hola a todos! En el artículo anterior vimos una introducción rápida a Expression

# [Windows Phone 7.5] Dale calidad a tus aplicaciones con Expression Blend (III)

Friday, March 2, 2012 8:22 AM por Josue Yeray

Hola a todos! Hoy volvemos a nuestra serie de artículos sobre Expression Blend y como usarlo para