New Fashion Windows 8 Development (15): extended contact Selector

In this blog, http://blog.csdn.net/tcjiaan.

 

Last time we discussed how to select a contact record from the contact selector. However, we may find a problem. We all know that all the contacts we selected are obtained from the ECS through the Microsoft account. What if I have my own contact data? For example, what if Baofeng is in a local data file or a contact from my web service? Can the contact selector be used in this case?

 

The answer is yes, of course, in the open API of Windows Store, we are allowed to customize extensions for some special applications or UIS, as we mentioned earlier, to open the file UI, saving the file UI and selecting the contact information UI can be expanded.

It is not difficult to use these extensions. If you are new to them, you may feel a little complicated. So, let's say: Practice makes perfect, and practice can find the truth.

 

Let's take a look at how this selector is extended. If you have installed big smart software or our application today, you will see the following interface when selecting a contact.

 

That is to say, these extended applications are all integrated into the contact selector.

 

Not much, action! Let's discuss it one by one.

 

1. Start vs for Win8. Any version is supported. Create a project, select your preferred language (C #), and select a blank page application in the template.

2. In this case, let's move our core knowledge to the front. First, do a good job of the protection and exhibition selector.

Open the solution Resource Manager window, right-click the project, select "add"-"new item" in the pop-up menu, then a new item window appears, and select a blank page, we will name it mycontactspage. XAML.

This page is not complex. Just put a listview control. This page will be displayed when we start the contact selector.

<Page X: class = "MyApp. mycontactspage "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: Local =" using: MyApp "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "MC: ignorable = "D"> <page. resources> <collectionviewsource X: Key = "CVS" X: Name = "CVS"/> </page. resources> <grid background = "{staticresource succeeded}"> <listview name = "lvcontacts" itemssource = "{binding source = {staticresource CVS}" selectionchanged = "lvcontacts_selectionchanged_1" selectionmode = ""Multiple" scrollviewer. horizontalscrollbarvisibility = "Auto" scrollviewer. horizontalscrollmode = "Auto"> <listview. itemspanel> <itemspaneltemplate> <wrapgrid orientation = "vertical" maximumrowsorcolumns = "3" itemwidth = "380"/> </itemspaneltemplate> </listview. itemspanel> <listview. itemtemplate> <datatemplate> <stackpanel orientation = "vertical" margin = "8"> <textblock fontweight = "bold" fontsize = "20" text = "{binding name}"/> <stackpanel orientation = "horizontal"> <textblock fontsize = "18" text = "mobile phone number: "/> <textblock fontsize =" 18 "text =" {binding cellphoneno} "/> </stackpanel> <stackpanel orientation =" horizontal "> <textblock fontsize =" 18 "Text = "Email: "/> <textblock fontsize =" 18 "text =" {binding emailaddress} "/> </stackpanel> </datatemplate> </listview. itemtemplate> </listview> </GRID> </Page>

Note that in the page resource section, I declare a collectionviewsource, And the listview data source is obtained from it. Therefore, when the listview declares, we use binding to obtain data.

<ListView Name="lvContacts" ItemsSource="{Binding Source={StaticResource cvs}}" ..........

In other words, we only need to assign a value to collectionviewsource in the background code.

 

3. Right-click the XAML view and select view code from the pop-up menu to switch to the Code view.

First, we need to define a custom contact with humans. This is the sample data we use to test.

Public class custcontact {// <summary> // contact name // </Summary> Public string name {Get; set ;} /// <summary> // mobile phone number of the contact /// </Summary> Public String cellphoneno {Get; set ;} /// <summary> // contact email address /// </Summary> Public String emailaddress {Get; set ;} /// <summary> /// obtain the test data source /// </Summary> /// <returns> </returns> Public static observablecollection <custcontact> getcontactsamples () {observablecollection <custcontact> mclist = new observablecollection <custcontact> (); mclist. add (New custcontact {name = "", cellphoneno = "1388888552", emailaddress = "ssdi@qq.com"}); mclist. add (New custcontact {name = "", cellphoneno = "13712546810", emailaddress = "zhe254@126.com"}); mclist. add (New custcontact {name = "ghost pillar", cellphoneno = "18925445525", emailaddress = "fuckdog@foxmail.com"}); mclist. add (New custcontact {name = "stingy", cellphoneno = "13628845781", emailaddress = "ass054@21cn.com"}); mclist. add (New custcontact {name = "", cellphoneno = "13425546387", emailaddress = "laobin@foxmail.com"}); mclist. add (New custcontact {name = "Xiao Zhao", cellphoneno = "159999558462", emailaddress = "hxdok@163.com"}); mclist. add (New custcontact {name = "old blow", cellphoneno = "1382601021", emailaddress = "gaosu22@foxmail.com"}); mclist. add (New custcontact {name = "Shi zhenxiang", cellphoneno = "10101010110", emailaddress = "25466887@qq.com"}); mclist. add (New custcontact {name = "du zteng", cellphoneno = "10084", emailaddress = "bageyalu@21cn.com"}); mclist. add (New custcontact {name = "B ", cellphoneno = "15525863314", emailaddress = "ruxinde@126.com"}); Return mclist ;}}

4. process the selectionchanged event of listview in response to the user's selection operation.

Private void lvcontacts_selectionchanged_1 (Object sender, selectionchangedeventargs e) {If (pkui = NULL) {return;} contactfieldfactory ctfactory = new contactfieldfactory (); // Add the selected item to the selected contact list foreach (VAR itemadded in E. addeditems) {custcontact c = (custcontact) itemadded; If (! Pkui. containscontact (C. name) {contact = new contact (); contact. name = C. name; // create the mobile phone number and email address field contactfield phonenofield = ctfactory. createfield (C. cellphoneno, contactfieldtype. phonenumber); contactfield emailfield = ctfactory. createfield (C. emailaddress, contactfieldtype. email); // do not forget to add the field to the contact. fields. add (phonenofield); contact. fields. add (emailfield); pkui. addcontact (C. name, contact) ;}}// Delete the unselected contact from the selected list foreach (VAR removeditem in E. removeditems) {custcontact Ct = (custcontact) removeditem; If (pkui. containscontact (Ct. name) {pkui. removecontact (Ct. name );}}}

The selected items are added to the contact list of the selector, and those that are not selected are removed from the contact list. When you add a contact list (called by the addcontact method), you can use the contact name as its id value.

 

5. In order not to affect the generated app code, but also to facilitate our maintenance, we should set up another app class and rewrite the onactivated method.

Sealed partial class app: Application {protected override void onactivated (windows. applicationModel. activation. iactivatedeventargs ARGs) {// determines whether the contact selector activates the application if (ARGs. kind = windows. applicationModel. activation. activationkind. contactpicker) {frame root = Window. current. content as frame; // determine whether the current window contains content if (root = NULL) {root = new frame (); // navigate to the page root for selecting contacts. navigate (typeof (mycontactspage), (contactpickeractivatedeventargs) ARGs); // sets this frame as the content window of the current window. current. content = root;} window. current. activate (); // activate the current window }}}

Because we need to operate the contactpickerui object in the page Code, The args parameter is passed to the page navigation.

The complete code is as follows.

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; using system. collections. objectmodel; using Windo WS. ApplicationModel. activation; using Windows. ApplicationModel. contacts; using Windows. ApplicationModel. Contacts. provider; // "blank page" item template in http://go.microsoft.com/fwlink? On linkid = 234238, the introduction of namespace MyApp {// <summary> /// can be used to itself or navigate to a blank page inside the frame. /// </Summary> Public sealed partial class mycontactspage: Page {contactpickerui pkui = NULL; Public mycontactspage () {This. initializecomponent ();} protected override void onnavigatedto (navigationeventargs e) {This. CVS. source = custcontact. getcontactsamples (); If (E. parameter! = NULL) {If (E. parameter is contactpickeractivatedeventargs) {This. pkui = (contactpickeractivatedeventargs) E. parameter ). contactpickerui; }}} private void lvcontacts_selectionchanged_1 (Object sender, selectionchangedeventargs e) {If (pkui = NULL) {return;} contactfieldfactory ctfactory = new contactfieldfactory (); // Add the selected item to the selected contact list foreach (VAR itemadded in E. addeditems) {custcontact c = (Custcontact) itemadded; If (! Pkui. containscontact (C. name) {contact = new contact (); contact. name = C. name; // create the mobile phone number and email address field contactfield phonenofield = ctfactory. createfield (C. cellphoneno, contactfieldtype. phonenumber); contactfield emailfield = ctfactory. createfield (C. emailaddress, contactfieldtype. email); // do not forget to add the field to the contact. fields. add (phonenofield); contact. fields. add (emailfield); pkui. addcontact (C. name, contact) ;}}// Delete the unselected contact from the selected list foreach (VAR removeditem in E. removeditems) {custcontact Ct = (custcontact) removeditem; If (pkui. containscontact (Ct. name) {pkui. removecontact (Ct. name) ;}}} public class custcontact {// <summary> // contact name /// </Summary> Public string name {Get; set ;} /// <summary> // mobile phone number of the contact /// </Summary> Public String cellphoneno {Get; set ;} /// <summary> // contact email address /// </Summary> Public String emailaddress {Get; set ;} /// <summary> /// obtain the test data source /// </Summary> /// <returns> </returns> Public static observablecollection <custcontact> getcontactsamples () {observablecollection <custcontact> mclist = new observablecollection <custcontact> (); mclist. add (New custcontact {name = "", cellphoneno = "1388888552", emailaddress = "ssdi@qq.com"}); mclist. add (New custcontact {name = "", cellphoneno = "13712546810", emailaddress = "zhe254@126.com"}); mclist. add (New custcontact {name = "ghost pillar", cellphoneno = "18925445525", emailaddress = "fuckdog@foxmail.com"}); mclist. add (New custcontact {name = "stingy", cellphoneno = "13628845781", emailaddress = "ass054@21cn.com"}); mclist. add (New custcontact {name = "", cellphoneno = "13425546387", emailaddress = "laobin@foxmail.com"}); mclist. add (New custcontact {name = "Xiao Zhao", cellphoneno = "159999558462", emailaddress = "hxdok@163.com"}); mclist. add (New custcontact {name = "old blow", cellphoneno = "1382601021", emailaddress = "gaosu22@foxmail.com"}); mclist. add (New custcontact {name = "Shi zhenxiang", cellphoneno = "10101010110", emailaddress = "25466887@qq.com"}); mclist. add (New custcontact {name = "du zteng", cellphoneno = "10084", emailaddress = "bageyalu@21cn.com"}); mclist. add (New custcontact {name = "B ", cellphoneno = "15525863314", emailaddress = "ruxinde@126.com"}); Return mclist ;}} sealed partial class app: application {protected override void onactivated (windows. applicationModel. activation. iactivatedeventargs ARGs) {// determines whether the contact selector activates the application if (ARGs. kind = windows. applicationModel. activation. activationkind. contactpicker) {frame root = Window. current. content as frame; // determine whether the current window contains content if (root = NULL) {root = new frame (); // navigate to the page root for selecting contacts. navigate (typeof (mycontactspage), (contactpickeractivatedeventargs) ARGs); // sets this frame as the content window of the current window. current. content = root;} window. current. activate (); // activate the current window }}}}

 

6. Let's look back at the home page.

Open mainpage. XAML, refer to the following XAML.

<Page X: class = "MyApp. mainpage "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: Local =" using: MyApp "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "MC: ignorable = "D"> <grid background = "{staticresource applicationpagebackgroundthemebrush}"> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "*"/> </grid. rowdefinitions> <stackpanel grid. row = "0" orientation = "horizontal"> <button margin = "15,12, 7, 6 "content =" select contact "Click =" onselect "/> <textblock name =" tbmsg "margin =" 8, 23, 0, 6 "fontsize =" 18 "/> </stackpanel> <listview name =" LV "grid. row = "1" margin = "7"> <listview. itemspanel> <itemspaneltemplate> <wrapgrid orientation = "horizontal" maximumrowsorcolumns = "3" itemwidth = "350"/> </itemspaneltemplate> </listview. itemspanel> </listview> </GRID> </Page>

7. The background code is as follows.

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; using Windows. applicationModel. contacts; // "blank page" Item template in http://go.microsoft.com/fwlink? On linkid = 234238, the introduction of namespace MyApp {// <summary> /// can be used to itself or navigate to a blank page inside the frame. /// </Summary> Public sealed partial class mainpage: Page {public mainpage () {This. initializecomponent ();} private async void onselect (Object sender, routedeventargs e) {contactpicker CP = new contactpicker (); ireadonlylist <contactinformation> contactlist = await CP. pickmultiplecontactsasync (); If (contactlist! = NULL) {foreach (VAR item in contactlist) {string MSG = ""; MSG + = item. name + "\ n"; // The phone number foreach (var fds in item. phonenumbers) {MSG + = string. format ("{0 }:{ 1}", FDS. name, FDS. value) + "\ n";} // email address foreach (VAR emfds in item. emails) {MSG + = string. format ("{0 }:{ 1}", emfds. name, emfds. value) + "\ n";} This. LV. items. add (MSG); this. tbmsg. TEXT = string. format ("you have selected {0} Contact records. ", Contactlist. Count );}}}}}

This is the same as in the previous article.

 

8. Open the configuration file, switch to the "Declaration" tab, select "Contact selector" from the drop-down list, and click "add" on the right.

 

Now you can run the application. Click to select a contact.

 

Click OK. Return to the homepage and you will see the contacts we just selected.

 

 

This article may not be easy to understand, so I will upload the source code to the resource later.

 

Finally, I wish you a happy Mid-Autumn Festival.