Den is a DZone Zone Leader and has posted 460 posts at DZone. You can read more from them at their website. View Full User Profile

Understanding WPF popups

04.19.2010
| 50869 views |
  • submit to reddit

A popup is generally considered a container that appears without the user actually calling it. Partially, this is true. However, popups can in fact be triggered by the end user. WPF introduced the popup concept in desktop applications with the Popup UI element. It is somewhat similar to a dialog in WinForms, since it acts separately from the main form, however it has some distinct differences.

In WPF, popups are represented by the Popup class. It can be a member of  an existing container and it can also contain any UI element inside. Therfore, you can insert a grid, button and whatnot inside the Popup.

I am going to create a sample popup that will display a message to the user. Using the default settings, I am just going to create a Popup without additional properties set. The only property I am going to set is IsOpen, just to make the popup visible:

<Popup Name="myPopup" IsOpen="True">
<Label Name="myLabel" Content="This is a popup!" Background="AliceBlue" Foreground="Blue"/>
</Popup>


The label is an arbitrary control here. I placed the popup inside the grid in the root Window element. Once ran, the popup will be displayed in the lower left corner of the window. Now, let’s experiment with its with placement. To do this, I am going to create a button first, and then assign the popup to it.

<Button Name="myButton" Margin="77,105,81,107" Content="MyButton" />

Now, the popup control should also be modified a bit. I added the PlacementTarget property and set the binding to the button I’ve just created.

<Popup Name="myPopup" IsOpen="True" PlacementTarget="{Binding ElementName=myButton}">
<Label Name="myLabel" Content="This is a popup!" Background="AliceBlue" Foreground="Blue"/>
</Popup>

Now, when I run the application, the popup is displayed in the lower left corner of the button. If you move the window, the popup won’t move. We actually need to bind it to an event so that it is shown and hidden depending on something happening in the application. I am going to show it once the mouse is over the button and hide it when the mouse left the area.

To do this, first of all I have to modify the popup itself:

<Popup Name="myPopup" IsOpen="False" PlacementTarget="{Binding ElementName=myButton}" StaysOpen="False">
<Label Name="myLabel" Content="This is a popup!" Background="AliceBlue" Foreground="Blue"/>
</Popup>


Now, it is not shown by default and it won’t stay constantly open. To show it, I will change the IsOpen property for the MouseEnter property (for the button). I am going to add a new MouseEnter event handler:

<Button Name="myButton" Margin="77,105,81,107" Content="MyButton" MouseEnter="myButton_MouseEnter"/>

Now, in the MouseEnter event handler, I am going to put myPopup.IsOpen = true; . The popup will remain open as long as the user won’t trigger another action (or click somewhere on the window). Eventually, a MouseLeave event handler can be added and the only line of code there would be myPopup.IsOpen = false; for the popup to close once the mouse cursor leaves the button surface.

General popup positioning is managed by the Placement property. That can be set to show the control either to a specific or relative/absolute location. For example, the popup can be set to be displayed in the place where the mouse cursor entered the control area.

That would be Placement=”MousePoint” to show the popup at the top of the pointer or Placement=”Mouse” to show it below the mouse cursor. If you want to keep the popup open and change its location according to the mouse location, I would recommend reading this post.

Consider a popup like an advanced version of the ToolTip control (in WinForms). It can be as interactive, as a window, being able to contain any WPF control or primitive.