Share via


Quickstart: Showing initial contact data and then later applying more contact data (XAML)

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

Here, we'll show you how to create a contact, apply initial data to it, display that initial data in a contact card, and then update that contact card in a delayed fashion with more contact data.

Note  The contact card will time out in four seconds. So, if an update doesn't occur in four seconds, the contact card UI becomes final, and no more updates can be applied. In our example, we force a two second delay to simulate downloading more data from the network for the contact.

 

Prerequisites

  • We recommend that you be familiar with Microsoft Visual Studio and its associated templates.
  • We recommend that you be familiar with C# development.

Create a contact and apply initial data to it

Create an instance of a Windows.ApplicationModel.Contacts.Contact and assign it to a variable. Then, apply to the Contact some initial data.

            // Create contact object with small set of initial data to display.
            Contact contact = new Contact();
            contact.FirstName = "Gail";
            contact.LastName = "Wilson";

            ContactEmail email = new ContactEmail();
            email.Address = "gail@contoso.com";
            contact.Emails.Add(email);

Show initial contact data in a contact card

Call the ContactManager.ShowDelayLoadedContactCard method to show the initial contact data in a contact card. ShowDelayLoadedContactCard returns a ContactCardDelayedDataLoader object that is used to update the contact card in a delayed fashion.

            // Get the selection rect of the button pressed to show contact card.
            Rect rect = Helper.GetElementRect(sender as FrameworkElement);
            using (ContactCardDelayedDataLoader dataLoader = ContactManager.ShowDelayLoadedContactCard(contact, rect, Windows.UI.Popups.Placement.Default))
            {
                string message = "ContactManager.ShowDelayLoadedContactCard() was called.\r\n";
                this.rootPage.NotifyUser(message, NotifyType.StatusMessage);

Update the contact card in a delayed fashion with more contact data

Populate the contact with more data and then call ContactCardDelayedDataLoader.SetData to update the contact card with this data.

                // Simulate downloading more data from the network for the contact.
                message += "Downloading data ...\r\n";
                this.rootPage.NotifyUser(message, NotifyType.StatusMessage);

                Contact fullContact = await DownloadContactDataAsync(contact);
                if (fullContact != null)
                {
                    // We get more data - update the contact card with the full set of contact data.
                    dataLoader.SetData(fullContact);

                    message += "ContactCardDelayedDataLoader.SetData() was called.\r\n";
                    this.rootPage.NotifyUser(message, NotifyType.StatusMessage);
                }
            }


        private async Task<Contact> DownloadContactDataAsync(Contact contact)
        {
            // Simulate the download latency by delaying the execution by 2 seconds.
            await Task.Delay(2000);
            return await Task.Run<Contact>(() =>
                {
                    // Add more data to the contact object.
                    ContactEmail workEmail = new ContactEmail();
                    workEmail.Address = "gail@adatum.com";
                    workEmail.Kind = ContactEmailKind.Work;
                    contact.Emails.Add(workEmail);

                    ContactPhone homePhone = new ContactPhone();
                    homePhone.Number = "(555) 555-0100";
                    homePhone.Kind = ContactPhoneKind.Home;
                    contact.Phones.Add(homePhone);

                    ContactPhone workPhone = new ContactPhone();
                    workPhone.Number = "(555) 555-0111";
                    workPhone.Kind = ContactPhoneKind.Work;
                    contact.Phones.Add(workPhone);

                    ContactPhone mobilePhone = new ContactPhone();
                    mobilePhone.Number = "(555) 555-0112";
                    mobilePhone.Kind = ContactPhoneKind.Mobile;
                    contact.Phones.Add(mobilePhone);

                    ContactAddress address = new ContactAddress();
                    address.StreetAddress = "One Microsoft Way";
                    address.Locality = "Redmond";
                    address.Region = "WA";
                    address.Country = "USA";
                    address.PostalCode = "23456";
                    address.Kind = ContactAddressKind.Home;
                    contact.Addresses.Add(address);

                    return contact;
                });
        }

Use the contact card

