Drop Shadow / Glow Effect Using XAML

私たちのほとんどが知っているように、Silverlightにはエフェクトが組み込まれています。ただし、これらの影響はかなりメモリを大量に消費する可能性があります。

1つの解決策は、影に画像を使用することです。ただし、影やグローを投影するオブジェクトを動的に拡大縮小することを計画している場合、画像はピクセル化されるか、拡大縮小されません。もう 1 つの解決策は、XAML で四角形を使用してドロップ シャドウを作成することです。

ここでは、ドロップ シャドウ効果、XAML に組み込まれたドロップ シャドウ、および Dialog Window でのドロップ シャドウがまったくない場合のメモリ使用量Silverlight説明します。

No Drop Shadow

Silverlight の組み込みエフェクトを使用したドロップ シャドウ

A drop Shadow using XAML

パフォーマンスの点ではドロップシャドウが勝者ではありませんが、XAMLで構築されたドロップシャドウは、12kbの追加で非常に僅差で2位であることがわかります。Built in Effectは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 を一度作成するだけで、シャドウが必要な場所にコンテンツ コントロールまたはユーザー コントロールを適用するだけで済みます。