Compartir a través de

Ficha de contacto

  • Artículo

La tarjeta de contacto muestra información de contacto, como el nombre, el número de teléfono y la dirección, de un Contacto (el mecanismo que usa Windows para representar personas y empresas). La tarjeta de contacto también permite al usuario editar información de contacto. Puedes elegir entre mostrar una tarjeta de contacto compacta o una tarjeta de contacto completa que contenga información adicional.

API importantes: Método ShowContactCard, Método ShowFullContactCard, Método IsShowContactCardSupported, Clase Contact

Hay dos formas de mostrar la tarjeta de contacto:

  • Como tarjeta de contacto estándar que aparece en un control flotante que es descartable con luz, la tarjeta de contacto desaparece cuando el usuario hace clic fuera de él.
  • Como una tarjeta de contacto completa que ocupa más espacio y no tiene cierre del elemento por cambio de foco: el usuario debe hacer clic en cerrar para cerrarla.
Captura de pantalla que muestra una tarjeta de contacto estándar.
La tarjeta de contacto estándar
Captura de pantalla que muestra una tarjeta de contacto completa.
La tarjeta de contacto completa

¿Es este el control adecuado?

Usa la tarjeta de contacto cuando quieras mostrar la información de contacto de un contacto. Si solo quieres mostrar el nombre del contacto y la imagen, usa el control de imagen de la persona.

Muestra de una tarjeta de contacto estándar

  1. Por lo general, se muestra una tarjeta de contacto porque el usuario ha hecho clic en algo: un botón o quizás el control de imagen de la persona. No queremos ocultar el elemento. Para evitar ocultarla, necesitamos crear un elemento Rect que describa la ubicación y el tamaño del elemento.

    Vamos a crear una función de utilidad que lo haga por nosotros: la usaremos más adelante.

    // 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. Determina si puedes mostrar la tarjeta de contacto mediante una llamada al método ContactManager.IsShowContactCardSupported. Si no es compatible, muestra un mensaje de error. (En este ejemplo se supone que se va a mostrar la tarjeta de contacto en respuesta a un evento de clic).

    // Contact and Contact Managers are existing classes 
private void OnUserClickShowContactCard(object sender, RoutedEventArgs e) 
{ 
    if (ContactManager.IsShowContactCardSupported()) 
    {

  3. Usa la función de utilidad que has creado en el paso 1 para obtener los límites del control que ha provocado el evento (para no taparlo con la tarjeta de contacto).

            Rect selectionRect = GetElementRect((FrameworkElement)sender);

  4. Obtén el objeto Contact que quieres mostrar. Este ejemplo solo crea un contacto sencillo, pero el código debe recuperar un contacto real.

                // Retrieve the contact to display
            var contact = new Contact(); 
            var email = new ContactEmail(); 
            email.Address = "jsmith@contoso.com"; 
            contact.Emails.Add(email);

  5. Muestra la tarjeta de contacto mediante una llamada al método ShowContactCard.

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

Este es el ejemplo de código completo:

// 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); 
    } 
}

Muestra de una tarjeta de contacto completa

Para mostrar la tarjeta de contacto completa, llama al método ShowFullContactCard en lugar de 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); 
}

Recuperación de contactos "reales"

En los ejemplos de este artículo se crea un contacto sencillo. En una aplicación real, seguramente quieras recuperar un contacto existente. Para obtener instrucciones, consulta el Artículo sobre contactos y calendario.