If you follow the steps outlined in previous topics for retemplating a PresenceIndicator, but perform the operation on a ContactCard control, the operation will generate various new styles, templates, and other resources in your resource dictionary. The template for the ContactCard can be found by searching for the following:

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

This template consists of basically 4 parts, arranged in a simple vertical StackPanel:

The ContactNote, which is displayed at the top of the card.
A ContactContentPresenter which handles the primary contact information area of the card (more on this later). This is the part of the card that shows the contact's name, photo, and basic information.
A small Grid which defines the toolbar that appears at the bottom of the contact card.
A second ContactContentPresenter which handles the details section of the card. This is the part of the card which appears only after clicking the toggle button in the lower right corner. When displayed, a set of tabs appear which, depending on the type of contact, provide more detailed information.

You can easily add another section to the ContactCard by simply 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

Take a look at the copy of the ContactCard template which is located in the resource dictionary that you created above. You can find this template by searching for the following:

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

Near the bottom of this template is a ContactContentPresenter control which appears in a grid called PART_DetailsContainer. This control is responsible for the display of the tabset which shows details about the contact when the user clicks the toggle button in the lower right corner of the card. It uses a variety of different templates to accomplish this task. To customize these templates, we must have an understanding of how ContactContentPresenter controls work.

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

A ContentPresenter uses the template referenced by its ContentTemplate property to render the Content data. When using the ContactContentPresenter, we do not need to set this property directly, Instead, this control supports the automatic selection of this template, based on the type of contact that has been provided.

The ContactContentPresenter includes 4 dependency properties which identify the specific DataTemplate to use for for different contact types:

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

Copy Code

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

These properties refer to data templates which are defined elsewhere in the resource dictionary for your ContactCard.

The summary portion of the ContactCard, 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 exactly the same as that which we have just described for the details section of the card.

The following table summarizes the different data templates which you can modify:

Contact Type	ContactCard Section	Name of corresponding DataTemplate
Person	Brief	ContactCardBriefPersonDataTemplate
Person	Details	ContactCardDetailsPersonDataTemplate
Telephone	Brief	ContactCardBriefTelephoneDataTemplate
Telephone	Details	ContactCardDetailsTelephoneDataTemplate
Bot	Brief	ContactCardBriefBotDataTemplate
Bot	Details	ContactCardDetailsBotDataTemplate
Group	Brief	ContactCardBriefDistributionListDataTemplate
Group	Details	ContactCardDetailsDistributionListDataTemplate

Now that you understand how the ContactContentPresenter control works, you can customize the appearance of the any section of the ContactCard by editing the appropriate data templates. In the next section, we will follow these steps to add a new tab item to the details section of the person template.

Editing The ContactCardDetailsPersonDataTemplate To Add A New Tab Item

When bound to a person's SIP URI, the ContactCard control expands to display a set of two tabs. The first tab shows detailed contact information, and the second shows organizational information for the selected person. If you wish to add a third tab, you can easily do so by simply retemplating the ContactCard control, and editing the ContactCardDetailsPersonDataTemplate data template.

To retemplate the ContactCard, follow the standard retemplating procedure which was described above. Once you have completed this operation, you will have a resource dictionary with copies of all of the styles, templates, and other resources used by the ContactCard. Search for the ContactCardDetailsPersonDataTemplate in your resource dictionary:

	Copy Code
<DataTemplate x:Key="ContactCardDetailsPersonDataTemplate">

Once you have found the template, simply insert the following XAML into the list of existing TabItems:

	Copy Code
<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>

Copy Code

	<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 ContactCard, you will see that the details section now contains a third tab item called My Custom Tab.

Understanding the ContactContentPresenter control

Editing The ContactCardDetailsPersonDataTemplate To Add A New Tab Item

See Also

Concepts