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


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?


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.


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


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!


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.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »