Tuesday, July 10, 2012

How to Popup Anything?

How to Popup Anything?: Showing you how to use the Popup to create your own dropdown-like window.



Introduction 

The popup window, as a lightweight alternative of dialog box, is widely used in many kinds of software applications. The Popup class is a UI container that can hold any UI elements and can be popped up in another UI container. This article shows you how to use the Popup to create your own dropdown-like window.

Background

Functionally, the Popup is a lightweight alternative of modal or modeless dialog box. Probably the most well-known example of the Popup is the ComboBox, aks dropdown. If you use the Expression Blend to examine the ComboBox, you can find it consists of a ToggleButton and a Popup hosting an ItemsPresenter. You can certainly replace the ItemsPresenter to something so that you can customize the ComboBox. And you can create your own dropdown-like Popup to host any UI elements. 

Using the Code

This article shows you: 
  • How to toggle the open/close of the Popup;
  • How to position the container window;
  • How to host a User Control; 
  • How to bind the data. 
The included example demonstrates with different approaches. In general, the left side of the screen shows the lightweight approach; and the right side screen shows the approach suitable for complicated cases. In the following, we are going to use the ToggleButton and Popup classes to build the dropdown; and please pay attention to the integration between them.





No comments:

Post a Comment