Windows 8 practical tips series: 6. How to Use popup in Windows 8

In the previous article, we replaced the messagedialog control of MessageBox in Silverlight. This article describes the control popup of another pop-up window.

1. We understand the islightdismissenabled attribute of the popup control. When this attribute is set to true, clicking any area outside the popup control will disable the popup.

<Button content = "pop-up window 1" name = "btn1" width = "108" margin =, 0, 0 "verticalignment =" TOP "Height =" 52 "Click =" btn1_click "/> <popup X: name = "tip1" islightdismissenabled = "true" horizontaloffset = "161" verticaloffset = "250"> <grid width = "312" Height = "200"> <grid. background> <imagebrush imagesource = ". /bg.png "> </imagebrush> </grid. background> <textblock grid. row = "0" foreground = "white" grid. column = "0" fontsize = "15" Height = "Auto" horizontalalignment = "center" margin = "0 20 0 0" verticalignment = "TOP"> <run> yan, take full advantage of small gardens </run> <linebreak/> <run>, dark floating moon dusk </run> <linebreak/> <run> frome birds want to steal their eyes first, pink butterfly, such as Zhihe, broken soul </run> <linebreak/> <run> lucky news, the sandboard is not required. </run> </textblock> </GRID> </popup>

2. Let's look at the animation settings for displaying and hiding Popup. The specific types are as follows. You can download the instance and modify the instance to view the specific effect.

Adddeletethemetransition

Contentthemetransition

Edgeuithemetransition

Entrancethemetransition

Panethemetransition

Popupthemetransition

Reorderthemetransition

Repositionthemetransition

<Button content = "pop-up window 2" X: Name = "btn1_copy" width = "108" margin = ", 96, 0, 0 "verticalalignment =" TOP "Height =" 52 "Click =" btn1_copy_click "/> <popup X: name = "tip2" islightdismissenabled = "true" horizontaloffset = "510" verticaloffset = "250"> <Popup. childtransitions> <transitioncollection> <strong> </adddeletethemetransition> <strong/> <strong> </strong> <panethemetransition> </panethemetransition> <strong> </popupthemetransition> <reorderthemetransition> </reorderthemetransition> <repositionthemetransition> </transitioncollection> </Popup. childtransitions> <grid width = "312" Height = "200"> <grid. background> <imagebrush imagesource = ". /bg.png "> </imagebrush> </grid. background> <textblock grid. row = "0" foreground = "yellow" grid. column = "0" fontsize = "15" Height = "Auto" horizontalalignment = "center" margin = "0 20 0 0" verticalignment = "TOP"> <run> moxiao farmhouse Liquor hun, fengnian liuke Fugu chicken </run> <linebreak/> <run>, liu Yinghua youyi village </run> <linebreak/> <run> Xiao Gu followed spring club near, yiguan simple ancient style store </run> <linebreak/> <run> from now on, if you are idle for a month, the Rolling Rod has no time and night opens. </run> </textblock> </GRID> </popup> <button content = "pop-up window 3" X: name = "btn1_copy1" width = "108" margin = "850,96," verticalignment = "TOP" Height = "52" Click = "btn1_copy1_click"/> <popup X: name = "tip3" islightdismissenabled = "true" verticaloffset = "250" horizontaloffset = "-312" horizontalalignment = "right"> <Popup. childtransitions> <transitioncollection> <panethemetransition/> </transitioncollection> </Popup. childtransitions> <grid width = "312" Height = "200"> <grid. background> <imagebrush imagesource = ". /bg.png "> </imagebrush> </grid. background> <textblock grid. row = "0" foreground = "Coral" grid. column = "0" fontsize = "15" Height = "Auto" horizontalalignment = "center" margin = "0 20 0 0" verticalignment = "TOP"> <run> Shinan house spring Water in North China, however, you can see </run> <linebreak/> <run>, pengmen started as a gentleman. </run> <linebreak/> <run> pangmen has no unique taste, old grains are poor in the restaurant. </run> <linebreak/> <run> you are willing to drink with neighboring Weng, break through and pull the cup </run> </textblock> </GRID> </popup>

3. The content of popup can also be directly inherited from the user control to bring up the user control directly. In the following instance code, uc1 is a user control. You can download the source code for viewing.

<Button content = "pop-up window 4" X: Name = "btn1_copy2" width = "108" margin = "1150,96, 0, 0 "verticalalignment =" TOP "Height =" 52 "Click =" btn1_copy2_click "/> <popup X: name = "tip4" islightdismissenabled = "true" horizontaloffset = "850" verticaloffset = "250"> <Popup. childtransitions> <transitioncollection> <adddeletethemetransition/> </transitioncollection> </Popup. childtransitions> <local: uc1/> </popup>

Click win8popup.rar to download the source code as follows: