WPF Popup: How to put a border around the popup?

Question

I've got a Popup in my XAML to show some information. When the box pops up, it has no Border and appears to blend into the Background of the page. It just needs a Border, and ideally a drop-shadow behind it to show some sort of layering and focus.

Any ideas how to style a Popup to have a border and possibly the shadow-effect?

Answer 1

Much easier in my opinion is putting a margin around the Popup Border large enough for the DropShadowEffect, i.e.

<Border ... Margin="0 0 8 8">
    <Border.Effect>
        <DropShadowEffect ... />
    </Border.Effect>
    <!-- Popup Content Here -->
</Border>

The Popup should allow transparency, that is AllowsTransparency = True.

Answer 2

<Popup PopupAttributes="SetByYou">
 <Border BorderAttribute="SetByYou">
  <!-- Content here -->
 </Border>
</Popup>

Answer 3

Apparently popups don't currently support drop shadows, see link.

However, I have come up with a workaround this which works rather well IMO. Basically the idea is to have a Canvas nested within another transparent Canvas and just apply the drop shadow to the nested Canvas. Simple. Heres an example:

        <Grid>
        <TextBox x:Name="MyTxtBx" Width="50" 
                 Height="20" Text="Hello"/>
        <Popup IsOpen="True" Width="200" Height="100" 
               PlacementTarget="{Binding ElementName=MyTxtBx}" 
               AllowsTransparency="True" >
            <Canvas Background="Transparent">
                <Canvas Background="Green" Width="150" Height="50">
                    <Canvas.BitmapEffect>
                        <DropShadowBitmapEffect Softness=".5" 
                                                ShadowDepth="5" 
                                                Color="Black"/>
                    </Canvas.BitmapEffect>
                    <Label Content="THIS IS A POPUP TEST"/>
                </Canvas>
            </Canvas>
        </Popup>
    </Grid>

The points to note are that the nested canvas needs to be smaller than the size of it's container. Also AllowsTransparency must be set too.

Answer 4

Thanks, I ended up giving it a 3D-like (hardly) appearance by setting the border like:

 <Border BorderBrush="White" BorderThickness="3,3,0,0">
            <Border BorderBrush="Black" BorderThickness="1,1,3,3">
</Border>
</Border>

Looks pretty decent!