Development of New Fashion Windows 8 (17): Create a dialog box by yourself

Windows Store applicationsProgramIt is a bit like a web page. Generally, we only have one window and do not use multiple subforms like traditional desktop applications.

We have also discussed the messagedialog class used to pop up a dialog box. However, it only displays text information. If some complicated content does not meet our requirements. Windows. UI. the corewindowdialog class in the core namespace, but later I found that this class looks like an empty shell. I don't know how to use this class. So what should I do, is there any other way?

In fact, the so-called pop-up layer, to put it bluntly, is essentially a control. If we have played WPF, we will feel very familiar with it. Who? This handsome guy -- popup (located under Windows. UI. XAML. Controls. primitives?

 

In summary, each pop-up layer, no matter what its content is, has the following common features:

1. There is a translucent layer covering the existing UI to prevent users from operating the UI elements in the pop-up dialog box.

2. Apart from different content, the size and position of the pop-up layer and the background are similar.

 

In this case, you may want to write a control that has a content model. In this case, you only need to set the content of the control in the pop-up box.

 

Next, let's perform a field drill.

1. Use Dynamic vs to create a blank page project.

2. Right-click Solution Explorer and choose add> new item from the menu ".

 

In the following window, select "templated control", enter the control name, and click OK.

 

You will see the following.

 

3. Open generic. XAML and define the template for the control first.

the template is not complex at all. Next, the core part is the control logic Code .

Using system; using system. collections. generic; using system. LINQ; using Windows. UI. XAML; using Windows. UI. XAML. controls; using Windows. UI. XAML. data; using Windows. UI. XAML. events; using Windows. UI. XAML. input; using Windows. UI. XAML. media; using Windows. UI. XAML. controls. primitives; using Windows. UI. XAML. media. animation; namespace app1 {public class popcontrol: contentcontrol {popup m_pop = NULL; Public pop Control () {This. defaultstylekey = typeof (popcontrol); // The width of the pop-up layer is equal to the width of the window. This. width = Window. current. bounds. width; // The height of the pop-up layer is equal to the window height. This. height = Window. current. bounds. height; this. horizontalcontentalignment = windows. UI. XAML. horizontalalignment. stretch; this. m_pop = new popup (); // use the current control as the child this of popup. m_pop.child = This;} // <summary> /// obtain the childtransitions set of popup /// </Summary> Public tran Sitioncollection poptransitions {get {If (m_pop.childtransitions = NULL) {m_pop.childtransitions = new transitioncollection ();} return m_pop.childtransitions ;}} /// <summary> /// display the pop-up layer /// </Summary> Public Virtual void showpop () {If (this. m_pop! = NULL) {This. m_pop.isopen = true ;}/// <summary> // hide the pop-up layer /// </Summary> Public Virtual void hidepop () {If (this. m_pop! = NULL) {This. m_pop.isopen = false ;}}}}

The principle is that the size of the control is equal to the size of the current window, so that the pop-up layer can completely overwrite the UI. The current control is used as the child element of the popup control. The display and hiding of the control is to set the isopen attribute of the popup.

To facilitate extension of derived classes, the showpop and hidepop methods use the virtual keyword.

 

4. Next, add a user control as the content of the pop-up layer.

[XAML]

<Usercontrol X: class = "app1.ucreg" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns: Local = "using: app1" xmlns: D = "http://schemas.microsoft.com/expression/blend/2008" xmlns: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006" MC: ignorable = "D" D: designheight = "700" D: designwidth = "900"> <usercontrol. resources> <style X: key = "T" targettype = "textblock"> <setter property = "fontsize" value = "20"/> <setter property = "verticalignment" value = "center"/> <setter property = "margin" value = "6, 0, 21,0 "/> </style> <style X: Key =" W "targettype =" frameworkelement "> <setter property =" margin "value =" 5, 7, 0, 5 "/> </style> </usercontrol. resources> <grid verticalalignment = "center" background = "green"> <grid margin = "0, 50, 560 "width =" "> <stackpanel> <textblock text =" User Registration "margin =, 0, 34 "style =" {staticresource pageheadertextstyle} "/> <grid. columndefinitions> <columndefinition width = "Auto"/> <columndefinition/> </grid. columndefinitions> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "Auto"/> <rowdefinition height = "Auto"/> </grid. rowdefinitions> <textblock style = "{staticresource t}" grid. row = "0" grid. column = "0" text = "name:"/> <textbox grid. row = "0" grid. column = "1" style = "{staticresource w}"/> <textblock grid. row = "1" grid. column = "0" text = "Gender:" style = "{staticresource t}"/> <ComboBox grid. row = "1" grid. column = "1" style = "{staticresource w}"> <comboboxitem content = "male" isselected = "true"/> <comboboxitem content = "female"/> </ComboBox> <textblock style = "{staticresource t}" text = "Email: "grid. row = "2" grid. column = "0"/> <textbox style = "{staticresource w}" grid. row = "2" grid. column = "1"/> <textblock style = "{staticresource t}" text = "cell phone:" grid. row = "3" grid. column = "0"/> <textbox grid. column = "1" grid. row = "3" style = "{staticresource w}"/> <textblock text = "Address:" style = "{staticresource t}" grid. row = "4" grid. column = "0"/> <textbox style = "{staticresource w}" grid. row = "4" grid. column = "1"/> </GRID> <stackpanel orientation = "horizontal" margin = "0, 15, "horizontalalignment =" center "> <button content =" OK "padding =" 45, 5 "Click =" onclick "/> <button content =" cancel "padding =" 45, 5 "margin = "22, 0, 0, 0 "Click =" onclick "/> </stackpanel> </GRID> </usercontrol>

[C #]

 
Using system; using system. collections. generic; using system. io; using system. LINQ; using Windows. foundation; using Windows. foundation. collections; using Windows. UI. XAML; using Windows. UI. XAML. controls; using Windows. UI. XAML. controls. primitives; using Windows. UI. XAML. data; using Windows. UI. XAML. input; using Windows. UI. XAML. media; using Windows. UI. XAML. navigation; namespace app1 {public sealed partial class ure G: usercontrol {popcontrol _ PC; Public ucreg (popcontrol c) {This. initializecomponent (); _ Pc = C;} private void onclick (Object sender, routedeventargs e) {If (_ PC! = NULL) {_ PC. hidepop ();}}}}
 

To facilitate the control of popcontrol, declare a popcontrol in the user control and pass it in the constructor of the user control class.

 

5. Finally, we will test the pop-up box in mainpage. XAML.

[XAML]

<Page X: class = "app1.mainpage" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns: Local = "using: app1" xmlns: D = "http://schemas.microsoft.com/expression/blend/2008" xmlns: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006" MC: ignorable = "D"> <grid background = "{staticresource applicationpagebackgroundthemebrush}"> <button content = "pop-up dialog box" Click = "onpop"/> </GRID> </Page>
 

[C #]

Using system; using system. collections. generic; using system. io; using system. LINQ; using Windows. foundation; using Windows. foundation. collections; using Windows. UI. XAML; using Windows. UI. XAML. controls; using Windows. UI. XAML. controls. primitives; using Windows. UI. XAML. data; using Windows. UI. XAML. input; using Windows. UI. XAML. media; using Windows. UI. XAML. navigation; namespace app1 {public sealed partial class mainpage: Page {public mainpage () {This. initializecomponent ();} private void onpop (Object sender, routedeventargs e) {popcontrol Pc = new popcontrol (); ucreg UC = new ucreg (PC); PC. content = UC; PC. showpop ();}}}
 

 

Okay, now you can run it, as shown in the figure. It's good.