You can use the contact card to perform operations, such as adding the contact to the People app, getting details about the contact if it's already in the People app, or calling a phone number that is associated with the contact.

Complete example

This example uses Contact and ContactManager to create a contact and to show the contact's data in a contact card.

    /// <summary>
    /// A page for the 'Show contact card with delay loaded data' scenario that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class ScenarioShowContactCardDelayLoad : SDKTemplate.Common.LayoutAwarePage
    {
        // A pointer back to the main page.  This is needed if you want to call methods in MainPage such
        // as NotifyUser()
        MainPage rootPage = MainPage.Current;

        public ScenarioShowContactCardDelayLoad()
        {
            this.InitializeComponent();
        }

        private async Task<Contact> DownloadContactDataAsync(Contact contact)
        {
            // Simulate the download latency by delaying the execution by 2 seconds.
            await Task.Delay(2000);
            return await Task.Run<Contact>(() =>
                {
                    // Add more data to the contact object.
                    ContactEmail workEmail = new ContactEmail();
                    workEmail.Address = "gail@adatum.com";
                    workEmail.Kind = ContactEmailKind.Work;
                    contact.Emails.Add(workEmail);

                    ContactPhone homePhone = new ContactPhone();
                    homePhone.Number = "(555) 555-0100";
                    homePhone.Kind = ContactPhoneKind.Home;
                    contact.Phones.Add(homePhone);

                    ContactPhone workPhone = new ContactPhone();
                    workPhone.Number = "(555) 555-0111";
                    workPhone.Kind = ContactPhoneKind.Work;
                    contact.Phones.Add(workPhone);

                    ContactPhone mobilePhone = new ContactPhone();
                    mobilePhone.Number = "(555) 555-0112";
                    mobilePhone.Kind = ContactPhoneKind.Mobile;
                    contact.Phones.Add(mobilePhone);

                    ContactAddress address = new ContactAddress();
                    address.StreetAddress = "One Microsoft Way";
                    address.Locality = "Redmond";
                    address.Region = "WA";
                    address.Country = "USA";
                    address.PostalCode = "23456";
                    address.Kind = ContactAddressKind.Home;
                    contact.Addresses.Add(address);

                    return contact;
                });
        }
        /// <summary>
        /// This is the click handler for the 'Show contact card with delayed data loader' button.  
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private async void ShowContactCardDelayLoadButton_Click(object sender, RoutedEventArgs e)
        {
            // Create contact object with small set of initial data to display.
            Contact contact = new Contact();
            contact.FirstName = "Gail";
            contact.LastName = "Wilson";

            ContactEmail email = new ContactEmail();
            email.Address = "gail@contoso.com";
            contact.Emails.Add(email);

            // Get the selection rect of the button pressed to show contact card.
            Rect rect = Helper.GetElementRect(sender as FrameworkElement);
            using (ContactCardDelayedDataLoader dataLoader = ContactManager.ShowDelayLoadedContactCard(contact, rect, Windows.UI.Popups.Placement.Default))
            {
                string message = "ContactManager.ShowDelayLoadedContactCard() was called.\r\n";
                this.rootPage.NotifyUser(message, NotifyType.StatusMessage);

                // Simulate downloading more data from the network for the contact.
                message += "Downloading data ...\r\n";
                this.rootPage.NotifyUser(message, NotifyType.StatusMessage);

                Contact fullContact = await DownloadContactDataAsync(contact);
                if (fullContact != null)
                {
                    // We get more data - update the contact card with the full set of contact data.
                    dataLoader.SetData(fullContact);

                    message += "ContactCardDelayedDataLoader.SetData() was called.\r\n";
                    this.rootPage.NotifyUser(message, NotifyType.StatusMessage);
                }
            }
        }
    }

Summary

We created a contact, applied initial data to it, displayed that initial data in a contact card, and then updated that contact card in a delayed fashion with more contact data.

Now you have a basic understanding of how to show contact data in a contact card in a delayed fashion. Download the Contact manager API sample from the code gallery to see the complete sample of how to use contacts and the contact manager.

Contact manager API sample