Oscuridad

Las sombras crean señales visuales en la interfaz, lo que ayuda al cerebro humano a diferenciar el elemento de la interfaz de usuario que ve el usuario. Y esta es la razón por la que los diseñadores móviles prefieren incorporar sombras en sus diseños.

API

La clase DropShadow proporciona medios para crear una sombra configurable que se puede aplicar a un diseño .

Propiedades

• Radio : el radio del desenfoque gaussiano utilizado para generar la sombra.
• Color : el color de la sombra.
• Desplazamiento : Desplazamiento de la sombra en relación con su diseño.
• Opacidad : la opacidad de la sombra.

public class DropShadow : BindableObject
{
    public static readonly BindableProperty RadiusProperty = BindableProperty.Create(
        nameof(Radius), typeof(double), typeof(DropShadow), 10.0d);

    public double Radius
    {
        get => (double)GetValue(RadiusProperty);
        set => SetValue(RadiusProperty, value);
    }

    public static readonly BindableProperty ColorProperty = BindableProperty.Create(
        nameof(Color), typeof(Color), typeof(DropShadow), Color.Black);

    public Color Color
    {
        get => (Color)GetValue(ColorProperty);
        set => SetValue(ColorProperty, value);
    }    

    public static readonly BindableProperty OffsetProperty = BindableProperty.Create(
        nameof(Offset), typeof(Point), typeof(DropShadow), new Point(1, 1));

    public Point Offset
    {
        get => (Point)GetValue(OffsetProperty);
        set => SetValue(OffsetProperty, value);
    }

    public static readonly BindableProperty OpacityProperty = BindableProperty.Create(
        nameof(Opacity), typeof(double), typeof(DropShadow), 1.0d);

    public double Opacity
    {
        get => (double)GetValue(OpacityProperty);
        set => SetValue(OpacityProperty, value);
    }
}

Escenarios

Veamos un ejemplo usando C #, XAML y CSS.

Ejemplo de C #

var layout = new Grid();

var shadow = new DropShadow ();
shadow.Radius = 12;
shadow.Color = Color.Red;
shadow.Offset = new Point (12, 18);
shadow.Opacity = 0.75d;

layout.Shadow = shadow;

Ejemplo de XAML

<Grid>
     <Grid.Shadow>
          <DropShadow
               Radius="12"
               Color="Red"
               Offset="12, 18"
               Opacity="0.75" />
     </Grid.Shadow>
</Grid>

Ejemplo de CSS

box-shadow: 12px 18px 12px 12px red;

Compatibilidad con versiones anteriores

Ya tenemos sombras en algunos de los diseños de Xamarin.Forms. La propiedad HasShadow de Frame quedaría obsoleta (aún podría usarse, aunque se recomendaría el uso de la propiedad Shadow).

Alcance

En esta especificación, agregamos sombras a los diferentes diseños de Xamarin.Forms. Los controles específicos, como una etiqueta, no entran dentro del alcance (podrían venir más adelante).

Dificultad: media