Windows Phone 7 custom control-reusable popup container)

Develop Windows Phone 7 ApplicationsProgramA pop-up dialog box (popup DIALOG) is often required to prompt the user for some information or ask the user for the input information. Compared with navigate to a new interface, the semi-masked pop-up window is lighter and provides a more compact interactive context ). This is especially applicable to interfaces with relatively simple content and a relatively small number of controls. However, Windows Phone 7 SDK does not provide many functions for the pop-up dialog box. The most common one is MessageBox. Show.

 

HereArticleI will introduce how to build a reusable popupcontainer ). First, let's take a look at the running effect:

Download exampleCode

 

Notes: 

-The content area in the pop-up box is completely customized by the developer and automatically adapts to the height of the pop-up box.

-The image is displayed from top to bottom, and the image is displayed from bottom to bottom.

-There are three methods to close the pop-up box:

1. Click OK or cancel in the pop-up box.

2. Click the masked mask (mask) area in the pop-up box.

3. Press the back key of Windows Phone 7 ).

-The bottom of the pop-up box has a shadow effect to increase the stereoscopic effect.

 

Usage:

Since it is a reusable function, of course, the simpler it is to be used, the better. Therefore, I encapsulate the pop-up box function as a container, accept any user control as its display content, and display and hide it in the pop-up box. In a button click event on a page (for example, automatically generated mainpage), you only need to write the following code:

Popupcotainer PC = New Popupcotainer ( This );

PC. Show (New Usercontrol1());

In the above Code:

1. popupcontainer is the reusable popupcontainer class discussed in this article.

2. When creating a popupcontainer object, you need to pass the current page object (this) so that it can listen and respond to the backkeypress event and close the pop-up box.

3. Call the show () method of the popupcontainer object, pass a user control, and display it in the pop-up box. Usercontrol1 is a user control (of course, it can also be a phoneapplicationpage ).

 

To provide developers with as much freedom as possible, popupcontainer itself does not provide any built-in buttons such as OK or cancel, but leaves this part of work to the developers themselves. As an example, we need to set one or two buttons in usercontrol1 and write the following code in the click event to close the pop-up box:

Private Void Okbutton_click ( Object Sender, Routedeventargs E)
{
This . Closemeaspopup ();
}

Why? Where does the closemeaspopup () method come from? Does the default usercontrol class contain such a method?

That's right! This method is actually an extension method provided by popupcontainer ). With this extension method, you only need a line of code to close the pop-up box containing it in a user control!

 

How is it easy?

If you are interested in how to implement such a popupcontainer and want to expand and improve it on this basis, please continue to read the specific instructions below.

Principle Analysis:

1. popupcontainer is a custom control. View the content of the popupcotainer. XAML file, which mainly defines three elements:

-Contentarea: used to carry and display the specific content in the pop-up box.

-Mask: The mask layer between the content of the pop-up box and the underlying page.

-Shadow: defines a gradient filled rectangle as the shadow area of the pop-up box.

2. popupcontainer uses the popup class provided by the Windows Phone 7 SDK to implement the pop-up box function. In the instance Code project, view the show () method in the popupcotainer. XAML. CS file. The show () method creates a popup object and sets its isopen attribute to true. This assignment triggers the loaded event of the popupcontainer control (corresponding to popupcotainer_loaded () method ). In popupcotainer_loaded () the pop-up box is displayed in the method.

3. Use a storyboard animation to display the effect from top to bottom ). View popupcotainer. XAML. prepareshowstory () method. At the entrance of this method, embed the content control passed to it into contentarea, and call updatelayout () method, force update of UI, to obtain the actual height of the content area, then decide the drop range of the pop-up box.

4. When the pop-up box is closed, a storyboard animation is also used ). ViewPrepareclosestory() Method. In addition, when a user clicks the mask layer (mask) or the back button during the pop-up window sliding, in order to make the return effect of the pop-up box consistent, in this method, set the starting value of the animation dynamically (ViewAnimation. From).

5. The popupcontainer also registersThe backkeypress event is used to close a user when the user clicks the physical rollback button.

6. A popupmanager class is also defined in the popupcotainer. XAML. CS file, which defines an extension method.Closemeaspopup ()Is used to close the pop-up box containing the content control in the pop-up box. (For the call example, you can viewThe okbutton_click () method or Cancelbutton_click () method)

 

OK. Here is the implementation logic of popupcontainer. For more information, seeSample Code.

I hope this will be helpful to my friends.