Tutorial Silverlight Parte 4: Uso de estilos para encapsular el Look & Feel

Este es el cuarto de ocho tutoriales en el que estamos creando un cliente de Digg con la Beta 1 de Silverlight 2. La idea es que estos tutoriales se lean en orden, con el objetivo de explicar los fundamentos de la programación con Silverlight.

Podéis descargar el código fuente completo de la aplicación que estamos haciendo aquí.

Uso de estilos para encapsular el Look & Feel

WPF y Silverlight soportan un mecanismo de estilos que nos permite encapsular las propiedades de los controles como un recurso reutilizable. Podemos guardar las declaraciones de estos estilos en archivos separados de las páginas, y reutilizarlos en varios controles y páginas en la aplicación (así como reusarlos en varias aplicaciones). Conceptualmente es muy parecido a usar CSS con HTML.

Nota: Además de definir información básica (Colores, Fuentes, Tamaños, Márgenes, etc), los estilos en WPF y Silverlight pueden usarse para definir y reutilizar templates de controles – permitiendo así una mayor adaptación de la estructura de los controles (y permitiendo escenarios de personalización que no son posibles con CSS y HTML hoy en día). Veremos esto en la séptima parte de este tutorial.

Para nuestro ejemplo, definiremos nuestro estilo en el archivo App.xaml del proyecto. De esta forma podremos usarlo en toda la aplicación:

Empezaremos encapsulando el estilo para el control <Border> (y para el <TextBlock> que está contenido en el):

Crearemos dos elementos <Style> en el archivo App.xaml para encapsular el estilo del <Border> y del <TextBlock> de la siguiente manera:

Fijáos como le estamos dando un identificador único “key” a cada elemento Style. Ahora podemos actualizar los controles <Border> y <TextBlock> para que hagan referencia a estos estilos. Usaremos la característica de XAML llamada “extensiones de marcado” (markup extensions). Son usadas cuando no hay valores literales que queramos poner (otro ejemplo en el que usaremos esto será en las expresiones de databinding):

Cuando actualizemos los otros controles del archivo Page.xaml tendremos un  archivo con el siguiente aspecto:

Encapsulando los estilos de esta menera permite a los desarrolladores centrarse más en el comportamiento de la aplicación y también nos permite reusar estos estilos a lo largo de las páginas y controles que usemos.

Nota: Hay que tener en cuenta que en esta Beta 1 el mensaje de error que sale cuando nos equivocamos al poner el nombre del estilo no es muy claro (lanza una excepción pero no dice qué es lo que está mal). Esto será mejorado en la Beta2. Mientras tanto, si veis un error mientras se carga el estilo aseguráos de mirar bien el nombre de los estilos.

Artículo original.