Windows 8 Development-popup window for Metro applications

The implementation process of the popup window is relatively simple. You can first customize a user control and add the popup control to the control. Then, you can call the control on an external page.

It should be noted that when a user clicks the non-content layout of the popup window, that is, the non-content layout outside the popup window, the popup window should disappear.

If it is for another purpose, such as the game's level pop-up box, the user must have a choice to continue, you can force to retain this window. You can also implement this window in other ways.

The following is a simple example:

1. XAML

<Usercontrol X: class = "controls. loginpage "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: Local =" using: Controls "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "MC: ignorable = "D" name = "rootcontrol"> <grid> <popup X: Name = "loginpopup" islightdismissenabled = "true"> <border Height = "{binding elementname = rootcontrol, path = height} "width =" {binding elementname = rootcontrol, Path = width} "tapped =" onpopupbordertapped "> <border. background> <solidcolorbrush color = "black" opacity = "0.5"/> </border. background> <stackpanel X: Name = "popupcontainer" orientation = "horizontal" verticalignment = "center" tapped = "onpaneltapped"> <stackpanel. background> <solidcolorbrush color = "green" opacity = "0.8"/> </stackpanel. background> <stackpanel width = "300" verticalignment = "center"> <Image Source = "/assets/test.jpg" stretch = "NONE" horizontalalignment = "center"/> <textblock text = "Winter" fontsize = "36" horizontalalignment = "center"/> </stackpanel> <border borderbrush = "deeppink" borderthickness = "1"/> <stackpanel width = "700 "orientation =" horizontal "> <stackpanel. background> <solidcolorbrush color = "green" opacity = "0.8"/> </stackpanel. background> <Image Source = "/assets/test2.jpg" Height = "100" stretch = "fill" margin = "150 30 30 0" verticalignment = "TOP"/> <grid verticalignment = "center"> <grid. rowdefinitions> <rowdefinition Height = "70"/> <rowdefinition Height = "70"/> <rowdefinition Height = "70"/> <rowdefinition Height = "*"/> </ grid. rowdefinitions> <grid. columndefinitions> <columndefinition width = "Auto"/> <columndefinition width = "*"/> </grid. columndefinitions> <textblock text = "account:" foreground = "white" fontsize = "36" horizontalalignment = "center" verticalignment = "center"/> <textbox grid. column = "1" width = "250" Height = "50" horizontalalignment = "center" verticalignment = "center"/> <textblock grid. row = "1" text = "Password:" foreground = "white" fontsize = "36" horizontalalignment = "center" verticalignment = "center"/> <textbox grid. row = "1" grid. column = "1" width = "250" Height = "50" horizontalalignment = "center" verticalignment = "center"/> <checkbox grid. row = "2" grid. column = "1" content = "show password"/> <stackpanel grid. row = "3" grid. column = "1" orientation = "horizontal"> <button borderthickness = "1" content = "register" Height = "60" fontsize = "36" fontweight = "normal"/> <button borderthickness = "1" content = "login" Height = "60" fontsize = "36" fontweight = "normal" margin = "40 0 0"/> </stackpanel> </GRID> </stackpanel> </Border> </popup> </GRID> </usercontrol>

2. CS

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; // User Control item template in http://go.microsoft.com/fwlink? On linkid = 234236, namespace controls {public sealed partial class loginpage: usercontrol {# region data members // indicates whether the click area is private bool m_ispopupcontainertapped within the popupiner iner; # endregion # region constructor public loginpage () {This. initializecomponent (); m_ispopupcontainertapped = false; Height = Window. current. bounds. height; width = Window. current. bounds. width; popupcontainer. height = height /3; popupcontainer. width = width;} # endregion # Region Public Methods public void show () {If (! Loginpopup. isopen) {loginpopup. isopen = true ;}} public void hide () {If (loginpopup. isopen) {loginpopup. isopen = false ;}# endregion # region event handler private void onpopupbordertapped (Object sender, tappedroutedeventargs e) {If (! Messages) {loginpopup. isopen = false;} else {response = false;} private void onpaneltapped (Object sender, tappedroutedeventargs e) {response = true ;}# endregion }}

3. Use the popup on the page:

            LoginPage lp = new LoginPage();            lp.Show();

4. Demo effect: