Drop Shadow / Glow Effect Using XAML

우리 대부분이 알고 있듯이 Silverlight 에는 내장 효과가 있습니다. 그러나 이러한 효과는 메모리를 상당히 많이 사용할 수 있습니다.

한 가지 해결책은 그림자에 이미지를 사용하는 것입니다. 그러나 그림자나 광선을 드리우는 물체가 동적으로 확장되도록 계획하는 경우 이미지가 픽셀화되거나 확장되지 않습니다. 다른 해결책은 XAML에서 사각형을 사용하여 그림자를 만드는 것입니다.

여기에서는 그림자 효과, XAML에 빌드된 그림자 및 Silverlight의 대화 상자 창에 그림자가 전혀 없는 그림자의 메모리 사용량을 보여 줍니다.

No Drop Shadow

Silverlight의 기본 제공 효과를 사용한 그림자

A drop Shadow using XAML

성능 측면에서 어떤 그림자도 승자가 아님을 알 수 있지만 XAML로 빌드된 그림자는 추가 12kb만 사용하면 매우 가까운 두 번째입니다. Silverlight의 내장 효과는 3,000kb 이상을 더 사용합니다!

그렇다면 XAML에서 그림자 효과를 만들려면 어떻게 해야 할까요? 실제로 매우 쉽습니다. 음의 여백이 있는 오프셋 그리드를 만들고(이것은 드롭 섀도우가 드리워질 객체로부터의 거리입니다) 다양한 모서리 반경, 여백 및 불투명도를 가진 일련의 사각형을 추가하기만 하면 됩니다.

<Grid Margin="-2,-2,-6,-6">
<Rectangle Stroke="Black" Margin="5" RadiusX="7" RadiusY="7" Opacity="0.3"/>
      <Rectangle Stroke="Black" Margin="4" RadiusX="8" RadiusY="8" Opacity="0.25"/>
      <Rectangle Stroke="Black" Margin="3" RadiusX="9" RadiusY="9" Opacity="0.2"/>
      <Rectangle Stroke="Black" Margin="2" RadiusX="10" RadiusY="10" Opacity="0.15"/>
      <Rectangle Stroke="Black" Margin="1" RadiusX="11" RadiusY="11" Opacity="0.1"/>
      <Rectangle Stroke="Black" Margin="0" RadiusX="12" RadiusY="12" Opacity="0.05"/>
</Grid>

내 사각형의 반경은 그림자를 드리우는 창의 반경과 일치하도록 7에서 시작합니다.  또한 반지름이 물체에서 멀어질수록 증가합니다.

이 그림자 그리드를 콘텐츠 컨트롤 또는 사용자 컨트롤에 추가할 수 있으며, 이렇게 하면 XAML을 한 번만 만들고 그림자가 필요한 위치에 콘텐츠 컨트롤 또는 사용자 컨트롤을 적용하기만 하면 됩니다.