Este es el séptimo 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 completo del cliente Digg del ejemplo aquí
Cómo personalizar el Look & Feel de Controles
Una de las características más potentes del modelo de programación de WPF y Silverlight es la posibilidad de personalizar el look&feel de los controles que usamos. Esto permite que los desarrolladores y diseñadores se centren en lo que le corresponde a cada uno, permitiendo una flexibilidad increible para crear mejores experiencias de usuario.
En este tutorial veremos varias formas de personalizar los controles, y terminaremos mejorando la interfaz de nuestra aplicación con estas técnicas.
Personalizar el contenido de los controles.
En la primera parte de esta serie de tutoriales añadimos un boton a la página y vimos cómo poner la cadena “Push Me!” dentro. Luego escribimos el método Click que se ejecutaría:
Esto hace que el boton se renderize de la siguiente manera en el navegador:
Una de las cosas que puede sorprenderos es que el contenido del boton no tiene porqué ser sólo un string. Podemos hacer que la propiedad “Content” tenga cualqueir secuencia de controles que queramos.
Por ejemplo, podemos embeber un StackPanel con un <Image> y un <TextBlock>:
Esto hará que la apariencia del botón en ejecución sea la siguiente. Fijáos que sigue teniendo el mismo comportamiento:
Podemos usa controles Shape (como una Ellipse) para crear gráficos vectoriales dentro del control:
Fijáos cómo estamos rellenando el control Ellpise con un RadialGraidentBrush para añadir efectos de luz:
Podríamos volvernos locos y añadir controles interactivos como un calendario dentro del botón:
El calendario es totalmente interactivo – los usuarios podrán ir hacia delante y hacia atrás en los meses, seleccionar una fecha, y pulsarlo haciendo que se lance el evento clic:(Nota: no estoy seguro de que esto sea una grata experiencia de usuario – pero nos muestra la flexibilidad que podemos tener).
Esto que hemos visto no sólo funciona para el control Boton, sino que funciona con cualquier control que herede de la clase ContentControl.
Personalizando controles con Templates
El modelo de controles de Silverlight y WPF nos permite ir más allá aparte de personalizar el contenido interno de un control. También nos permite reemplazar el arbol de visualización de cualquiera que queramos – mientras mantengamos el comportamiento.
Por ejemplo, digamos que no queremos que nuestros botones tengan una forma de rectángulo, sino que queremos un boton redondo como el siguiente:
Podemos conseguirlo creando un estilo “Roundbutton” en el archivo App.xaml. En el que sobreescribimos la propiedad “Template” de los botones, dando un ControlTemplate que reemplace el rectángulo con una elpise y un TextBlock:
Ahora podemos hacer que un control <Button> use este template :
- Añadir contenido a nuestros templates
Os habréis dado cuenta que en el template “RoundButton” el tamaño del boton, y el contenido están en el código (siempre dice “Push Me!”).
Lo bueno es que tanto WPF como Silvelright nos permiten personalizar esto también. Podemos lograr con la extensión {TemplateBinding ControlProperty} . Esto permite que nuestro template se adapte a las propiedades del control:
Fijáos que en lugar de añadir un control <TextBlock> para mostrar el contenido, estamos usando el control <ContentPresenter>. Esto nos permitirá que el botón no solo muestre cadenas, sino cualquier contenido que podemos personalizar (como ya hicimos antes).
Podemos usar el estilo anterior en tres botones (cada uno con un contenidos y propiedades diferentes):
Se mostrará de la siguiente forma (y si – el calendario se escala y sigue dando soporte a la paginación y la selección de fechas):
Si queremos ir más allá podemos añadir animaciones al template (para administrar estados del boton como “hover”, “focus” y “pushed”). Esta capacidad nos permite crear interfaces de usuario y unos escenarios increibles que antes no eran posibles con HTML
Los desarrolladores pueden olvidarse de cómo “pintar” los controles en la interfaz de usuario. Pueden programar los eventos de los controles y manipularlos como siempre, y tendrán un diseñador que se encargue de personalizar el look&feel con estilos y templates.
Puliendo nuestra aplicación Digg
Ahora que hemos visto lo básico de cómo se trabaja con los templates, vamos a usarlos en un par de sitios para pulir la interfaz de nuestra aplicación de ejemplo.
Hasta ahora tenemos un lugar obvio en el que nuestra aplicación necesita un poco más de trabajo – El boton “close” del user control:
Es muy sencillo para nosotros (o para un diseñador que trabaje con nosotros) arreglarlo. Podemos añadir un ControlTemlate al estilo del botón en el app.xaml y añadir algunas formas vectoriales para hacerlo más atracivo (nota: un diseñador más competente que yo podría añadir animaciones a las formas vectoriales):
Cuando ejecuetmos la aplicación otra vez, el botón se mostrará de la siguiente forma:
El segundo lugar en el que podemos aplicar esto es en el aspecto del ListBox. Si os fijáis bien, podemos ver que el ListBox en la Beta1 tiene un borde por defecto:
Podemos cambiarlo con un border algo más ancho personalizando el template del List Box. Aquí tenéis un estilo que hace esto:
Fijáos cómo hemos eliminado todos los controles de borde del ListBox. Estamos usando un control <ScrollViewer> en Silverlight (que nos permite hacer scroll con cualquier contenido) y le estamos embebiendo un <ItemsPresenter> que renderizará los items del ListBox (usará el <DataTemplate> que creamos en la Parte 4 del tutorial)
Así es como quedaría:
Lo increíble es que no hemos tenido que cambiar ni una sola línea de código de nuestra aplicación, ni modificiar el XAML de nuestros controles para hacer que esto funcione. Esta separación entre codigo/diseño permite a un buen programador y diseñador trabajar juntos en aplicaciones Silverlight y WPF. Expression Blend y toda la suite Expression Studio permiten sacarle el máximo partido a estas características.
Traducido por: Juan María Laó Ramos
juanlao 
Ya tengo todos los controles que voy a usar en mi primer proyecto Silverlight 5 personalizados, los hice en Blend. Pero tengo una duda, creé un Recurso Local de tipo Brush, para usarlo como Background, pues me gustaría que fuera en mi MainPage, el fondo a utilizar, pero no sé cómo decirle que lo ajuste a la pantalla, pues me muestra solo una parte de la imagen, me podrían ayudar?
LikeLike