How To: Crear nuestros propios estilos

Hola a todos!

Hoy vengo a contaros como podemos crear nuestros propios estilos de controles y crearnos un diccionario con ellos y usarlos cuando nos vengan en gana.

Bueno primero de todo nos creamos un proyecto que yo llamo PruebaEstilos.

En segundo lugar creamos el diccionario donde almacenaremos todos los estilos que creemos. El diccionario se crea aquí. Luego le ponemos un nombre y listo.

 

Ahora necesitamos agregar a nuestro proyecto lo que viene siendo el diccionario del sistema. Es un diccionario como el nuestro pero trae todos los controles. La forma de la que yo lo añado a mi proyecto no es muy ortodoxa, pero de momento no he encontrado otra mejor, jejeje. Si alguien la sabe que lo diga :).

Bueno hacemos lo siguiente:

1.           1. Picamos en el botón Asset Library.

2.           2. En la pestaña Controls seleccionamos Simple Styles.

3.           3. Seleccionamos cualquier control y añadimos uno a nuestro lienzo.

4.           4. Seleccionamos el control creado y lo eliminamos. 

 

Ahora si nos fijamos tenemos en nuestro proyecto un fichero más que se llama Simple Styles.xaml. Bien, pues en la pestaña de recursos también tenemos ese diccionario de recursos. Nos vamos allí.

Ahora hacemos click en la flechita de al lado de simple Styles.xaml para expandir y ver los controles que trae ese diccionario.

 

Bien. Pues lo que vamos a hacer es modificar el estilo del SimpleButton y llevárnoslo a nuestro diccionario. Para ello seleccionamos encima de él con el botón derecho del ratón y le damos a Edit.

Se nos abre un botón como tenemos en la figura siguiente y dándolo botón derecho donde pone Style y siguiendo el ejemplo hacemos click en Edit a Copy…

 

Le ponemos un nombre a nuestro estilo y una ubicación, en este caso el diccionario que nos creamos antes.

Ahora se nos abre nuestro control con todos sus elementos, en este caso tenemos Border y [Content Presenter]. Ahora podemos cambiar el color del Border, modificar el comportamiento en los Triggers…

 

Una vez aquí contamos con nuestra imaginación y la capacidad de crear que tengamos.

Una aclaración: Cuando en este caso queremos cambiar el color del Border, tenemos el color del Background con un rectangulito en amarillo/naranja. Esto quiere decir que para que le pongamos el color en este caso, tenemos que convertir el color en un Resource y luego seleccionarlo pichando en Local Resources del menú desplegable del color Background.

 

Me he creado la brocha DrawingBrush1. Me he ido a la pestaña Resources, la he buscado dentro de mi diccionario, le ha dado a su flechita asociada y le he puesto el color a mi gusto.

 

Ahora en la propiedad Background seleccionamos la brocha recién creada y listo, ya tiene el color deseado.

Ya mismo podemos guardar el estilo y usarlo en los botones que nos de la real gana. Le damos al botón Scope Up un par de veces y volvemos a nuestro Window1.xaml. Nos creamos un botón, nos vamos a su propiedad Style en la sección Miscellaneous y seleccionamos (dándole al cuadradito de su derecha), Local Resource -> SimpleButton y listo, ya tenemos el botón listo para usar.

Creo que no se me escapa nada :)

Un saludo a todos

PD: Modificar lo demás es ponerse a trastear, pero si tenéis dudas os digo, como siempre, que encantado de ayudaros.