[Win 8/WP 8] the function of changing the profile picture on the pop-up page is simple.

[Win 8/WP 8] the function of changing the profile picture on the pop-up page is simple.

In the Win 8 Application, flexible operations on the pop-up page (Popup) are essential. Below we will simply implement one.

1. Let the Popup pop up to the specified position

Let's take a look at [1]:

The following is the front-end code snippet [1]:

1 <Grid Background = "#0054a2"> 2 <Border Background = "AliceBlue" Margin = "40, 40, 1126,528 "Width =" 150 "Height =" 150 "> 3 <Image x: name = "Img" Width = "150" Height = "150"/> 4 </Border> 5 <Button Margin = "90,241, 0,477 "Content =" Change Avatar "Width =" 100 "Height =" 50 "Click =" Button_Click "> </Button> 6 </Grid>Front-end XAML

The following is the background code, code segment [2]:

1 private Popup headPopup; 2 3 private void Button_Click (object sender, RoutedEventArgs e) 4 {5 if (headPopup! = Null) 6 {7 headPopup. IsOpen =! HeadPopup. isOpen; 8} 9 else10 {11 headPopup = new Popup (); 12 // add content to headPopup 13 HeadControl headControl = new HeadControl (); 14 headPopup. child = headControl; 15 // determine the position of the headPopup pop-up 16 Rect imgRect = new Rect (new Point (0, 0), new Size (0, 0 )); 17 GeneralTransform transform = this. img. transformToVisual (this); 18 imgRect = transform. transformBounds (imgRect); 19 headPopup. horizontalOffset = imgRect. left + 150; 20 headPopup. verticalOffset = imgRect. bottom + 130; 21 // Popup22 headPopup is displayed. isOpen = true; 23} 24}Show Popup

It is interesting to determine the pop-up position of Popup. We want to pop it up in the lower right corner of the header frame. The specific implementation method of the Code is: obtain a common transformation object through the TransformToVisual method of the control Img, which can convert the control (that is, Img) into the visual image corresponding to the control, for example, here Img can be transformed into a rectangle, through which we can obtain the horizontal or vertical displacement of the Img border controls in the page, this helps us determine the position of Popup.

 

2. Display and select the Avatar in the pop-up box

In the previous article, we have set the child control HeadControl for Popup. We will fill in the content to be displayed in HeadControl. There are two options:

1. Add the WebView control to HeadControl and implement it through embedded html pages.

2. Add a general Gridiew control to HeadControl and bind images to display them in a traditional way.

Here we choose the first method. Obviously, html pages can control page styles more flexibly and help us make more cool applications!

The following is the front-end code of the HeadControl, code segment [3]:

1 <Grid HorizontalAlignment = "Left" VerticalAlignment = "Top" Background = "# FFFFFFFF"> 2 <WebView x: name = "wvHead" HorizontalAlignment = "Left" VerticalAlignment = "Top" Margin = "0, 0, -250 "3 Height =" 420 "Width =" 409 "4 LoadCompleted =" wvHead_LoadCompleted "ScriptNotify =" wvHead_ScriptNotify "/> 5 </Grid>Front-end XMAL

In the code, we added the LoadCompleted event and ScriptNotify event to the WebView control. There is also an unlisted HeadControl Loaded event. Where:

Loaded event (HeadControl): It occurs when the HeadControl control is Loaded. For example, the code segment [4]:

1 private void UserControl_Loaded (object sender, RoutedEventArgs e) 2 {3 // The head.html page specified by webview.pdf 4 this. wvHead. navigate (new Uri ("ms-appx-web: // Assets/head.html"); 5}Loaded event

LoadCompleted event (WebView): occurs when the WebView is loaded. The JS Code in head.html is used to write content to the head.html page. For example, the code segment [5]:

1 private void wvHead_LoadCompleted (object sender, NavigationEventArgs e) 2 {3 // construct html to display the Avatar. 4 StringBuilder sbSystem = new StringBuilder (); 5 string systemImg = "<li> </li> "; 6 string systemImg6 =" <li style = \ "margin-right: 0; \ "> </li> "; 7 // load xml 8 var xml = XDocument. load ("Assets/Portraits. xml "); 9 int syscount = 0; 10 foreach (var ele in xml. root. elements ("Portraits "). elements ("file") 11 {12 syscount ++; 13 // put six in each row. The first one is not the same as several other styles and is processed separately. 14 if (syscount % 6 = 0) 15 {16 sbSystem. append (string. format (systemImg6, "/Assets/Portraits/" + ele. attribute ("name "). value); 17} 18 else19 {20 sbSystem. append (string. format (systemImg, "/Assets/Portraits/" + ele. attribute ("name "). value); 21} 22} 23 // call the js method in head.html to write the constructed string. 24 wvHead. InvokeScript ("WriteSystemHtml", new string [] {sbSystem. ToString ()}); 25}LoadCompleted event

ScriptNotify event (WebView): occurs when the content contained in WebView uses JavaScript to pass strings to the application. In this case, when the onclick of the image in head.html is triggered, it notifies the background code of which image is clicked, so that the background code can respond to the corresponding event. For example, the code segment [6]:

1 public event EventHandler SelectEvent; 2 3 private void wvhead_scriptpolicy (object sender, policyeventargs e) 4 {5 if (! String. IsNullOrEmpty (e. Value) 6 {7 if (SelectEvent! = Null) 8 SelectEvent (e. Value, null); 9} 10}Scriptpolicy event

Some people may wonder when the SelectEvent above binds the method? Of course, when initializing the HeadControl, that is, adding it to the code segment [2:

1 headControl. selectEvent + = inputInfo; 2 3 private async void inputInfo (object sender, EventArgs e) 4 {5 // set the source of the Image control Image 6 this. img. source = new BitmapImage (new Uri ("ms-appx: //" + sender, UriKind. relativeOrAbsolute); 7}

Note: in fact, the key points of the above events are the interaction between c # in the background and JavaScript in html. If you have mastered this, nothing else is a problem!

Next, let's take a look at the specific implementation in head.html. Code segment [7]:

1 <script type = "text/javascript"> 2 var $ = function (id) {return (typeof id = 'string ')? Document. getElementById (id): id;} 3 // set the display content of the div whose id is systempic. 4 var WriteSystemHtml = function (str) {5 $ ("systempic "). focus (); 6 $ ("systempic "). innerHTML = str; 7} 8 var FaceImageClick = function (facePath) {9 // notify the application and pass the string to the application. 10 window. external. Y (facePath); 11} 12 </script>

 

Let's take a look at the last one! Figure [2]:

Yes, I am a German fan! Haha. Html pages can be displayed more vividly, depending on your needs.

 

Ps: blog posts briefly describe the implementation principles and the details that need attention. If you need source code, please leave your email address in the comments ,:)