Expression Blend 4 – Creando diccionario de estilos

En este post vamos a ver como podemos generar estilos personalizados de nuestros controles y agruparlos en un único lugar (una especie de Theme de nuestros controles) para nuestras aplicaciones WPF y porque no Silverlight.

Para este ejemplo vamos a trabajar con los controles de una aplicación WPF y la técnica que vamos a utilizar es la de los diccionarios de recursos que nos ofrece este tipo de aplicaciones.

El primer paso será crear una aplicación WPF y a continuación abrirla con Expression Blend, en mi caso la versión 4 (recuerden que no es necesario trabajar con EB para poder crear nuestros diccionarios de recursos, podemos hacerlo directamente en Visual Studio, pero por comodidad voy a trabajar con dicha herramienta).

Abierto el proyecto, desde la pestaña Projects hacemos click derecho en el proyecto y agregamos un nuevo item (“Add new item…“) del tipo Resource Dictionary , al cual llamaremos SkyResourceDictionary.xaml y en el cual estará contenido las definiciones de los estilos.

Creando nuestro diccionario de recursos

Creando nuestro diccionario de recursos

Vamos a definir los estilos de los controles, para esto abrimos el archivo MainWindow.xaml y agregamos un botón, seleccionamos el mismo y vamos a la siguiente opción del menú “Object/Edit Style/Create Empty…“. Se nos abrirá una ventana como la siguiente, y es aquí donde vamos a tener que hacer las configuraciones más importantes:

Creando un estilo

Creando un estilo

Detengamonos a observar un poco los campos de esta ventana:

  • Name (Key): aquí es donde especificamos si queremos que el estilo se aplique a todos los elementos de ese tipo (Apply to All), en este caso sería a todos los Button o si preferimos especificar un “nombre” y que solamente se aplique a todos aquellos objetos a los que les definamos dicho estilo. En este ejemplo elegiremos la segunda opción y llamaremos al estilo EstiloBoton.
  • Define in: en nuestro caso nos interesa que la definición del estilo esté dentro de nuestro diccionario de recursos, por lo tanto elegiremos la opción Resource dictionary y seleccionamos nuestro archivo anteriormente creado.

Aceptamos y vamos a ver que solo aparece nuestro botón, es aquí donde definimos todas las cuestiones estéticas:

Aplicando los estilos a nuestro control

Aplicando los estilos a nuestro control

Y una vez terminado pulsamos sobre el siguiente boton ubicado en la pestaña Objects and Timeline:

Finalizando la edición

Finalizando la edición

De esta forma volvemos al formulario sobre el que estábamos trabajando inicialmente. Ya tenemos definido nuestro primer estilo y agregado a nuestro diccionario de recursos! (ahora podemos ir haciendo lo mismo para los demás controles).

Para aplicar estilos sobre nuevos controles simplemente hacemos click derecho sobre el control y vamos a la opción “Edit Template/Apply Resource/” y elegimos el estilo que deseamos aplicarle, en nuestro caso si lo hariamos sobre un control Button elegiríamos EstiloBoton.

Para saber que grupo de estilos esta asociado a nuestra aplicación, podemos ir a la pestaña Properties y expandir el archivo App.xaml (que contiene las definiciones de configuración de nuestra aplicación), en el mismo podemos observar, en el caso de que exista, el diccionario de recursos asociado mirando la referencia Linked To.

Archivos de recursos asociado a la aplicación

Archivos de recursos asociado a la aplicación

Espero que les sea de utilidad!

Anuncios

Expression Blend

Expression Blend es una herramienta de diseño que nos permitirá interactuar con los proyectos Silverlight, mejorando la experiencia sobre todo en el trabajo de diseñar y animar nuestras aplicaciones.

Esta herramienta trabaja de forma totalmente integrada con Visual Studio, y un proyecto Silverlight puede ser abierto por ambas aplicaciones, además un cambio realizado en alguna de las herramientas, se ve reflejado instantáneamente en la otra.

Nuestra aplicación abierta con Expression Blend 3

Nuestra aplicación abierta con Expression Blend 3

Todo esta facilita el trabajo en conjunto entre diseñadores y desarrolladores, ya que los primeros podrán trabajar en los “enmaquetados” – controles personalizados, animaciones en objetos, CSS… – dejando a los desarrolladores libres de estas tareas.

Otra ventaja para los diseñadores (atento @joamuriel): podremos importar nuestros trabajos realizados en Adobe Photoshop y Adobe Illustrator :D.

