DEV Community

Enmanuel Toribio
Enmanuel Toribio

Posted on • Originally published at blog.torib.io on

3 1

Definiendo estilos para nuestras aplicaciones

El uso de estilos (Styles) puede ayudar a definir una interfaz de usuario coherente para tu aplicación y es una excelente manera de hacer que tus archivos XAML sean más legibles y mantenibles a largo plazo.

Algunas características de los estilos:

  • Son muy fáciles de definir.
  • Se puede heredar para minimizar la reutilización del código.
  • Se puede definir en XAML o en C #.
  • Puedes implementar múltiples clases de estilo en el mismo control sin necesidad de herencia.

Para definir un estilo, debes agregarlo como un recurso. Puedes definirlo dentro de páginas específicas o dentro de la clase de aplicación. Aquí hay un ejemplo:

A la izquierda se ve cómo se ve la aplicación antes del estilo y a la derecha se muestra el resultado después

Centrémonos en esta parte:

Vea cómo agregamos las definiciones de sstilos dentro del ResourceDictionary del ContentPage , también podemos hacerlo a nivel de aplicación. La definición de estilo no puede ser más explícita, estas son las partes:

  • La propiedad TargetType : esta propiedad es obligatoria y define el tipo de control al que estamos aplicando el estilo y las propiedades a las que tenemos acceso para establecer.
  • Las etiquetas de Setter : debes agregar una etiqueta de Setter por cada propiedad que desee establecer. Tiene una propiedad de Property y una propiedad de Value. El IntelliSense en Visual Studio completa automáticamente las propiedades y valores disponibles de acuerdo con el TargetType.
  • La propiedad x:Key : esta propiedad es opcional. Cuando configuras esta propiedad, estás definiendo inmediatamente el Estilo como un tipo explícito.

Los estilos vienen en seis sabores:

  • Estilos globales: Cuando defines tus estilos dentro de tu aplicación y puedes usarlos en todo el proyecto
  • Estilos implícitos: este es el comportamiento predeterminado, siempre que no asigne una clave (la propiedad x:Key) al estilo, se aplicará implícitamente a todos los controles del TargetType especificado
  • Estilos explícitos: cuando se define un estilo y se establece una clave para él, si haces esto necesitas establecer explícitamente la propiedad Style del control al que deseas aplicar el estilo.
  • Estilos dinámicos: aunque los estilos no pueden modificarse durante el tiempo de ejecución, puedes utilizar recursos dinámicos como solución alternativa para lograr este efecto.
  • Estilos de dispositivo: estos solo se pueden aplicar a las instancias de Label por ahora y hay seis en total, que se encuentran en la clase Devices.Styles: BodyStyle, CaptionStyle, ListItemDetailTextStyle, ListItemTextStyle, SubtitleStyle y TitleStyle

Puedes hacer que un estilo herede de otro estilo utilizando la propiedad BasedOn. Los estilos se pueden aplicar a cada elemento visual en Xamarin Forms. Si planeas heredar de un elemento visual y agregar estilos para este nuevo elemento, asegúrate de especificar el nombre de la clase en TargetType o establece ApplyToDerivedTypes en True en la etiqueta Style

Como siempre gracias por tu tiempo y espero que te sirva de algo este contenido. Nos vemos en una próxima entrega.

The post Definiendo estilos para nuestras aplicaciones appeared first on Enmanuel Toribio.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay