联系人卡片Contact card

联系人卡片显示联系人(Windows 用来表示用户和企业的机制)的信息,例如姓名、电话号码和地址。The contact card displays contact information, such as the name, phone number, and address, for a Contact (the mechanism Windows uses to represent people and businesses). 联系人卡片还允许用户编辑联系人信息。The contact card also lets the user edit contact info. 可以选择显示紧凑式联系人卡片或包含更多信息的完整联系人卡片。You can choose to display a compact contact card, or a full contact card that contains additional information.

重要的 APIShowContactCard 方法ShowFullContactCard 方法IsShowContactCardSupported 方法Contact 类Important APIs: ShowContactCard method, ShowFullContactCard method, IsShowContactCardSupported method, Contact class

有两种显示联系人卡片的方式:There are two ways to display the contact card:

  • 以标准联系人卡片方式显示在可轻型消除的浮出控件中,当用户在联系人卡片外部单击时联系人卡片消失。As a standard contact card that appears in a flyout that is light-dismissable--the contact card dissapears when the user clicks outside of it.
  • 以完整联系人卡片方式显示,占用更多空间,并且不可轻型消除,用户必须单击“关闭” 才能关闭它。As a full contact card that takes up more space and is not light-dismissable--the user must click close to close it.
Screenshot showing a standard contact card.
标准联系人卡片The standard contact card
Screenshot showing a full contact card.
完整联系人卡片The full contact card

这是正确的控件吗?Is this the right control?

想要显示联系人的联系人信息时,请使用联系人卡片。Use the contact card when you want to display contact info for a contact. 如果只想显示联系人的姓名和头像,请使用个人图片控件If you only want to display the contact's name and picture, use the person picture control.

显示标准联系人卡片Show a standard contact card

  1. 通常,显示联系人卡片是因为用户单击了某些内容,例如按钮或个人图片控件Typically, you show a contact card because the user clicked something: a button or perhaps the person picture control. 我们不希望隐藏该元素。We don't want to hide the element. 为避免隐藏它,我们需要创建一个 Rect 来描述该元素的位置和大小。To avoid hiding it, we need to create a Rect that describes the location and size of the element.

    让我们创建一个实用工具函数来实现此功能,稍后将使用该函数。Let's create a utility function that does that for us--we'll use it later.

    // Gets the rectangle of the element 
    public static Rect GetElementRectHelper(FrameworkElement element) 
    { 
        // Passing "null" means set to root element. 
        GeneralTransform elementTransform = element.TransformToVisual(null); 
        Rect rect = elementTransform.TransformBounds(new Rect(0, 0, element.ActualWidth, element.ActualHeight)); 
        return rect; 
    } 
    
    
  2. 通过调用 ContactManager.IsShowContactCardSupported 方法确定你是否能显示联系人卡片。Determine whether you can display the contact card by calling the ContactManager.IsShowContactCardSupported method. 如果不支持,会显示一条错误消息。If it's not supported, display an error message. (此示例假设将为了响应单击事件而显示联系人卡片。)(This example assumes that you'll be showing the contact card in response to a click event .)

    // Contact and Contact Managers are existing classes 
    private void OnUserClickShowContactCard(object sender, RoutedEventArgs e) 
    { 
        if (ContactManager.IsShowContactCardSupported()) 
        { 
    
    
  3. 使用你在步骤 1 中创建的实用工具函数获取触发该事件的控件的边界(这样我们就不会用联系人卡片覆盖它)。Use the utility function you created in step 1 to get the bounds of the control that fired the event (so we don't cover it up with the contact card).

            Rect selectionRect = GetElementRect((FrameworkElement)sender); 
    
  4. 获取要显示的 Contact 对象。Get the Contact object you want to display. 此示例只是创建一个简单的联系人,但你的代码应检索实际联系人。This example just creates a simple contact, but your code should retrieve an actual contact.

                // Retrieve the contact to display
                var contact = new Contact(); 
                var email = new ContactEmail(); 
                email.Address = "jsmith@contoso.com"; 
                contact.Emails.Add(email); 
    
  5. 通过调用 ShowContactCard 方法显示联系人卡片。Show the contact card by calling the ShowContactCard method.

            ContactManager.ShowFullContactCard(
                contact, selectionRect, Placement.Default); 
        } 
    } 
    

下面是完整的代码示例:Here's the complete code example:

// Gets the rectangle of the element 
public static Rect GetElementRect(FrameworkElement element) 
{ 
    // Passing "null" means set to root element. 
    GeneralTransform elementTransform = element.TransformToVisual(null); 
    Rect rect = elementTransform.TransformBounds(new Rect(0, 0, element.ActualWidth, element.ActualHeight)); 
    return rect; 
} 
 
// Display a contact in response to an event
private void OnUserClickShowContactCard(object sender, RoutedEventArgs e) 
{ 
    if (ContactManager.IsShowContactCardSupported()) 
    { 
        Rect selectionRect = GetElementRect((FrameworkElement)sender);

        // Retrieve the contact to display
        var contact = new Contact(); 
        var email = new ContactEmail(); 
        email.Address = "jsmith@contoso.com"; 
        contact.Emails.Add(email); 
    
        ContactManager.ShowContactCard(
            contact, selectionRect, Placement.Default); 
    } 
} 

显示完整联系人卡片Show a full contact card

要显示完整联系人卡片,请调用 ShowFullContactCard 方法而不是 ShowContactCardTo show the full contact card, call the ShowFullContactCard method instead of ShowContactCard.

private void onUserClickShowContactCard() 
{ 
   
    Contact contact = new Contact(); 
    ContactEmail email = new ContactEmail(); 
    email.Address = "jsmith@hotmail.com"; 
    contact.Emails.Add(email); 
 
 
    // Setting up contact options.     
    FullContactCardOptions fullContactCardOptions = new FullContactCardOptions(); 
 
    // Display full contact card on mouse click.   
    // Launch the People’s App with full contact card  
    fullContactCardOptions.DesiredRemainingView = ViewSizePreference.UseLess; 
     
 
    // Shows the full contact card by launching the People App. 
    ContactManager.ShowFullContactCard(contact, fullContactCardOptions); 
} 

检索“实际”联系人Retrieving "real" contacts

本文中的示例创建一个简单联系人。The examples in this article create a simple contact. 在实际应用中,你可能希望检索现有联系人。In a real app, you'd probably want to retrieve an existing contact. 有关说明,请参阅联系人和日历文章For instructions, see the Contacts and calendar article.