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