Quickstart: Showing contact data in a contact card (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 data to it, and then display that data in a contact card.
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 data to it
Create an instance of a Windows.ApplicationModel.Contacts.Contact and assign it to a variable. Then, apply to the Contact the email address, the phone number, or both that were supplied through the UI by a user.
if ((this.EmailAddress.Text.Length == 0) && (this.PhoneNumber.Text.Length == 0))
{
this.rootPage.NotifyUser("You must enter an email address and/or phone number of the contact for the system to search and show the contact card.", NotifyType.ErrorMessage);
}
else
{
Contact contact = new Contact();
if (this.EmailAddress.Text.Length > 0)
{
if (this.EmailAddress.Text.Length <= MAX_EMAIL_ADDRESS_LENGTH)
{
ContactEmail email = new ContactEmail();
email.Address = this.EmailAddress.Text;
contact.Emails.Add(email);
}
else
{
this.rootPage.NotifyUser("The email address you entered is too long.", NotifyType.ErrorMessage);
return;
}
}
if (this.PhoneNumber.Text.Length > 0)
{
if (this.PhoneNumber.Text.Length <= MAX_PHONE_NUMBER_LENGTH)
{
ContactPhone phone = new ContactPhone();
phone.Number = this.PhoneNumber.Text;
contact.Phones.Add(phone);
}
else
{
this.rootPage.NotifyUser("The phone number you entered is too long.", NotifyType.ErrorMessage);
return;
}
}
Show the contact data in a contact card
Call the ContactManager.ShowContactCard(Contact, Rect, Placement) method to show the previously supplied contact data in a contact card.
// Get the selection rect of the button pressed to show contact card.
Rect rect = Helper.GetElementRect(sender as FrameworkElement);
ContactManager.ShowContactCard(contact, rect, Windows.UI.Popups.Placement.Default);
this.rootPage.NotifyUser("ContactManager.ShowContactCard() was called.", NotifyType.StatusMessage);
}
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' scenario that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class ScenarioShowContactCard : 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;
// Length limits allowed by the API
private const uint MAX_EMAIL_ADDRESS_LENGTH = 321;
private const uint MAX_PHONE_NUMBER_LENGTH = 50;
public ScenarioShowContactCard()
{
this.InitializeComponent();
}
/// <summary>
/// This is the click handler for the 'Show contact card' button.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void ShowContactCardButton_Click(object sender, RoutedEventArgs e)
{
if ((this.EmailAddress.Text.Length == 0) && (this.PhoneNumber.Text.Length == 0))
{
this.rootPage.NotifyUser("You must enter an email address and/or phone number of the contact for the system to search and show the contact card.", NotifyType.ErrorMessage);
}
else
{
Contact contact = new Contact();
if (this.EmailAddress.Text.Length > 0)
{
if (this.EmailAddress.Text.Length <= MAX_EMAIL_ADDRESS_LENGTH)
{
ContactEmail email = new ContactEmail();
email.Address = this.EmailAddress.Text;
contact.Emails.Add(email);
}
else
{
this.rootPage.NotifyUser("The email address you entered is too long.", NotifyType.ErrorMessage);
return;
}
}
if (this.PhoneNumber.Text.Length > 0)
{
if (this.PhoneNumber.Text.Length <= MAX_PHONE_NUMBER_LENGTH)
{
ContactPhone phone = new ContactPhone();
phone.Number = this.PhoneNumber.Text;
contact.Phones.Add(phone);
}
else
{
this.rootPage.NotifyUser("The phone number you entered is too long.", NotifyType.ErrorMessage);
return;
}
}
// Get the selection rect of the button pressed to show contact card.
Rect rect = Helper.GetElementRect(sender as FrameworkElement);
ContactManager.ShowContactCard(contact, rect, Windows.UI.Popups.Placement.Default);
this.rootPage.NotifyUser("ContactManager.ShowContactCard() was called.", NotifyType.StatusMessage);
}
}
}
Summary and next steps
We created a contact, applied data to it, and then displayed that data in a contact card.
Now you have a basic understanding of how to show contact data in a contact card. Download the Contact manager API sample from the code gallery to see the complete sample of how to use contacts and the contact manager.
Next, we'll create a contact, apply initial data to it, show the initial data in a contact card, and then update that contact card in a delayed fashion with more contact data.
Showing initial contact data and then later applying more contact data