連絡先カードContact card

連絡先カードには、Contact の名前、電話番号、住所などの連絡先情報が表示されます (個人や企業を表すためにメカニズム UWP によって使用される)。The contact card displays contact information, such as the name, phone number, and address, for a Contact (the mechanism UWP 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.

重要な API:ShowContactCard メソッドShowFullContactCard メソッドIsShowContactCardSupported メソッドクラスにお問い合わせくださいImportant APIs: ShowContactCard method, ShowFullContactCard method, IsShowContactCardSupported method, Contact class

連絡先カードを表示する方法は 2 つあります。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.
The full contact card
標準の連絡先カードThe standard contact card
The 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

完全な連絡先カードを表示するには、ShowContactCard メソッドではなく ShowFullContactCard メソッドを呼び出します。To 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.