XAML para CSS devs: ¿Cómo aplicar estilos?

Hola! En este post veremos las diferentes maneras de aplicar estilos en CSS y XAML considerando entre otras cosas las convenciones. Este post, (aparte de ser el primer post de blog que escribo en la vida) es el primero de una serie que decidí llamar XAML para CSS devs con el fin de que sea una suerte de guía para todas aquellas personas que, como yo, vienen del mundo del desarrollo web, donde se le da forma a la web con HTML, CSS y JS, y tienen interés en el desarrollo de aplicaciones de escritorio en .Net donde la herramienta más usada es XAML. Quiero aclarar que, a pesar de tener conocimientos de front-end, me inclino considerablemente más al área del back-end, con todo lo que ello implica para esta serie 😅 Sin más que agregar, comencemos 🚀

Aplicando estilos en CSS

Primero debemos recordar las diferentes maneras de aplicar estilos en css.

Estilos en línea

Un sacrilegio en el mundo del desarrollo web, pero el método existe.

Estilos internos

De nuevo, no es ni de cerca la convención en css, pero podemos aplicar estilos valiéndonos de la etiqueta <style>

Hojas de estilo externas

Por último, debido en gran parte a la cantidad de problemas que nos evita a largo plazo, la manera aplastantemente más aceptada de aplicar estilos es usar hojas de css externas. Para ello creamos un enlace a dicha hoja usando la etiqueta <link> dentro del header de nuestro html. Adicionalmente, usando el atributo class de nuestra etiqueta <p> hacemos que nuestro texto responda a la clase parrafo que nos encontraremos dentro de nuestra hoja de estilos

Nota: Vale la pena recordar que las clases no es la única manera de definir estilos dentro de nuestro css, pero usarlas sobre otros selectores se considera una buena práctica.

Aplicando estilos en XAML

En xaml contamos también, en principio, con dos maneras de aplicar estilos, y una de ellas se subdivide en diferentes niveles, pero no temamos, no es tan complejo como suena:

Estilos directos en el control

Se podría decir que equivale a los estilos en línea de CSS. En XAML es mucho más aceptado que en css aplicar estilos en línea. Dicho eso, a medida que el estilo que deseamos aplicar se vuelve más complejo, es mejor considerar otras alternativas. Se puede lograr de dos maneras, la más común es la siguiente

Estilos como recursos

Podemos definir estilos como recursos. Estos recursos que pueden ser leídos por algún control de nuestro xaml. Hay varios lugares o niveles de nuestro código para definirlo y por ello este método se subdivide dependiendo de a qué nivel van a estár los recursos:

Recursos a nivel del padre

El padre inmediato de nuestros controles de TextBlock es StackPanel, podemos definir allí los estilos que tendrá nuestro título y nuestro párrafo como recurso

Como podemos observar estamos asignando una key (x:Key) a nuestro recurso para que se aplique solamente a los controles hijos que soliciten tal recurso con su respectiva key. Si no hiciéramos esto, cada TextBlock hijo heredaría estos estilos y eso en CSS sería similar a usar los selectores de las etiquetas, por ejemplo h1 o p, en vez de usar clases o selectores de id.

Recursos a nivel de la ventana

En WPF todo está dentro de una ventana y en dicha ventana podemos también establecer recursos que podrán ser accedidos por los controles dentro de esta

Recursos a nivel de aplicación

De igual manera, en WPF todo está contenido dentro de una aplicación, y sí, también podemos establecer los recursos allí. Esto es útil para reutilizar estilos y mantener consistencia en toda la aplicación. A este punto ya podemos imaginar cómo se vería el código para lograrlo. La última variación de este método la haremos a este nivel también así que saltemos el ejemplo y vayamos directo a ello.

Almacenar los recursos dentro de un ResourceDictionary

Así como en CSS, en XAML, podemos tener nuestros estilos en un archivo separado, esto se logra con los ResourceDictionary. Dentro de estos podemos almacenar los estilos tal y como lo hemos venido haciendo y luego establecer dicho ResourceDictionary como un recurso a nivel que queramos.

Nota: Podemos usar varios ResourceDictionaries a la vez para modularizar nuestros estilos y aplicarlos a nuestra aplicación anidandolos dentro de <ResourceDictionary.MergeDictionaries>

Hay otras maneras que no prestaré en este post, por ejemplo al aplicar estilos directamente en el control se puede usar la propiedad Style de los controles.

Otra alternativa es aplicarlos a través del “Code Behind”, pero eso no es muy común e involucra una cantidad mayor de código que ya sería escrito en C#.

Y allí está, hemos visto las diferentes maneras de aplicar estilos en CSS y XAML. Pero hay más por explorar en próximos posts. No me considero un experto en XAML por lo que hacer estos post son para mí una suerte de apuntes📝y como cualquier apunte toda sugerencia o feedback es bien recibido.

Para finalizar, espero que te sea de utilidad, y nos vemos en futuros posts 👋🏼