Question

When I add a dropshadow bitmap effect to a rectangle, the dropshadow takes into account the transparency of the rectangle (makes sense). Is there a way to render a dropshadow on a transparent rectangle ‘as if’ the rectangle were opaque? ie what would appear is a rectangle-shaped ‘hole’, with a dropshadow.

Here is the XAML for a transparent rectangle with a dropshadow – nothing is displayed:

<Rectangle Fill="Transparent" Margin="10" Width="100" Height="100">
  <Rectangle.BitmapEffect>
    <DropShadowBitmapEffect/>
  </Rectangle.BitmapEffect>
</Rectangle>

Answer 1

Drop this into Kaxaml. It creates a transparent Rectangle of size 500×500, with a SystemDropShadowChrome Decorator. The drop shadow’s clip is set to exclude the Rectangle’s region.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas>
        <theme:SystemDropShadowChrome Margin="0,0,5,5">
            <Rectangle Width="500" Height="500" Fill="transparent"/>
            <theme:SystemDropShadowChrome.Clip>
                <CombinedGeometry GeometryCombineMode="Exclude">
                    <CombinedGeometry.Geometry1>
                        <RectangleGeometry Rect="0,0,505,505"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry Rect="0,0,500,500"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </theme:SystemDropShadowChrome.Clip>
        </theme:SystemDropShadowChrome>
    </Canvas>
</Page>

If you want your drop shadow to have rounded corners, then set the CornerRadius of the SystemDropShadowChrome to whatever (let’s say 10), then Geometry1‘s Left and Top values to 10, then the RadiusX and RadiusY of each RectangleGeometry to 10.