Shell Root
11-03-2009, 07:13 PM
Como hacer un estilo de botón en WPF
Hola, en este post explicaré la forma más sencilla de crear nuestros propios estilos para botones en Windows Presentation Foundation.
En primer lugar creamos un proyecto WPF y abrimos Expression Blend 2.
1.- En este caso haré un botón circular, entonces voy a la barra de herramientas y selecciono una elipse, la coloco en el formulario.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-01-thumb.jpg?w=149&h=92
2.- Vamos al menú Tools y damos en Make Button.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-02-thumb.jpg?w=525&h=319
3.- Escogemos un nombre y damos en nuevo Resource Dictionary, esto es con el fin de poder tener nuestro estilo de manera ordenada en un archivo .xaml y poder acceder a ella cuando queremos.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-03-thumb.jpg?w=341&h=224
4.- Coloque un nombre al recurso.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-04-thumb.jpg?w=362&h=238
5.- Seleccionamos el botón y podemos dar en Edit Template o en Edit a Copy..
http://mredison.files.wordpress.com/2008/11/buttoninwpf-05-thumb.jpg?w=504&h=288
6.- Después podemos cambiar el color de fondo del botón aplicando un gradiente en la propiedad Fill.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-06-thumb.jpg?w=509&h=368
7.- Para agregar un poquito más de estilo y diseño, coloque una elipse encima del botón.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-07-thumb.jpg?w=334&h=296
8.- Puede cambiar el diseño de la elipse aplicando a cada punto de color un porcentaje de Alfa o claridad.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-08-thumb.jpg?w=524&h=277
Teniendo a continuación algo como esto:
http://mredison.files.wordpress.com/2008/11/buttoninwpf-09-thumb.jpg?w=264&h=223
9.- Ahora nos vamos a la paleta de colores, y seleccionamos el evento IsPressed=True.
Ahora podemos cambiar el estilo de nuestro botón simulando como se verá cuando es presionado.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-11-thumb.jpg?w=504&h=319
Quedando de esta manera:
http://mredison.files.wordpress.com/2008/11/buttoninwpf-13-thumb.jpg?w=498&h=298
10.- Por último cambiamos el contenido que mostrará el botón y corremos el ejemplo.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-14-thumb.jpg?w=464&h=234
Saludos
Edison Daniel García Chiñas
Microsoft Student Partner | México
Hola, en este post explicaré la forma más sencilla de crear nuestros propios estilos para botones en Windows Presentation Foundation.
En primer lugar creamos un proyecto WPF y abrimos Expression Blend 2.
1.- En este caso haré un botón circular, entonces voy a la barra de herramientas y selecciono una elipse, la coloco en el formulario.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-01-thumb.jpg?w=149&h=92
2.- Vamos al menú Tools y damos en Make Button.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-02-thumb.jpg?w=525&h=319
3.- Escogemos un nombre y damos en nuevo Resource Dictionary, esto es con el fin de poder tener nuestro estilo de manera ordenada en un archivo .xaml y poder acceder a ella cuando queremos.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-03-thumb.jpg?w=341&h=224
4.- Coloque un nombre al recurso.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-04-thumb.jpg?w=362&h=238
5.- Seleccionamos el botón y podemos dar en Edit Template o en Edit a Copy..
http://mredison.files.wordpress.com/2008/11/buttoninwpf-05-thumb.jpg?w=504&h=288
6.- Después podemos cambiar el color de fondo del botón aplicando un gradiente en la propiedad Fill.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-06-thumb.jpg?w=509&h=368
7.- Para agregar un poquito más de estilo y diseño, coloque una elipse encima del botón.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-07-thumb.jpg?w=334&h=296
8.- Puede cambiar el diseño de la elipse aplicando a cada punto de color un porcentaje de Alfa o claridad.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-08-thumb.jpg?w=524&h=277
Teniendo a continuación algo como esto:
http://mredison.files.wordpress.com/2008/11/buttoninwpf-09-thumb.jpg?w=264&h=223
9.- Ahora nos vamos a la paleta de colores, y seleccionamos el evento IsPressed=True.
Ahora podemos cambiar el estilo de nuestro botón simulando como se verá cuando es presionado.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-11-thumb.jpg?w=504&h=319
Quedando de esta manera:
http://mredison.files.wordpress.com/2008/11/buttoninwpf-13-thumb.jpg?w=498&h=298
10.- Por último cambiamos el contenido que mostrará el botón y corremos el ejemplo.
http://mredison.files.wordpress.com/2008/11/buttoninwpf-14-thumb.jpg?w=464&h=234
Saludos
Edison Daniel García Chiñas
Microsoft Student Partner | México