الظلال

تُنشئ الظلال إشارات مرئية في الواجهة ، مما يساعد الدماغ البشري على التمييز بين عنصر واجهة المستخدم الذي يراه المستخدم. وهذا هو السبب وراء تفضيل مصممي الأجهزة المحمولة فعليًا دمج الظلال في تصميماتهم.

API

توفر فئة DropShadow وسائل لإنشاء ظل قابل للتكوين يمكن تطبيقه على التخطيط .

الخصائص

• Radius : نصف قطر التمويه الغاوسي المستخدم لتوليد الظل.
• اللون : لون الظل.
• Offset : إزاحة الظل بالنسبة إلى التخطيط الخاص به.
• العتامة : عتامة الظل.

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

سيناريوهات

دعونا نرى مثالاً باستخدام C # و XAML و CSS.

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;

مثال XAML

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

مثال CSS

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

التوافق

لدينا بالفعل ظلال في بعض تخطيطات Xamarin.Forms. ستصبح خاصية HasShadow الخاصة بالإطار مهملة (لا يزال من الممكن استخدامها ، على الرغم من أن استخدام خاصية Shadow موصى به).

نطاق

في هذه المواصفات ، نضيف الظلال إلى تخطيطات Xamarin.Forms المختلفة. لا تندرج عناصر التحكم المحددة ، مثل التسمية ، ضمن النطاق (يمكن أن تأتي لاحقًا).

الصعوبة: متوسطة