Expression Blend 4: Enriqueciendo tus aplicaciones.

Introducción

Cuando Microsoft lanzó oficialmente Silverlight y WPF, se dieron cuenta de que los diseñadores tenían un gran handycap para diseñar usando estas tecnologias: Visual Studio. Visual Studio siempre ha estado dirigido a los desarrolladores y muchos diseñadores no se sentían cómodos usandolo, pues debían lidiar con multitud de elementos que les eran totalmente ajenos.

Para remediar esto, en Junio de 2006 microsoft lanzo una nueva apuesta al mercado: Expression Blend.

Este nuevo software permitía a diseñadores y desarrolladores trabajar juntos en un proyecto Silverlight o WPF, pero cada uno usando una herramienta específica para sus necesidades. De esta forma, Blend, eliminaba todo el contenido superfluo para un diseñador y le permitía centrarse en su trabajo: diseñar.

En estos momentos nos encontramos ya en su versión 4, con el paso de las versiones se ha ido convirtiendo en una herramienta que no podemos ignorar, pues, hasta para los desarrolladores, es muy util para simplificar el trabajo con XAML y dotar de manera rápida y sencilla a nuestras aplicaciones de un aspecto más rico y atractivo.

Interacción

Uno de los puntos fuertes de Blend es la interacción que existe entre este y Visual Studio.

Podemos crear un nuevo proyecto en Visual Studio y después con un simple click de ratón editarlo en Expression Blend, o al reves, crearlo en Expression Blend y editar su código en Visual Studio. Todo de manera sencilla y sin complicaciones, veamos un ejemplo:

1º Abrimos Expression Blend 4 (si no lo tenemos, podemos descargar una demo aquí):

image

Seleccionamos “New Project” y creamos un nuevo proyecto Silverlight Application:

image

En la pestaña de Projects pulsamos con el botón derecho sobre la solución y seleccionamos la opción “Edit in Visual Studio”

Esto abrirá una nueva instancia de Visual Studio en la que podremos trabajar y modificar el proyecto, cuando volvamos a Blend nos advertirá de que se han realizado cambios en el proyecto y nos preguntará si queremos cargar estos cambios.

Con esto podéis ver que la integración entre Visual Studio y Expression Blend es verdaderamente sencilla.

Para ver las ventajas de utilizar Expression Blend en nuestros proyectos, vamos a realizar unos pequeños gráficos para una aplicación Silverlight que servirá como frontend para una pizzeria llamada “PizzaBlend” 🙂

Dibujar en Blend

Personalmente soy partidario de hacer todo el trabajo posible directamente escribiendo XAML pero hay ocasiones en que es bastante complicado o largo de realizar y resulta más productivo usar Blend, para empezar vamos a dibujar una Pizza de pepperoni y aceitnuas (la favorita de mi mujer):

Con el proyecto de Silverlight que hemos creado, vamos a añadir un nuevo usercontrol al mismo, Seleccionando el proyecto y haciendo Click derecho, después seleccionando “Add New Item” nos aparecerá una pantalla con los elementos que podemos añadir al proyecto:

image

Seleccionamos UserControl y cambiamos su nombre a Pizza, presionamos OK y se abrirá el nuevo elemento en Blend.

Seleccionamos la pestaña “Objects and Timeline” que se encuentra al lado de la de proyectos:

image

En esta pestaña tenemos representados todos los elementos que se encuentran el archivo xaml seleccionado, en nuestro caso solo tenemos el userControl y la grid principal llamada LayoutRoot. si seleccionamos UserControl, veremos que en la vista del control aparecen los bordes del mismo con unos puntos y lineas en los bordes derecho e inferior y en la esquina inferior derecha:

image

Bien cada punto y rectángulo ofrecen distinta funcionalidad, los puntos ajustan el tamaño horizontal y vertical de nuestro control, mientras que los rectángulos y la flecha hacen lo mismo pero solo para la vista del diseñador, es decir, si ajustamos el tamaño usando los rectángulos solo lo haremos para la vista de Expression Blend y el tamaño del control se situará en Automático.

También podemos hacer esto con las propiedades que se muestran a la derecha:

image Como podemos ver en esta captura las propiedades Height y Width tienen dos valores Auto y un número, Auto indica que el control no tiene un tamaño fijo definido, el número entre paréntesis indica el tamaño que se muestra en el diseñador, el simbolo image  al lado de cada propiedad indica que la propiedad esta establecida en Auto. Por ahora nos valdrá con establecer estas propiedades en Auto y ajustar el tamaño para el diseñador en 280 de alto por 280 de ancho.

Ahora vamos a diseñar la masa de la Pizza, para esto vamos a añadir un elipse al Usercontrol, esto lo podemos realizar desde la pestaña Assets colocada al lado de la pestaña de proyectos (si no la tenéis podéis mostrarla en el Menu Window –> Assets), En esta pestaña tenemos una lista de varias categorías, una de ellas “Shapes”, la seleccionamos y veremos al lado todas las formas que podemos añadir al proyecto:

image

 

 

Seleccionamos Ellipse y pintamos el elipse sobre el userControl, no importa el tamaño, lo ajustaremos usando un Width y Height Auto y usando los margenes a las esquinas del control para darle un tamaño. Una vez dibujado el elipse, en las propiedades a la derecha verás una propiedad Margin con 4 valores, ajusta los cuatro a 10 pixeles y verás como el elipse se redimensiona, en la parte superior de las propiedades al lado de “Name” escribe Masa.

