그림자

.NET 다중 플랫폼 앱 UI(.NET MAUI) Shadow 클래스는 레이아웃 또는 보기 주위에 그림자를 그립니다. VisualElement 클래스에는 레이아웃이나 뷰에 그림자를 추가할 수 있는 Shadow형식의 Shadow 바인딩 가능한 속성이 있습니다.

Shadow 클래스는 다음 속성을 정의합니다.

• Radius, float유형의 그림자를 만드는 데 필요한 흐림 효과의 반경을 정의합니다. 이 속성의 기본값은 10입니다.
• float형식의 Opacity그림자의 불투명도를 나타냅니다. 이 속성의 기본값은 1입니다.
• Brush형식의 Brush그림자 색을 지정하는 데 사용되는 브러시를 나타냅니다.
• Offset은 Point형식으로, 그림자의 오프셋을 지정하며, 이는 그림자를 생성하는 광원의 위치를 나타냅니다.

이러한 속성은 BindableProperty 개체에 의해 지원됩니다. 즉, 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정됩니다.

중요하다

Brush 속성은 SolidColorBrush만 현재 지원합니다.

그림자 만들기

컨트롤에 그림자를 추가하려면 컨트롤의 Shadow 속성을 그림자를 정의하는 형식이 지정된 문자열로 설정합니다. 지원되는 문자열 형식은 세 가지입니다.

• color, offset X, offset Y:

  <Image Source="dotnet_bot.png"
         WidthRequest="250"
         HeightRequest="310"
         Shadow="#000000 4 4" />
  

• offset X, offset Y, radius, color:

  <Image Source="dotnet_bot.png"
         WidthRequest="250"
         HeightRequest="310"
         Shadow="5 8 8 rgb(6, 201, 198)" />    
  

• offset X, offset Y, radius, color, opacity:

  <Image Source="dotnet_bot.png"
         WidthRequest="250"
         HeightRequest="310"
         Shadow="4 4 16 AliceBlue 0.5" />
  

색은 다음 형식을 사용하여 지정할 수 있습니다.

포맷	예시	코멘트
16 진수	#rgb, #argb, #rrggbb, #aarrggbb
RGB (레드, 그린, 블루)	rgb(255,0,0), rgb(100%,0%,0%)	유효한 값은 0-255 또는 0%-100%범위에 있습니다.
RGBA	rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8)	유효한 불투명도 값은 0.0-1.0입니다.
HSL	hsl(120, 100%, 50%)	h 유효한 값은 0-360이고, s 및 l 0%-100%.
HSLA	hsla(120, 100%, 50%, .8)	유효한 불투명도 값은 0.0-1.0입니다.
HSV	hsv(120, 100%, 50%)	h 유효한 값은 0-360이고, s 및 v 0%-100%.
HSVA	hsva(120, 100%, 50%, .8)	유효한 불투명도 값은 0.0-1.0입니다.
미리 정의된 색	fuchsia, AquaMarine, limegreen	색 문자열은 대/소문자를 구분하지 않습니다.

또는 속성이 모양을 정의하는 속성 요소 구문을 사용하여 컨트롤의 Shadow 속성을 Shadow 개체로 설정할 수 있습니다.

다음 XAML 예제에서는 속성 요소 구문을 사용하여 Image 그림자를 추가하는 방법을 보여줍니다.

<Image Source="dotnet_bot.png"
       WidthRequest="250"
       HeightRequest="310">
    <Image.Shadow>
        <Shadow Brush="Black"
                Offset="20,20"
                Radius="40"
                Opacity="0.8" />
    </Image.Shadow>
</Image>

이 예제에서는 이미지의 오른쪽과 아래쪽에 표시되도록 지정하는 오프셋과 함께 이미지의 윤곽선 주위에 검은 그림자가 그려집니다.

다음 예제와 같이 잘린 개체에 그림자를 추가할 수도 있습니다.

<Image Source="https://aka.ms/campus.jpg"
       Aspect="AspectFill"
       HeightRequest="220"
       WidthRequest="220"
       HorizontalOptions="Center">
    <Image.Clip>
        <EllipseGeometry Center="220,250"
                         RadiusX="220"
                         RadiusY="220" />
    </Image.Clip>
    <Image.Shadow>
        <Shadow Brush="Black"
                Offset="10,10"
                Opacity="0.8" />
    </Image.Shadow>
</Image>

이 예제에서는 이미지를 클리핑하는 EllipseGeometry 윤곽선 주위에 검은색 그림자가 그려집니다.

요소를 클리핑하는 방법에 대한 자세한 내용은 기하 도형 클립을 참조하세요.