Algunas caracteristicas de esta versión son:

  • Intellisense: posee intellisense para código C#, VB y XAML.
  • Importación de Adobe Photoshop e Illustrator: podremos ver y seleccionar capas, personalizarlas y reagruparlas, y tener elementos de Photoshop/Illustrator que mantienen los formatos originales en XAML mediante la conversión de vectores a XAML.
  • Datos de ejemplo: nos permite trabajar con datos de ejemplo en tiempo de diseño, permitiendo, de una manera sencilla, ver cómo se verá nuestra aplicación sin tener que acceder a los datos.
  • TFS: incluye soporte para Team Foundation Server (TFS) – teniendo todas las ventajas que nos ofrece el control de código fuenta.
  • Sketchflow: Sketchflow permite crear prototipos, experimentar con experiencias dinámicas, e incorporar feedback de los clientes mucho más fácilmente.
  • Behaviors: podremos encapsular interacciones complejas de diseño en componentes reusables que pueden aplicarse directamente a un control en el diseño.
  • Otras mejoras: soporte para animaciones, transformaciones 3D, efectos visuales…

En nuestro desarrollo trabajaremos con Expression Blend 3 y una de nuestras primeras tareas con esta herramienta será trabajar en el diseño de nuestro control.

Más sobre esta herramienta aquí.

Sobre el proyecto…

La idea con este proyecto será crear en Silverlight un Combo-Box de clientes, con el cuál podremos interactuar desde nuestra web. La idea del nuevo control es que tenga un gran aspecto visual, y por cada ítems podamos visualizar una foto del cliente, más algunos datos informativos (dirección, teléfono…).

Nuestro control tendrá el siguiente aspecto:

Combo-Box

Combo-Box

En la próxima entrada comenzaremos a trabajar con nuestro control.

Creando nuestro primer proyecto Silverlight

Como primer paso para generar nuestra primera aplicación vamos a abrir Visual Studio 2008 y en el menú “File >> Nuevo Proyecto” seleccionaremos “Aplicación de Silverlight” para crear nuestra solución y la llamaremos “ProyectoSilverlight”.

Creación proyecto Silverlight

Creación proyecto Silverlight


Al aceptar, nos aparecerá un Pop-Up el cual nos pedirá si deseamos añadir a la solución un proyecto web ASP.NET donde se hosteará nuestra aplicación, de lo contrario lo hará automáticamente en tiempo de compilación. En nuestro caso vamos a agregarlo.

Como podemos ver nuestra solución estará compuesta por 2 proyectos: uno donde trabajaremos en nuestra aplicación Silverlight, y otro proyecto Web donde alojaremos nuestra aplicación.

Estructura de la solución

Estructura de la solución

Dentro de nuestro proyecto Silverlight tendremos dos archivos (que vienen por defecto) con extención XAML y sus respectivos code-behing. El archivo App.xaml nos servira para trabajar en configuraciones, recursos y eventos que afectan a toda la aplicación. El archivo Page.xaml será nuestra “área de trabajo”, nuestro control principal.

Finalmente cuando compilemos nuestra aplicación, automáticamente se creará y copiará nuestro control Silverlight (ProyectoSilverlight.xap) en la carpeta “Bin” de nuestra aplicación web. También agregará el tag <object> en la página ASCX como en el HTML para incluir nuestro control.

Tag object

Tag object

En la próxima entrada vamos a incluir nuestros primeros objetos a la aplicación.

Introducción a Silverlight

Silverlight es una poderosa plataforma de desarrollo para crear atractivas experiencias de usuario – sobre todo multimedia – en la Web, escritorio y aplicaciones móviles en línea o sin conexión.

Podríamos definirlo también como un plugin multi-plataforma para navegadores que permite la creación de grandes experiencias multimedia y .NET RIA (Rich Internet Applications, Aplicaciones Dinámicas de Internet) dentro del navegador.
El cliente para poder disfrutar en su navegador de las aplicaciones Silverlight deberá descargarse e instalar el framework en su PC (el cual tiene un tamaño aproximado de 5 Mb) y solo tarda unos segundos en descargarse e instalarse. Cabe aclarar que es compatible con la mayoría de los navegadores actuales.

Podremos implementar nuestras aplicaciones Silverlight en cualquier servidor web (como por ejemplo Apache en Linux) y tambien alojarlas archivos HTML o ecualquier página web de servidor como ser PHP, Java, Python, Ruby…

Qué se necesita para desarrollar este tipo de aplicaciones?… sencillo: Visual Studio 2008 y Expression Blend 2 en adelante… además tenemos a disposición las “Toolkit” de Silverlight (de las cuales ya vamos a hablar en las próximas entradas). Todo lo necesario para poder trabajar podemos descárgalo desde Microsoft Web Platform Installer 2.0.

Actualmente el framework se encuentra en la versión 3, y está disponible la versión beta 4.

Toda la info necesaria para comenzar y demos muy interesantes las vamos a encontrar en el sitio oficial: www.silverlight.net.

En los próximas entradas empezaremos a crear una aplicación, paso a paso.