WPF Popup: How to put a border around the popup?
Solution 1
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!
Solution 2
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.
Solution 3
<Popup PopupAttributes="SetByYou">
<Border BorderAttribute="SetByYou">
<!-- Content here -->
</Border>
</Popup>
Solution 4
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.
Shafique
Updated on July 09, 2022Comments
-
Shafique almost 2 years
I've got a
Popup
in my XAML to show some information. When the box pops up, it has noBorder
and appears to blend into theBackground
of the page. It just needs aBorder
, 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?