Popup in Windows Phone 8.1

Before opening, it is customary to recommend the popup control usage in Windows 8.1 for Mr. Wang Lei

Link: Popup in Windows 8.1

Also recommend the old week-easy way of an article on the custom Popup

Link: New fashion Windows8 Development (17): Do it yourself. Popup dialog box

These two-bit blogs are great for learning Windows 8.1 and Windows Phone 8.1, so it's recommended that you take a look at

Let's summarize some of the controls and classes that have pop-up effects:

A.messagedialog class, which is the simplest pop-up box that should

B.datepicker Controls and Timepicker controls

C.flyout control (which has several manifestations), you can refer to another blog about the flyout control

Link: WP8.1 's flyout control

D.popup controls

So how does the popup control behave in Windows Phone 8.1?

First of all, what are the important properties and methods?

A.child Property-----Popup Content

B.horizontaloffset Property-----Offset in the horizontal direction

C.verticaloffset Property-----Offset in the vertical direction

d.islightdismissenabled Property-----Click on the non-popup area to also close the popup, the default is False

E.childtransitions Property-----Display Popup is the transition effect of the content

This property is useful and fun, especially when you're doing a toast-like pop-up in the back.

F.isopen Property-----Whether the popup is open

G.opened Event-----The event triggered when the popup is opened

H.closed Event-----The event that is triggered when the popup is closed

Before pasting the code, list my knowledge and harvest:

A. in. CS Setting the foreground label background or other color-related properties, the solid color must be used to SolidColorBrush brush class

For example: Border Border = new Border (); Border. Background = new SolidColorBrush (colors.green)

B. Adding content to a container control child, you can have two methods (this way border is the parent container, TextBlock is the content)

First, the instance content object, and then add a variety of properties and methods to the object, and then add it to the parent class container control.

The second is the instantiation of the constructor of the content object added directly to the parent class container control, while adding

For example:

One: Border Border = new Border ();

TextBlock TextBlock = new TextBlock ();

Textblock.text = "Content in border";

Border. Child = TextBlock;

Second: Border Border = new Border ();

Border. Child = new TextBlock () {text= "Content in Border"};

These two are actually the same, but obviously the second one is more convenient.

C. If you do not add a popup to a container, the default display position of the popup is in the upper-left corner of the screen

D. Popup popup effect similar to toast notification, mainly using the Childtransition property, as follows:

Properties of Childtransition->transitioncollection->panethemetransition Edge

(Edge = edgetransitionlocation.left)

The code below, in fact, the code and Wang Lei's Windows 8.1 code is similar, I just transplanted to WP8.1 see if it is still applicable

Foreground XAML:

<page x:class= "Testunion.popupdemo" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local= "using:testunion" xmlns:d= "http// schemas.microsoft.com/expression/blend/2008 "xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility/ 2006 "mc:ignorable=" D "background=" {ThemeResource Applicationpagebackgroundthemebrush} "> <Grid> & Lt  stackpanel> <StackPanel> <button x:name= "Btnopen" content= "Eject" click= "Btnopen_click" /> <checkbox x:name= "checkbox" ischecked= "True" content= "islightdismissenabled"/> &lt ;/stackpanel> <popup x:name= "Popup" islightdismissenabled= "{Binding path=ischecked,elementname=checkbox,m Ode=oneway} "> <Popup.Child> <border borderbrush=" Red "borderthickness=" 1 "Ba         Ckground= "Blue" width= "height=" >               <stackpanel horizontalalignment= "center" verticalalignment= "Center" > <t Extblock text= "I am Popup" fontsize= "horizontalalignment=" Center "/> <button x:name=" BTNC                    Lose "content=" Off "click=" btnClose_Click "horizontalalignment=" Center "/> </StackPanel>                    </Border> </Popup.Child> <Popup.ChildTransitions> <TransitionCollection> <popupthemetransition/> </tran sitioncollection> </Popup.ChildTransitions> </Popup> <button x:name = "Openlikepopup" content= "Popup Clone Popup" click= "Openlikepopup_click"/> <button x:name= "Closelikepopup" Conte Nt= "Close Clone popup" click= "Closelikepopup_click"/> </StackPanel> </Grid></Page>

Backstage. CS:

Using system;using system.collections.generic;using system.io;using system.linq;using System.runtime.interopservices.windowsruntime;using windows.foundation;using Windows.Foundation.Collections; Using windows.ui;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.media.animation;using windows.ui.xaml.navigation;//"Blank page" item template in http://go.microsoft.com/fwlink/?    linkid=390556 on the namespace testunion{////<summary>//////for self or to navigate to a blank page inside the Frame. </summary> public sealed partial class Popupdemo:page {//Clone toast Popup Private Popup _pop         Uptoast = new Popup (); Public Popupdemo () {this.        InitializeComponent ();        }///<summary>///This page will be called when it is displayed in Frame.        </summary>//<param name= "E" > Describes how to access event data for this page. This parameter is typically used for configuration pages. </param&Gt protected override void Onnavigatedto (NavigationEventArgs e) {} private void Btnopen_click (object se NDEr, RoutedEventArgs e) {if (!popup. IsOpen) {Popup.            IsOpen = true; }} private void btnClose_Click (object sender, RoutedEventArgs e) {if (popup. IsOpen) {Popup.            IsOpen = false;            }} private void Openlikepopup_click (object sender, RoutedEventArgs e) {//set content in Popup            Border Border = new Border (); Border.            BorderBrush = new SolidColorBrush (colors.green); Border.            BorderThickness = new Thickness (1); Border.            Background = new SolidColorBrush (colors.coral); Border.            Width = 300; Border.            Height = 100; Border. Child = new TextBlock () {text= "I am the popup", Fontsize=25,horizontalalignment=horizontalalignment.center, Verticalalignment=verticalalignment.ceNter};            Sets the associated property of the popup _popuptoast.islightdismissenabled = true;            _popuptoast.child = border; Specify the display position of the popup through HorizontalOffset and Verticaloffset//If the popup is not added to a container, the default display position of the popup is _popuptoast in the upper-left corner of the screen.            Verticaloffset = 100d; _popuptoast.childtransitions = new Transitioncollection {new panethemetransition () {Edge = Edget            Ransitionlocation.left}};        _popuptoast.isopen = true;            private void Closelikepopup_click (object sender, RoutedEventArgs e) {if (_popuptoast.isopen)            {_popuptoast.isopen = false; }        }    }}

Run:

Initial interface:

Click the eject button:

(The popup will pop up and the popup will close regardless of whether you click the Close button or in the non-popup control area)

(If you cancel the checkbox, the popup will not close if you click the non-popup area.)

Clicking the pop-up clone popup button will reveal the popup recalling the toast notification as it slides out from the left, which is fun:

Write more code, try more, try the effect you think, Natsumi Sato におもしろい

Popup in Windows Phone 8.1