10 03 2013
WPF: How to draw a shadow effect the easy way
As always you will find alot of crapp about shadows in WPF on the internet. And again, here is a HowTo to show you an easy way to do it.
To demonstrate the shadow we’ll use the Pie-Code from my last Post.
Now we’ll just set the shadow effect for one of the pies.
|
1 2 3 4 5 6 |
<draw:Pie x:Name="piece1" CentreX="100" CentreY="100" Radius="90" Angle="46"> <draw:Pie.Effect> <DropShadowEffect/> </draw:Pie.Effect> </draw:Pie> <draw:Pie x:Name="piece2" CentreX="100" CentreY="100" Radius="90" Angle="25" Rotation="90" /> |
As you can see, the Shadow is drawn like this: 
and only for the first pie.
To get the same result with code behind we have to add the using System.Windows.Media.Effects and write the following code:
|
1 |
piece2.Effect = new DropShadowEffect(); |
Now, the second pie-piece have a shadow too. But this one look a little bit diffrent. Thats because of the different angle the shadow is drawn with. The effect calculates that for us.
When you just foul around a little bit, you will notice that the shadow may be drawn over another pie. Thats because we give every pie a shadow.
And here is the beautiful thing about the DropShadowEffect, you can use it on a control which have both pies in it and the shadow is drawn for both pies but handled as one.
Here ist the resulting image: 
Just add a canvas around our 2 pies and add the DropShadowEffect there. In code behind just set the Effect for the canvas and not the pie.
|
1 2 3 4 5 6 7 |
<Canvas> <draw:Pie x:Name="piece1" CentreX="100" CentreY="100" Radius="90" Angle="80"/> <draw:Pie x:Name="piece2" CentreX="100" CentreY="100" Radius="90" Angle="25" Rotation="90" /> <Canvas.Effect> <DropShadowEffect/> </Canvas.Effect> </Canvas> |
And thats all you need to know to use the DropShadowEffect to draw a shadow.
WPF: How to extend the Shape-Class to draw a pie chart or a part of a circle Implementing IDisposable