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.

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

  1. Pingback: Primer vistazo a Silverlight 2 « Thinking in .NET

  2. Pingback: Primer vistazo usando Expression Blend con Silverlight 2 « Thinking in .NET

  3. Cynthia Rodriguez

    Yo voy a hacer un proyecto en Silverlight.
    Estoy usando Microsoft Visual Studio Professional 2012, ahorita tengo Windows7 pero lo voy a actualizar a Windows8
    Tengo la idea de hacer botones personalizados y creo que lo mejor es construirlos en Blend, de hecho tengo unos que hice en ExpressionBlend 3 + SketchFlow, pero al momento de ir a VS2012, a mi proyecto de Silverlight, no sé cómo hacer para ver mis botones que diseñé en Blend y usarlos en mi aplicación
    Tendrás alguna publicacion que diga cómo hacer esto o algun link de alguna página o tutorial donde pueda consultarlo?? Saludos y muchas gracias

    Responder
  4. juanlao Autor

    Deberías migrar lo que hiciste con ExpressionBlend 3.
    Para eso, usa Blend for Visual Studio 2012 y abre el proyecto que hiciste en Blend 3, y haz las modificaciones necesarias para que sea compatible.

    Espero que te sirva

    Responder

Deja un comentario