Adding a drop shadow to a WPF popup

When I display a popup, quite often I want it to stand out a little from the control it’s displaying over. The most obvious and simplest way to do this is by displaying it with a drop shadow.

Here’s the code to do this

1
2
3
4
5
6
7
8
9
10
<Popup AllowsTransparency="True">
   <Grid>
      <Border Margin="0,0,8,8" Background="White" BorderThickness="1">
         <Border.Effect>
            <DropShadowEffect BlurRadius="5" Opacity="0.4"/>
         </Border.Effect>
         <SomeControl/>
      </Border>
   </Grid>
</Popup>

The key things are that you wrap the control(s) you wish to display within the popup inside a Border control and ensure it has a margin. Then set the dropshadow on the border. The next key thing is the popup should AllowTransparency otherwise I’ve found the border area is just black (i.e. no shadow).