We are all familar with Popups. Those small windows that open and display Viagra ads. But sometimes Popups are useful to display additional information. In this article we are going to learn how to create Popups in Windows Presentation Foundation.

Introduction:

We are all familar with Popups. Those small windows that open and display Viagra ads. But sometimes Popups are useful to display additional information. In this article we are going to learn how to create Popups in Windows Presentation Foundation.

Creating a Simple Popup:

The popups in WPF are created by using the Popup control. Let's see how to create a very simple popup.





As you can see the Popup control contains the Grid control which becomes the actual popup visible to the users. You can embed any control inside the Popup control to behave like a popup. This feature enables to create all sort of strange looking popups. The Popup control is initialized with IsOpen =  "False" which means that popup will not appear when the form is loaded. To open the popup we must set the IsOpen property to true as demonstrated below in the button click code.



The code above opens the popup and also make the popup visible for a small duration. The StaysOpen property is used to hide the power when the popup looses focus.

Creating Ellipse Popup:

As mentioned before a Popup control can contain any other control which gives it a flexibility to change its appearance. Let's see how to create a Popup which looks like an Ellipse control.





As, you can see in the above image the Popup is displayed correctly but the Ellipse is sourrounded by black edges. You can easily remove those black edges buy setting the AllowsTransparency property to true on the Popup control.



The other problem will the Ellipse control is that it cannot display the text. So, to display the text in the center of the Ellipse we need to transform a control with a Content property to an Ellipse control. We have previously discussed this scenario in the article Introduction to WPF Control Templates.

In the App.XAML file we will define the template to render Label as an Ellipse control.



Now, we can apply the above template to the Label control as shown below:




When you run the above application you will see the following result.




Creating BezierSegment Popup:

Let's create a Popup that you most commonly see in the newspaper cartoons.

Take a look at the following code in the App.XAML file.



The above XAML code will create a curve which we will show you in a moment. Here is the Popup control code in XAML:



When you run the above code you will get the following result:



Conclusion:

WPF Popups is an impressive control that allows you to create any form of popup. The Popup also provides animation features which adds to the power of the Popup control.