Aprovechando que me encuentro trabajando en Sugges.me y aprendiendo cosas del Blend para Windows 8, les quiero mostrar algo bonito que se puede hacer usando Metro Studio 2 de Syncfusion, el cual es gratuito.
Voy a empezar por enseñarles como trabajar con la barra de aplicaciones desde Blend. Como siempre mi recomendación es que si bien tenemos que aprender XAML, definitivamente Blend nos hace mucho más productivos y nos puede ayudar con detalles que no recordemos del XAML.
Actualización 2012/09/29
Este procedimiento puedes realizarlo cuando requieras hacer tus propios botones. Recuerden que para la versión de lanzamiento de Visual Studio, en el archivo StandardStyles.xaml en la carpeta common se encuentran comentariados algunos estilos de botones básicos.
En primer lugar ubicamos en Blend en los objetos el Top o Bottom AppBar y ahí agregamos desde los controles un AppBar.
Como ven este ya está formatado con la estructura típica, 2 stackpanels alineados a izquierda y derecha respectivamente.
Ahora procedemos desde la zona de controles a añadir un botón.
Al soltar el botón en el lugar que corresponde ocurre que este no tiene el formato de un botón de barra de aplicaciones.
En versiones anteriores de Blend encontrabamos una serie de botones con estilos predeterminados, yo no he podido volver a encontrarlos, el unico que aparece es uno genérico AppBarButtonStyle.
Mi recomendación con este y con cualquier estilo y plantilla que venga por defecto es que la editemos como copia para poder personalizarlo
Y para que los distingan de los demás estilos un consejo más es que pongan el nombre de su aplicación o algún distintivo a sus estilos y templates, además de que los guarden en un archivo de recursos independiente.
En la plantilla nos importan 2 elementos importantes el etiqueta del botón y el contenido en el cual la plantilla por defecto ubica el texto asociado al formato base del botón, cosa que no queremos en un botón de AppBar.
Pues bien, lo primero que corregiremos es lograr que el content que es el texto de un botón base se ubique en la etiqueta de la parte inferior del botón y para esto debemos editar el binding de la propiedad Text.
De esa forma observamos como el texto se asocia a la posición donde la necesitamos. No lo edites aqui, cuando terminemos la edición este campo queda para configurar en Blend.
Como vemos, nos falta una imagen asociada y es ahí donde entra Metro Studio 2. En el podemos encontrar cantidades de imágenes, buscamos la que mejor se asocia a nuestro comando y la editamos.
Allí tenemos multiples opciones de edición, seleccionamos fondo transparente y el tamaño de imagen que queremos.
Luego la exportamos y guardamos en la carpeta de nuestro proyecto,
Además a través de Blend, o como en la imagen a través de Visual Studio, incluimos la imagen en nuestro proyecto.
Yo acostumbro tener los dos entornos abiertos al tiempo Blend y Visual Studio, cada uno es bueno para algo específico, sin embargo el Visual Studio 2012 permite en ocasiones intervenir de forma más facil algunos elementos cuando se encuentran en el archivo de la página y no en archivos de recursos. Un ejemplo de eso es la cabecera de los grupos en la platilla tipo grid, puesto que la plantilla por defecto tiene en esa cabecera un evento de clic asociado y por tanto tienen la plantilla dentro de la página, les invito a intentar cambiarle el color a la fuente del título de grupo desde Blend y desde Visual studio para entender mejor de lo que hablo.
Recuerden si incluyen el archivo desde Visual Studio, guardar y cuando Blend les pregunte si desean recargar, aceptarlo. Esto los sacará de la edición de la plantilla como fue mi caso, para volver, nos ubicamos en el botón y esta vez no le decimos editar una copia si no, editar el actual.
Ahora añadimos una imagen dentro del content del botón, como ven el mensaje indica que se reemplazará el string que habia antes.
En las propiedades de la imagen seleccionamos la nueva imagen que ya debe estar cargada si la incluimos correctamente en el proyecto.
Ahora, salimos de la edición del botón para ver como quedó en el diseño final.
Si observaramos la página en tamaño real, veremos que se ve muy bien, además de que en esta vista ya podemos editar el texto del botón, pero si ampliamos la imagen, vemos que la imagen se torna borrosa. Podríamos cambiar la imagen por una de mayor tamaño, pero lo mejor sería usar vectores, de tal forma que no añadamos peso extra a nuestra aplicación y que ella pueda escalar y adaptarse con elegancia.
Para esto nos ayuda otra vez Metro Studio, el cual tiene una opción para exportar el XAML de la imagen que seleccionamos.
Tomamos el código generado por Metro Studio.
Y lo ubicamos en el lugar donde antes habiamos colocado nuestra imagen. Les recomiendo mucho identar el codigo para que no se desordene.
Como vemos, la imagen no se ve correctamente necesitamos añadir márgenes.
Nos ubicamos en el Grid y añadimos márgenes, en mi caso con 8 a cada lado quedó perfecto. Vemos desde aquí como la imagen a pesar de ser tan grande, no se torna borrosa, justo por que es un formato de vectores.
Aquí está como se vé ahora en la vista del diseño final, esto además nos evita manejar tantos archivos de imágenes extra.
Lo más importante de las plantillas es que seamos consientes de que las tendremos a disposición así que si decidimos añadir otro botón de editar en otra pantalla, simplemente añadimos un botón normal y seleccionamos la plantilla que ya creamos.
Y ahora para crear un botón con otra imagen, podemos partir desde nuestro botón, generando una copia del estilo y simplemente cambiando el XAML de la imagen.
Muy bien, eso es todo, espero que les sea de utilidad en alguna ocasión. Hasta la próxima.
Sorey
Actualización 2012/09/22: Quiero contarles que la alineación de los iconos centrales con otras imagenes me quedaba desbalanceada ( :P ) bueno eso a mi ojos que le gustan las cosas bonitas. Razón por la cual me tocó editar todo el botón hasta dejarlos como quería, este proceso es un poquito más complejo y prefiero explicarlo en video. Les muestro el efecto en los botones.
Como ven quedan mucho más pulidos, el problema es que con este cambio toca editar todos los estados del botón, para que se vea bien cuando con los gestos del mouse, es decir:
Cuando el mouse pasa encima
Cuando el mouse presiona el botón
Esto hay que hacerlo tambien para mostrar el botón desactivado. Les comparto además dos enlaces para aprender a usar las barras de aplicación según las guías de diseño de interfaces modernas
Diseño de navegación para aplicaciones estilo Metro
http://msdn.microsoft.com/es-es/library/windows/apps/xaml/hh761500.aspx
Diseño de comandos para aplicaciones estilo Metro
http://msdn.microsoft.com/es-es/library/windows/apps/xaml/hh761499.aspx
2 comentarios:
hola
Excelente post, me fue de muchísima ayuda :D
pero quisiera ver el vídeo de la actualización de el 2012/09/22.
lo estuve buscando en tu blog pero no lo encontré, me podrías mandar la liga de donde podría ver tu vídeo por favor.
de antemano gracias por la ayuda :D
Hola Juan,
Te cuento que recién me acuerdas de hacer el post, lo tendré en mis pendientes.
Sin embargo al final de este video http://blog.soreygarcia.me/2012/10/conociendo-y-personalizando-la.html recuerdo que intentaba mostrar como cambiar el estilo en los diferentes estados, espero que te sirva.
Publicar un comentario