sábado, 21 de abril de 2012

Cambiar el estilo de un botón en Windows Phone

Este sencillo post lo hago para responder una pregunta de alguien en el Diplomado de Windows Phone que se está dictando virtualmente en México, intente decirlo en prosa pero definitivamente mejor con imágenes, es cuestión de cinco minutos, ¿Como cambiar el color blanco que se vé cuando presionas un botón en las aplicaciones Windows Phone?

1. Agregas el botón y das sobre el clic derecho en la opción Editar Plantilla y  seleccionas Editar una copia.


2. Se te pedirá que asignes un nombre al estilo y además la ubicación del mismo. Si piensas usar este estilo en todos los botones de tu aplicación ponlo en un diccionario o a nivel de la aplicación. Es bueno cuando tenemos muchos estilos en nuestra aplicación poner nombres representativos que luego sean claros para bien sea aplicándolo a otros controles o leyendo el código.


3. Al entrar a editar la plantilla en la pestaña de estados podrás ver como cuando te ubicas sobre el estado Pressed, el botón muestra el color que se quiere cambiar. 


4. Intente cambiar este color directamente desde el selector en Blend, pero altera todos los colores de fondo de los demás estados así que recomiendo ir al XAML en donde hayamos ubicado nuestro estilo.


5. En el marcado veremos el estilo y como se ha generado el código de estilo asociado a los diferentes estilos y veremos claramente la sección del estado Pressed. Ahí podemos cambiar los colores por otros recursos que tengamos o por valores fijos el nombre de un color por ejemplo Red o el Hexadecimal asociado, y puedes probar el cambio. (Clic en la imagen para agrandar)


6. Luego debes regresar a tiempo de diseño, con el botón que se encuentra en la parte superior del mismo con el que pasaste al marcado. Además puedes salir de la edición de la plantilla.


7. (Actualización del post) Para el diplomado se deben añadir los elementos programáticamente así que para el caso del botón puede crearse usando el estilo que se editó, así:


8. Para crear más botones en edición con el mismo estilo puedes copiar y pegar el botón, o bien a los botónes existentes aplicarles el estilo, seleccionando el botón y en el menú editar plantilla seleccionas el estilo existente.


Esta es la misma mecánica para la mayoría de estilos en Windows Phone, cuando el tema no tiene que ver con los estados se puede editar directamente con el Expression Blend.

Saludos y que te sea útil

Sorey

2 comentarios:

Christian Sanabria dijo...

Para efectos de la Actividad actual del diplomado esto no se puede hacer así, se debe generar los elementos XAML desde una clase en C#, tu lo explicas directamente en XAML

Christian Sanabria.

Sorey García dijo...

Saludos caballero, crear los "estilos" programáticamente es pesado mucho más para alguien que lleva un par de semanas aprendiendo, es cuestión de practicidad. Para terminar la practica tu puedes crear el estilo tal como lo indico y al crear los botónes programáticamente como te lo enseño Rodrigo, asignarle el estilo.

Ya he actualizado el post con esta instrucción.