Drop Shadow / Glow Effect Using XAML

Como a maioria de nós sabe, Silverlight tem efeitos embutidos. No entanto, esses efeitos podem consumir bastante memória.

Uma solução seria usar uma imagem para a sombra; No entanto, se você estiver planejando que o objeto projete a sombra ou o brilho para dimensionar dinamicamente, a imagem será pixelizada ou não será dimensionada. A outra solução é criar suas sombras projetadas usando retângulos em XAML.

Aqui, ilustro o uso de memória de um efeito de sombra projetada, uma sombra projetada criada em XAML e nenhuma sombra projetada em uma janela de caixa de diálogo no Silverlight.

No Drop Shadow

Drop Shadow usando os efeitos internos do Silverlight

A drop Shadow using XAML

Podemos ver que nenhuma sombra projetada é a vencedora em termos de desempenho, mas uma sombra projetada criada com XAML é um segundo muito próximo, usando apenas 12 kb extras. O efeito embutido no Silverlight usa mais de 3.000 kb a mais!

Então, como você cria um efeito de sombra projetada em XAML? Na verdade, é muito fácil. Basta criar uma grade de deslocamento com margens negativas (esta será a distância do objeto que a sombra projetada projetará) e adicionar uma série de retângulos com raios de canto, margens e opacidade variados.

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

Observe que meu raio em meus retângulos começa em 7 para corresponder ao raio da janela que está projetando a sombra.  Além disso, o raio aumenta quanto mais longe estiver do objeto.

Talvez você queira adicionar essa grade de sombra projetada a um controle de conteúdo ou controle de usuário, dessa forma, você só precisa criar o XAML uma vez e apenas aplicar o controle de conteúdo ou o controle de usuário onde quiser uma sombra.