Bayangan

Bayangan membuat isyarat visual di antarmuka, yang membantu otak manusia membedakan elemen UI yang dilihat pengguna. Dan, inilah alasan mengapa sebenarnya desainer ponsel lebih suka memasukkan bayangan dalam desain mereka.

API

Kelas DropShadow menyediakan sarana untuk membuat bayangan yang dapat dikonfigurasi yang dapat diterapkan ke Layout .

Properti

• Radius : Jari-jari Gaussian blur yang digunakan untuk menghasilkan bayangan.
• Warna : Warna bayangan.
• Offset : Offset bayangan relatif terhadap Layout-nya.
• Opacity :

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

Skenario

Mari kita lihat contoh menggunakan C#, XAML dan CSS.

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

Contoh XAML

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

Contoh CSS

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

Kompatibilitas terbalik

Kami sudah memiliki bayangan di beberapa Tata Letak Xamarin.Forms. Properti HasShadow Frame akan menjadi usang (masih bisa digunakan, meskipun penggunaan properti Shadow akan direkomendasikan).

Cakupan

Dalam Spec ini, kami menambahkan bayangan ke Xamarin.Forms Layouts yang berbeda. Kontrol khusus, seperti Label, tidak termasuk dalam cakupan (bisa datang nanti).

Kesulitan: Sedang