Schatten

Schatten erzeugen visuelle Hinweise in der Benutzeroberfläche, die dem menschlichen Gehirn helfen, das UI-Element zu unterscheiden, das der Benutzer sieht. Und das ist der Grund, warum mobile Designer es vorziehen, Schatten in ihre Designs zu integrieren.

API

Die DropShadow- Klasse bietet Mittel zum Erstellen eines konfigurierbaren Schattens, der auf ein Layout angewendet werden kann.

Eigenschaften

• Radius : Der Radius der Gaußschen Unschärfe, die verwendet wird, um den Schatten zu erzeugen.
• Farbe : Die Farbe des Schattens.
• Offset : Offset des Schattens relativ zu seinem Layout.
• Opazität: Die Opazität des Schattens.

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

Szenarien

Sehen wir uns ein Beispiel mit C#, XAML und CSS an.

C#-Beispiel

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;

XAML-Beispiel

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

CSS-Beispiel

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

Rückwärtskompatibilität

Wir haben bereits Schatten in einigen der Xamarin.Forms-Layouts. Die HasShadow-Eigenschaft von Frame würde veraltet sein (sie könnte weiterhin verwendet werden, obwohl die Verwendung der Shadow-Eigenschaft empfohlen wird).

Umfang

In dieser Spezifikation fügen wir den verschiedenen hinzu . Bestimmte Steuerelemente, wie z. B. ein Label, fallen nicht in den Anwendungsbereich (sie könnten später hinzukommen).

Schwierigkeit : Mittel