Ombres

Les ombres créent des repères visuels dans l'interface, ce qui aide le cerveau humain à différencier l'élément d'interface utilisateur que l'utilisateur voit. Et c'est la raison pour laquelle les concepteurs mobiles préfèrent incorporer des ombres dans leurs conceptions.

API

La classe DropShadow permet de créer une ombre configurable qui peut être appliquée à un Layout .

Propriétés

• Rayon : Le rayon du flou gaussien utilisé pour générer l'ombre.
• Couleur : La couleur de l'ombre.
• Décalage : Décalage de l'ombre par rapport à son Layout.
• Opacité : L'opacité de l'ombre.

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);
    }
}

Scénarios

Voyons un exemple utilisant C#, XAML et CSS.

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

Exemple XAML

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

Exemple CSS

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

Rétrocompatibilité

Nous avons déjà des ombres dans certaines des mises en page Xamarin.Forms. La propriété HasShadow de Frame deviendrait obsolète (elle pourrait toujours être utilisée, bien que l'utilisation de la propriété Shadow soit recommandée).

Portée

Dans cette spécification, nous ajoutons des ombres aux différentes mises en page Xamarin.Forms . Des contrôles spécifiques, comme un Label, n'entrent pas dans le champ d'application (ils pourraient venir plus tard).

Difficulté : Moyenne