Like the ContactCard, there are several parts to a ContactList control which can be customized. The ContactList itself consists of 2 parts:

  • The tree view which presents the hierarchical display of groups and contacts

  • The toolbar which appears at the top of the contact list.

By simply using Expression Blend to edit a copy of the template for the ContactList, you can easily make changes to the toolbar, or even add an additional component to the basic template for a ContactList. However, if you wish to modify the appearance and/or behavior of the nodes within the tree view control, there are some additional steps which must be taken.

Editing the ContactListGroupItem template

To customize the template which is used to display top-level group nodes on the ContactList, perform the following procedure.

To edit the ContactListGroupItem template

  1. The template for a group-level node is applied to an internal control type called ContactListGroupItem . This control is not directly accessible from the ContactList template. In order to get a copy of the template for a ContactListGroupItem, you must temporarily add an instance of the control to your form, and follow the normal steps to edit a copy of its template.

      Copy imageCopy Code 
    <controls:ContactListGroupItem/> <!-- For temporary use
-->

  2. In the resulting set of resources, you will find a new style and control template for the ContactListGroupItem. If you accepted the suggested name for the new style, it will look something like this:

      Copy imageCopy Code 
    	<Style x:Key="ContactListGroupItemStyle1" 
		TargetType="{x:Type controls:ContactListGroupItem}">

  3. You can now delete the reference to the ContactListGroupItem which you created in step 1.

  4. Make any changes to the style and the embedded control template that you see fit. When you are finished, you can use the new style and template in your ContactList, by setting the GroupItemContainerStyle property:

      Copy imageCopy Code 
    	<controls:ContactList 
		GroupItemContainerStyle="{StaticResource
ContactListGroupItemStyle1}"/>

Editing The ContactListItem Templates

The ContactList uses a variety of different DataTemplate resources to control the appearance of people, telephone numbers, bots, and nested distribution groups. There are two data templates for each type of contact; one template for the Name View, and one template for the Picture View. These views are sometimes referred to as OneLine and TwoLines view, respectively.

To customize the DataTemplate for one or more of these views

  1. The template for a contact-level node is applied to an internal control type called ContactListItem. This control is not directly accessible from the ContactList template. In order to get a copy of the template for a ContactListItem, you must temporarily add an instance of the control to your form, and follow the normal steps to edit a copy of its template.

      Copy imageCopy Code 
    <controls:ContactListItem/> <!-- For temporary use -->

  2. After you make a copy of the template, you can delete this control from your form.

  3. In the resulting set of resources, you will find many styles and templates that are used by the ContactListItem control. Among them, you will find various DataTemplate objects which can be used to customize the appearance of contacts in the ContactList.

    For example, you can modify the template used for displaying person-type contacts in TwoLines view by customizing the data template that is identified by the key PersonContactItemDataTemplateTwoLines., After you make your changes, you apply the new template by setting the following property on the ContactList:

      Copy imageCopy Code 
    <controls:ContactList PersonTwoLineItemTemplate=
		"{StaticResource
PersonContactItemDataTemplateTwoLines}"/>

The following table identifies the full set of templates which can be used to customize the appearance of contacts in the ContactList:

Contact Type

Layout View

ContactList Property Name

Name of corresponding DataTemplate

Person

OneLine

PersonItemTemplate

PersonContactItemDataTemplateOneLine

Person

TwoLines

PersonTwoLineItemTemplate

PersonContactItemDataTemplateTwoLines

Telephone

OneLine

TelephoneItemTemplate

TelephoneContactItemDataTemplateOneLine

Telephone

TwoLines

TelephoneTwoLineItemTemplate

TelephoneContactItemDataTemplateTwoLines

Bot

OneLine

BotItemTemplate

BotContactItemDataTemplateOneLine

Bot

TwoLines

BotTwoLineItemTemplate

BotContactItemDataTemplateTwoLines

Group

OneLine

GroupItemTemplate

GroupContactItemDataTemplateOneLine

Group

TwoLines

GroupTwoLineItemTemplate

GroupContactItemDataTemplateTwoLines

See Also