How to draw a shadow on a transparent rectangle?

Question

When I add a dropshadow bitmap effect to a rectangle, dropshadow takes into account the transparency of the rectangle (it makes sense). Is there a way to render the dropshadow on a transparent “as if” rectangle was opaque? those. what might seem like a rectangular "hole", with a drop.

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

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

Answer 1

Throw it at Kaxaml. It creates a 500x500 transparent rectangle using Decorator SystemDropShadowChrome. A shadow shadow clip is set to exclude the rectangle.

 <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 shadow to have rounded corners, then set CornerRadius in SystemDropShadowChrome to any (let 10), then Geometry1 Left and Top to 10, then RadiusX and RadiusY each RectangleGeometry to 10.

Answer 2

I would like to see a better solution, but here is what I usually do ( Beware : the creepy code is ahead).

Wrap the rectangle three to four rectangles and play with the color of the stroke, making it darker and darker when it goes to the original rectangle. Here is the code:

 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Grid> <Rectangle Width="106" Height="106" Stroke="#10000000" StrokeThickness="1"/> <Rectangle Width="104" Height="104" Stroke="#5C000000" StrokeThickness="1"/> <Rectangle Width="102" Height="102" Stroke="#AC000000" StrokeThickness="1"/> <Rectangle Width="100" Height="100" Fill="Transparent" Stroke="#FF000000" StrokeThickness="1"> </Rectangle> </Grid> </Page> 

This gives you:

alt text http://img521.imageshack.us/img521/7664/shadowo.jpg

Another approach would be with borders - this is better because you do not need to specify the dimensions when you place them inside the Grid.

And the best approach (never seen implemented): a custom pixel shader that does what you want.

Answer 3

Well, here is one long way to implement a rectangular “shadow” without using a bitmap effect. In this case, the center of the “shadow rectangle” is painted into it, but it can be set to transparency to give you a “shadow” shadow of the “halo” style (that is, it is equal with the whole circle, not the offset).

 <UserControl x:Class="RectShadow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:System="clr-namespace:System;assembly=mscorlib"> <UserControl.Resources> <System:Double x:Key="CornerSize">5</System:Double> <Color x:Key="ShadowColor">#60000000</Color> <Color x:Key="TransparentColor">#00000000</Color> </UserControl.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"/> <ColumnDefinition/> <ColumnDefinition Width="auto"/> </Grid.ColumnDefinitions> <Rectangle Width="{StaticResource CornerSize}" Height="{StaticResource CornerSize}"> <Rectangle.Fill> <RadialGradientBrush Center="1,1" GradientOrigin="1,1" RadiusX="1" RadiusY="1"> <GradientStop Color="{StaticResource ShadowColor}"/> <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Grid.Row="2" Grid.Column="2" Width="{StaticResource CornerSize}" Height="{StaticResource CornerSize}"> <Rectangle.Fill> <RadialGradientBrush Center="0,0" GradientOrigin="0,0" RadiusX="1" RadiusY="1"> <GradientStop Color="{StaticResource ShadowColor}"/> <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Grid.Row="0" Grid.Column="2" Width="{StaticResource CornerSize}" Height="{StaticResource CornerSize}"> <Rectangle.Fill> <RadialGradientBrush Center="0,1" GradientOrigin="0,1" RadiusX="1" RadiusY="1"> <GradientStop Color="{StaticResource ShadowColor}"/> <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Grid.Row="2" Grid.Column="0" Width="{StaticResource CornerSize}" Height="{StaticResource CornerSize}"> <Rectangle.Fill> <RadialGradientBrush Center="1,0" GradientOrigin="1,0" RadiusX="1" RadiusY="1"> <GradientStop Color="{StaticResource ShadowColor}"/> <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Grid.Column="1"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0,1"> <GradientStop Offset="1" Color="{StaticResource ShadowColor}"/> <GradientStop Color="{StaticResource TransparentColor}"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Grid.Column="1" Grid.Row="2"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0,1"> <GradientStop Color="{StaticResource ShadowColor}"/> <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Grid.Row="1"> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0"> <GradientStop Offset="1" Color="{StaticResource ShadowColor}"/> <GradientStop Color="{StaticResource TransparentColor}"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Grid.Row="1" Grid.Column="2"> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0"> <GradientStop Color="{StaticResource ShadowColor}"/> <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Grid.Row="1" Grid.Column="1"> <Rectangle.Fill> <SolidColorBrush Color="{StaticResource ShadowColor}"/> </Rectangle.Fill> </Rectangle> </Grid> </UserControl> 

Answer 4

circle the rectangle. and add a shadow to the border. you will get the same effect.