Para darle color vamos a usar un degradado radial, en la misma pestaña de propiedades de la derecha, en la sección Brushes seleccionamos “Fill”, debajo encontramos varias opciones del tipo de relleno:

image

Nos interesa esta que está seleccionada, la encargada de los degradados, establecemos el degradado como se ve en la siguiente imagen:

image

 

En principio solo nos aparecerán dos puntos de degradado, para añadir más solo debemos pulsar en el lugar de la barra donde queramos añadirlo, para eliminarlo lo seleccionamos con el botón izquierdo y tiramos de el hacia abajo, desaparecerá.

Con esto ya tenemos nuestra masa, no tiene una pinta muy interesante por ahora, pero mejorará, algo al menos… espero… soy programador, comprendedme jeje.

Ahora añadimos un segundo elipse al user control, establecemos su margen en 30 píxeles y como relleno le establecemos este degradado radial:

image

En este caso también seleccionamos la Brush “Stroke” y le aplicamos un color rojo solido con un Alpha del 33%:

image

Bien, con esto nuestra pizza ya tiene otro aspecto, pero el borde entre el segundo y el primer elipse es muy evidente, vamos a usar un efecto de desdibujado para “maquillarlo un poco”,seleccionamos el elipse que acabamos de crear, seleccionamos de nuevo la pestaña “Assets” y esta vez seleccionamos el elemento “Effects”, seleccionamos el efecto BlurEffect y lo arrastramos sobre nuestro segundo elipse, en las propiedades le aplicamos un radio de 9 pixeles.

Bueno, ahora ya solo queda ponerse creativo con los ingredientes, esto lo dejo a vuestro parecer, pero básicamente el resultado es algo como esto:

image

Ahora ya tenemos nuestra pizza, de plastico… y no demasiado apetecible… pero nuestra al fin y al cabo. ¿Por que no le damos algo de movimiento?

Animación en Blend

Vamos a realizar una sencilla animación a nuestra pizza que la haga rotar indefinidamente, gracias a Blend las animaciones son muy sencillas de realizar y a cambio le otorgan a nuestra aplicación mucho dinamismo.

En la pestaña de “Objects and Timeline” seleccionamos “LayoutRoot” y creamos una nueva animaciíon presionando el simbolo + que se encuentra bajo la pestaña:

image

 

 

Establecemos el nombre de la animación en la ventana emergente y presionamos OK:

image

Y en este momento aparece la “magia” de blend para las animaciones, un marco rojo aparecerá en nuestra vista de diseño junto con la indicación “PizzaRotation timeline recording is on” y una linea de tiempo al lado de nuestras pestañas izquierdas:

image

En este momento y hasta que presionemos el botón redondo rojo al lado de “PizzaRotation timeline recording is on” todos los parámetros y propiedades que toquemos serán animados en el tiempo. desplazando la línea de tiempo amarilla estableceremos los KeyFrames donde cada propiedad cambiará de valor, esto es si la rotación del LayoutRoot en el segundo 0 es 0, y movemos la línea amarilla hasta el segundo 3, y acto seguido rotamos el LayoutRoot 360º, automáticamente Silverlight mostrará una animación de 3 segundos con nuestra pizza rotando 360º.

La animación tiene varias propiedades:

imageAutoreverse causará que, al terminar, la animación se reproduzca automáticamente en sentido inverso hasta llegar al comienzo.

RepeatBehavior: Nos permite indicar cuantas veces se debe repetir la animación, si indicamos Forever siempre estará reproduciendose.

Bien ahora solo nos queda indicar a la animación que comience a reproducirse cuando nosotros queramos, en este caso esto será cuando se dispare el evento Loaded del UserControl.

En la pestaña “Objects and Timeline” seleccionamos el userControl y en las propiedades pulsamos el botón eventos al lado del nombre:image .

Con esto veremos una lista de los eventos que soporta el UserControl, entre ellos veremos el evento Loaded, hacemos doble click sobre la caja de texto vacía a su lado y nos crea por defecto el manejador de eventos para Loaded, al que añadiremos el código que inicia la animación:

image

 

Bien, ahora solo tenemos que incorporar el userControl a una página de silverlight para que funcione.

Lo primero que necesitamos es compilar todo el proyecto para que nuestro usercontrol pase a formar parte de nuestro ensamblado. Esto lo podemos realizar desde el menu “Project” en la opción “Rebuild Project”

Una vez hecho esto, seleccionamos en la pestaña “Projects” el archivo MainPage.xaml y hacemos doble click sobre el para que  se abra en el editor, nos vamos a la pestaña “Assets” y seleccionamos el elemento “Project”, en el deberemos encontrar el UserControl1, nuestra pizza, simplemente debemos arrastrarlo hasta el formulario y podremos verlo.

Si ejecutamos el proyecto usando la tecla “F5” o la opción Run del menú “Project” veremos que nuestra pizza rota indefinidamente.

Básicamente la animación en Blend no tiene muchos más secretos y esto es lo mejor de todo, en el proyecto adjunto he añadido algunas animaciones más jugando con efectos en la animación para que podáis practicar por vosotros mismos:

image

P.D.: Espero que mis habilidades de diseño no hayan herido la sensibilidad de ningún diseñador, si es así, creedme, no ha sido mi intención 🙂

Espero que os haya gustado, ya sabéis, espero vuestros comentarios 🙂

Un gran saludo y Happy Coding!

2 comentarios sobre “Expression Blend 4: Enriqueciendo tus aplicaciones.”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *