Retemplating the Lync 2010 ContactCard Control

This topic and the accompanying video show how to retemplate the Microsoft Lync 2010 ContactCard control.

If you follow the steps in Editing the Template of a Lync 2010 Control to retemplate a PresenceIndicator control, but perform the operation on a ContactCard control, the operation generates new styles, templates, and other resources in your resource dictionary. The template for the ContactCard control can be found by searching for the following string.

    <ControlTemplate TargetType="{x:Type controls:ContactCard}">

This template includes four parts, arranged in a simple vertical StackPanel:

• The ContactNote instance, which appears at the top of the Microsoft Lync 2010 Contact Card.

• A ContactContentPresenter instance that handles the primary contact information area of the Contact Card. This area is the part of the Contact Card that shows the contact’s name, photo, and basic information.

• A small Grid that defines the toolbar appearing at the bottom of the Contact Card.

• A second ContactContentPresenter that handles the details section of the Contact Card. This area is the part of the Contact Card appearing only after you click the toggle button in the lower-right corner. When ContactContentPresenter is displayed, a set of tabs appear which, depending on the kind of contact, provide more detailed information.

You can easily add another section to the Contact Card by inserting it into this StackPanel in the desired location. However, if you want to make changes to one of the existing sections, a closer examination of the XAML is required.

Understanding the ContactContentPresenter Control

Review the ContactCard template appearing in the resource dictionary that you created previously. You can find this template by searching for the following string.

    <ControlTemplate TargetType="{x:Type controls:ContactCard}">

Near the bottom of this template a ContactContentPresenter control appears in a grid called PART_DetailsContainer. This control is responsible for displaying the set of tabs that show details about the contact when the user clicks the toggle button in the lower-right corner of the Contact Card. It uses a variety of different templates to complete this task. The next few paragraphs discuss how ContactContentPresenter controls work. In the last section of this topic, you add a custom tab option to a Contact Card by editing a data template.

Like the ContentPresenter control from which ContactContentPresenter is derived, ContactContentPresenter includes a Content property that is bound to an arbitrary data model. In our case, this data model is an internal structure that encapsulates the contact that was selected by the parent control’s Source property.

A ContentPresenter instance uses the template referenced by its ContentTemplate property to render the Content data. When using ContactContentPresenter, directly setting the Content property is not necessary. Instead, the ContactContentPresenter control supports automatic selection of this template, based on the kind of contact that is provided.

The ContactContentPresenter control includes four dependency properties that identify the specific data template used for different contact types:

  PersonContentTemplate="{StaticResource ContactCardDetailsPersonDataTemplate}" 
  GroupContentTemplate="{StaticResource ContactCardDetailsDistributionListDataTemplate}" 
  BotContentTemplate="{StaticResource ContactCardDetailsBotDataTemplate}" 
  TelephoneContentTemplate="{StaticResource ContactCardDetailsTelephoneDataTemplate}" 

These properties refer to data templates that are defined elsewhere in the resource dictionary for your Contact Card.

The summary portion of the Contact Card, which displays the photo, name, and availability information, also uses a ContentPresenter control to render its content. The process of identifying the data templates for this control is identical to the process described for the details section of the Contact Card.

The following table summarizes the data templates that you can modify:

Contact type	Contact Card section	Name of corresponding data template
Person	Brief	ContactCardBriefPersonDataTemplate
Person	Details	ContactCardDetailsPersonDataTemplate
Telephone	Brief	ContactCardBriefTelephoneDataTemplate
Telephone	Details	ContactCardDetailsTelephoneDataTemplate
Bot	Brief	ContactCardBriefBotDataTemplate
Bot	Details	ContactCardDetailsBotDataTemplate
Group	Brief	ContactCardBriefDistributionListDataTemplate
Group	Details	ContactCardDetailsDistributionListDataTemplate

In the next section of this topic, a new tab option is added to the details section of a Contact Card data template. You can customize the appearance of the any section of the Contact Card by editing the appropriate data templates.

Editing the ContactCardDetailsPersonDataTemplate

When bound to a person’s SIP URI, the ContactCard control expands to display a set of tabs. The first tab lists detailed contact information, and the second shows organizational information for the selected person. To add a third tab, retemplate the ContactCard control and then edit the ContactCardDetailsPersonDataTemplate data template.

To retemplate the ContactCard control, follow the standard retemplating procedure described earlier. Once you complete this procedure, copies of the styles, templates, and other resources used by the ContactCard control appear in the resource dictionary. Search for the ContactCardDetailsPersonDataTemplate template in your resource dictionary:

    <DataTemplate x:Key="ContactCardDetailsPersonDataTemplate">

Within ContactCardDetailsPersonDataTemplate, insert the following XAML into the list of existing tab options:

    <TabItem Header="My Custom Tab" MinWidth="90"
         Style="{StaticResource EntityCardDetailsTabItemStyle}" 
         Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}">
         <StackPanel>
             <TextBlock Text="This tab contains"/>
             <TextBlock Text="my customized"/>
             <TextBlock Text="functionality"/>
             <TextBlock Text="for ContactCard"/>
         </StackPanel>
    </TabItem>

When you run the application and expand the Contact Card, My Custom Tab appears in the details section.

See Also

Concepts

Retemplating Lync 2010 Controls That Use ContentPresenters

Other Resources

Video: Use Re-Templating to Change the Appearance of a ContactCard Control