그림자

그림자는 인터페이스에서 시각적 신호를 만들어 인간의 두뇌가 사용자가 보는 UI 요소를 구별하는 데 도움이 됩니다. 그리고 이것이 실제로 모바일 디자이너가 디자인에 그림자를 포함하는 것을 선호하는 이유입니다.

API

DropShadow 클래스는 Layout 에 적용할 수 있는 구성 가능한 그림자를 만드는 수단을 제공합니다.

속성

• Radius : 그림자를 생성하는 데 사용되는 가우시안 블러의 반경입니다.
• 색상 : 그림자의 색상입니다.
• 오프셋 : 레이아웃을 기준으로 한 그림자의 오프셋입니다.
• 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);
    }
}

시나리오

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 레이아웃에는 이미 그림자가 있습니다. Frame의 HasShadow 속성은 더 이상 사용되지 않습니다 (Shadow 속성 사용을 권장하지만 여전히 사용할 수 있음).

범위

이 사양에서는 다른 Xamarin.Forms 레이아웃에 그림자를 추가합니다. 레이블과 같은 특정 컨트롤은 범위에 포함되지 않습니다(나중에 나올 수 있음).

난이도 : 중