Definiendo estilos para nuestras aplicaciones

Styles
Share on facebook
Share on twitter
Share on linkedin

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.

¿Te gustó el artículo o tienes algún comentario? Puedes darme mention en twitter @eatskolnikov

Comparte este post con tus amigos

Share on linkedin
Share on twitter
Share on facebook

¿quieres recibir los artículos en tu correo?

Suscribete a mi boletín de correos y enterate cuando haya una nueva publicación

Otros artículos

Xamarin

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

Leer más »
Enmanuel Toribio hablando sobre Xamarin en codecamsdq 2019
Eventos

La Experiencia CodecampSDQ

El sábado pasado, 1 de junio, tuve el privilegio de participar como miembro del personal y orador en el CodecampSDQ. Se llevó a cabo en las instalaciones de la Universidad INTEC aquí en Santo Domingo. Este evento ha estado ocurriendo durante muchos años y se ha convertido en una especie

Leer más »
Xamarin

Cambiando la etiqueta del botón Back en iOS con Xamarin Forms

Algo de contexto He estado trabajando en la aplicación para CodecampSDQ (iOS | Android) que se celebrará en las instalaciones de Intec este 1 de junio. El código se basa en este repositorio y hemos realizado algunas adaptaciones de las que probablemente hablaré con mayor detalle más adelante. En un momento me

Leer más »
Xamarin

Áreas seguras del Layout para iOS en Xamarin Forms

Desde el lanzamiento del iPhone X, hay un “notch” en la parte superior de la pantalla en los dispositivos iOS que tiende a ser molesto porque se sobrepone al contenido de nuestra aplicación. Normalmente tendrías que agregar algún tipo de margen para evitar este problema. El mayor inconveniente con este

Leer más »
From https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=macos
Xamarin

Almacenamiento en caché de imágenes en Xamarin Forms

Alguien me preguntó sobre un problema que estaba teniendo al mostrar un ListView que tenía una imagen para cada celda. Cuando el usuario se movía por la lista, las imágenes parpadeaban y la interfaz de usuario se comportaba un poco lento. Las imágenes se estaban cargando desde internet. El problema

Leer más »