[XCT] Sombras en Xamarin.Forms

Las sombras consisten en un efecto visual que ayuda al cerebro humano a diferenciar ciertos elementos de la interfaz de usuario. Y esta es una de las razones por las que los diseñadores añaden sombras en sus diseños para aplicaciones móviles.

En este artículo vamos a aprender como añadir sombras, así como personalizar las mismas con diferentes opciones relacionadas con la dirección, tamaño o color de la sombra utilizando el Xamarin Community Toolkit.

Añadiendo Shadows usando el XCT

En el XCT se ha añadido un efecto sumamente útil y sencillo de utilizar que permite añadir sombras a cualquier View que añadimos a la UI.

El efecto ShadowEffect cuenta con una serie de propiedades para permitir personalizar las sombras:

  • Color: Especifica el color usado en la sombra.
  • OffsetX: Este valor nos permite definir el desplazamiento de la sombra. OffsetX especifica la distancia horizontal. Los valores negativos colocan las sombra a la izquierda de el elemento.
  • OffsetY: Este valor nos permite definir el desplazamiento de la sombra. OffsetY especifica la distancia vertical. Los valores negativos colocan las sombra en la parte superior de el elemento.
  • Opacity: Este valor permite especificar la opacidad de la sombra.
  • Radius: Cuando mayor sea este valor, mayor sera la difuminación, por consecuencia la sombra se vuelve más grande y ligera.

Utilizar sombras es sencillo, tras añadir la referencia al paquete NuGet del Xamarin Community Toolkit 1.1 o superior, añadimos el namespace necesario para trabajar con el XCT:

xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

Y utilizando el efecto ShadowEffect con las propiedades que hemos visto previamente:

<Label 
    Text="Label With Shifted Red Shadow"
    xct:ShadowEffect.Color="Red"
    xct:ShadowEffect.OffsetX="10"
    xct:ShadowEffect.OffsetY="10" />

El resultado:

Sencillo, ¿verdad?. Recuerda, puedes usar los comentarios de la entrada para añadir tus dudas o preguntas o bien, si has usado este efecto y quieres compartir con todos tu resultado!.

Más información

Un pensamiento en “[XCT] Sombras en Xamarin.Forms

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s