Drop Shadow / Glow Effect Using XAML

Como la mayoría de nosotros sabemos, Silverlight tiene efectos incorporados. Sin embargo, estos efectos pueden ser bastante intensivos en memoria.

Una solución sería usar una imagen para la sombra; Sin embargo, si está planeando que el objeto que proyecta la sombra o el resplandor se escale dinámicamente, la imagen se pixelará o no se escalará. La otra solución es crear las sombras paralelas mediante rectángulos en XAML.

Aquí ilustro el uso de memoria de un efecto de sombra paralela, una sombra paralela integrada en XAML y ninguna sombra paralela en una ventana de diálogo en Silverlight.

No Drop Shadow

Sombra paralela con los efectos integrados de Silverlight

A drop Shadow using XAML

Podemos ver que ninguna sombra paralela es la ganadora en términos de rendimiento, pero una sombra paralela creada con XAML está en un segundo lugar muy cercano usando solo 12 kb adicionales. ¡El Built in effect en Silverlight utiliza más de 3.000 kb más!

Entonces, ¿cómo se crea un efecto de sombra paralela en XAML? En realidad, es muy fácil. Simplemente crea una cuadrícula de desplazamiento con márgenes negativos (esta será la distancia a la que se alejará el objeto que proyectará la sombra) y agrega una serie de rectángulos con radios de esquina, márgenes y opacidad variables.

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

Tenga en cuenta que el radio de mis rectángulos comienza en 7 para que coincida con el radio de la ventana que proyecta la sombra.  También que el radio aumenta cuanto más lejos está del objeto.

Es posible que desee agregar esta cuadrícula de sombra paralela a un control de contenido o control de usuario, de esa manera solo tiene que crear el XAML una vez y aplicar el control de contenido o el control de usuario donde desee una sombra.