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

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

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.


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.

Tags:

Wpf

Popup

Styles