Тени

Тени создают визуальные подсказки в интерфейсе, которые помогают человеческому мозгу различать элементы пользовательского интерфейса, которые видит пользователь. И это причина, по которой мобильные дизайнеры предпочитают включать тени в свой дизайн.

API

Класс DropShadow предоставляет средства для создания настраиваемой тени, которую можно применить к макету .

Характеристики

• Радиус : радиус размытия по Гауссу, используемый для создания тени.
• Цвет : цвет тени.
• Смещение : смещение тени относительно ее макета.
• Непрозрачность : непрозрачность тени.

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).

Сфера

В этом Spec, мы добавим тень к различным Xamarin.Forms макетам. Конкретные элементы управления, такие как метка, не входят в область действия (они могут появиться позже).

Уровень сложности: средний