Sombras

As sombras criam pistas visuais na interface, o que ajuda o cérebro humano a diferenciar o elemento da IU que o usuário vê. E, esta é a razão pela qual os designers de dispositivos móveis preferem incorporar sombras em seus designs.

API

A classe DropShadow fornece meios de criar uma sombra configurável que pode ser aplicada a um Layout .

Propriedades

• Raio : o raio do desfoque gaussiano usado para gerar a sombra.
• Cor : a cor da sombra.
• Offset : Offset da sombra em relação ao seu Layout.
• Opacidade : a opacidade da 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);
    }
}

Cenários

Vamos ver um exemplo usando C #, XAML e CSS.

Exemplo 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;

Exemplo XAML

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

Exemplo CSS

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

Compatibilidade com versões anteriores

Já temos sombras em alguns dos layouts Xamarin.Forms. A propriedade HasShadow de Frame se tornaria obsoleta (ela ainda poderia ser usada, embora o uso da propriedade Shadow fosse recomendado).

Alcance

Nesta especificação, adicionamos sombras aos diferentes layouts de Xamarin.Forms. Controles específicos, como um rótulo, não se enquadram no escopo (eles podem vir mais tarde).

Dificuldade: Média