Simulate modal dialog box with popup on the WPF page

On the WPF page, we will certainly encounter the following requirement: a dialog box is displayed for users to make some selection and input, after you complete the operation on the dialog box and close the dialog box, return to the home page for other operations. This is actually a typical modal dialog box application. In the window of WPF, we can create a window and call its showdialog () method to meet the above requirements. However, this method does not work on the WPF page. The reason is that the dialog box popped up using the showdialog () method is independent from the browser. The pop-up dialog box and the browser are in two different windows, so they cannot meet the needs of the modal dialog box.
The following describes how to use popup to simulate a modal dialog box. The pop-up dialog box is overwritten on the WPF page. The user can return to the original page only after the dialog box is closed.
For example, there is a simple WPF page.

The page's XAML file is also simple:

 <Page X: class = "wpfmodaldialog. mainpage "<br/> xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "<br/> xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "<br/> Title =" mainpage "> <br/> <stackpanel X: name = "mainpanel"> <br/> <grid> <br/> <button Height = "28" margin = "0, 30, "Name =" btnshowdlg "verticalignment =" TOP "horizontalalignment =" center "> show Modal Dialog </button> <br/> <label Height =" 28 "margin = ", 360 "width =" "name =" labelstring "verticalalignment =" TOP "horizontalalignment =" center "placement =" center "verticalcontentalignment =" center "borderthickness =" 1 "borderbrush =" darkblue "> click the above button </label> <br/> </GRID> <br/> </stackpanel> <br/> </Page> 

Now we want to implement this function: click the button to bring up a modal dialog box for the user to enter a string, and then display the string just entered by the user in the text box on the page.
The following is a specific example:

To implement the above functions, add a popup In The XAML file:<Popup name = "modaldialog" staysopen = "true" placement = "center"> <br/> <border borderthickness = "2" borderbrush = "steelblue" width = "400" height = "130"> <br/> <grid background = "white"> <br/> <dockpanel Height = "28" verticalignment = "TOP" background = "steelblue"> <br/> <textbox Height = "26" name = "txtboxtitle" width = "120" background = "steelblue" borderthickness = "0" horizontalalignment = "Left" verticalignment = "center" foreground = "white" fontsize = "16" focusable = "false" ishittestvisible = "false" istabstop = "false" verticalcontentalignment = "center"> WPF Modal Dialog </textbox> <br /> <button Height = "26" name = "btnclose" width = "26" horizontalalignment = "right" verticalalignment = "center" fontsize = "16" background = "steelblue" click = "dlg_btnclose_click"> x </button> <br/> </dockpanel> </P> <p> <grid margin = "0, 30, 0, 0 "> <br/> <label margin =" 15, 0, 0, 0 "Height =" 28 "verticalignment =" TOP "horizontalalignment =" Left "verticalcontentalignment =" center "> input a string: </label> <br/> <textbox Height = "28" name = "txtboxinput" width = "360" horizontalalignment = "center" verticalcontentalignment = "center"/> <br/> <button margin = "0, 60, "Height =" 22 "width =" 68 "horizontalalignment =" right "Click =" dlg_btnok_click "> OK </button> <br/> <button margin =, 15, 0 "Height =" 22 "width =" 68 "horizontalalignment =" right "Click =" dlg_btnclose_click "> cancel </button> <br/> </GRID> <br/> </GRID> <br/> </Border> <br/> </popup>

The layout in popup is the same as that used for Windows and pages in general WPF. You can use popup as a container. Add a click event to btnshowdlog. The complete XAML code is as follows:

<Page X: class = "wpfmodaldialog. mainpage "<br/> xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "<br/> xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "<br/> Title =" mainpage "> <br/> <stackpanel X: name = "mainpanel"> <br/> <grid> <br/> <button Height = "28" margin = "0, 30, 0, 0 "name =" btnshowdlg "verticalalignment =" TOP "horizontalalignment =" center "Click =" btnshowdlg_click "> show Modal Dialog </button> <br/> <label Height =" 28 "margin =" 0, 68, 360 "width =" "name =" labelstring "verticalalignment =" TOP "horizontalalignment =" center "placement =" center "verticalcontentalignment =" center "borderthickness =" 1 "borderbrush =" darkblue "> click the above button </label> <br/> </GRID> </P> <p> <popup name =" modaldialog "staysopen =" true "placement = "center"> <br/> <border borderthickness = "2" borderbrush = "steelblue" width = "400" Height = "130"> <br/> <grid background =" white "> <br/> <dockpanel Height =" 28 "verticalalignment =" TOP "background =" steelblue "> <br/> <textbox Height =" 26 "name =" txtboxtitle "width =" 120 "background =" steelblue "borderthickness =" 0 "horizontalalignment =" Left "verticalalignment =" center "foreground =" white "fontsize =" 16 "focusable =" false "ishittestvisible =" false "istabstop =" false "verticalcontentalignment =" center "> WPF Modal Dialog </textbox> <br/> <button Height =" 26 "name =" btnclose" width = "26" horizontalalignment = "right" verticalalignment = "center" fontsize = "16" background = "steelblue" Click = "dlg_btnclose_click"> x </button> <br/> </dockpanel> </P> <p> <grid margin = "0, 30, 0, 0 "> <br/> <label margin =" 15, 0, 0, 0 "Height =" 28 "verticalignment =" TOP "horizontalalignment =" Left "verticalcontentalignment =" center "> input a string: </label> <br/> <textbox Height = "28" name = "txtboxinput" width = "360" horizontalalignment = "center" verticalcontentalignment = "center"/> <br/> <button margin = "0, 60, "Height =" 22 "width =" 68 "horizontalalignment =" right "Click =" dlg_btnok_click "> OK </button> <br/> <button margin =, 15, 0 "Height =" 22 "width =" 68 "horizontalalignment =" right "Click =" dlg_btnclose_click "> cancel </button> <br/> </GRID> <br/> </GRID> <br/> </Border> <br/> </popup> <br/> </stackpanel> <br/> </Page>

Finally, add the code to the CS file:
1. Add a display and close dialog box method
Private void showmodaldialog (bool bshow) <br/>{< br/> This. modaldialog. isopen = bshow; <br/> This. mainpanel. isenabled =! Bshow; <br/>}

The code is very simple, that is, when the dialog box is displayed, the original page becomes unavailable; when the dialog box is closed, the original page becomes available.
2. Add a click event to the show Modal Dialog button on the master page.

Private void btnshowdlg_click (Object sender, routedeventargs e) <br/>{< br/> showmodaldialog (true); <br/>}

Call the showmodaldialog method to display the dialog box.
3. Add a click event for the cancel and close buttons in the dialog box.

Private void dlg_btnclose_click (Object sender, routedeventargs e) <br/>{< br/> showmodaldialog (false); <br/>}

Call the showmodaldialog method to make the dialog box invisible.
4. Add a click event for the OK button in the dialog box

Private void dlg_btnok_click (Object sender, routedeventargs e) <br/>{< br/> showmodaldialog (false); </P> <p> labelstring. content = "the string is:" + txtboxinput. text; <br/>}

First, make the dialog box invisible, and then modify the text content of the label on the home page according to the user input in the dialog box.
Through the above method, the dialog box and the home page can be displayed in the same browser, and the user cannot do any operation before closing the dialog box. That is to say, all the mechanisms of a modal dialog box are implemented.

PS: At first, I got started with WPF. Through searching and learning, I thought this was a good way to implement the modal dialog box with WPF. There may be better methods. I will share them with you later. If you know a better method, I hope you can tell me.