Click here to Skip to main content
11,790,816 members (61,285 online)
Click here to Skip to main content

Silverlight ListBox: Part I - Using multiple templates in a ListBox

, 26 Feb 2009 CPOL 60.5K 901 23
Rate this:
Please Sign up or sign in to vote.
How to show mutliple types of items in a single listbox by using multiple templates.



The listbox is a very important control in any technology like ASP.NET or Sliverlight. Normally, we use it to show single line records where the user has the option to choose one of them. I am not going to discuss about how to use listbox in Silverlight as there are many articles available on the topic in the Internet. In this article, I will discuss about how we can use a template to show the items in a listbox. Although there are many articles available on using a single template in a listbox, there are very few which discuss about using multiple templates in a listbox. Sometimes we might have a requirement where we want to show items which have a few common properties and a few specific properties, and we might want to show a different UI for each type of item and in the same listbox.

Let’s take an example to get a better understanding.

It is a very common scenario. There is an organization which has software developers, team leaders, and managers. All of them have a common properties like EmployeeName and ManagerName, but team leaders and managers will have direct reporters to them.

I am going to create a list box which will have software developers, team leaders, and mangers in a list box. Each will have common properties like Employee Name and Manager Name. Team leader and manager items will have listbox which will have a list of reporters. Following is the list of background colors that I used for each type of item to distinguish them.

Item Type Background Color
Software Developer Yellow
Team Leader Cyan
Manager Green


There is a very good sample on listbox which uses a Panel as a container of the listbox. Normally, we use a listbox with the listbox items arranged vertically even if there is enough horizontal space. This sample implements a wrap panel for the listbox; if you are using a wrap panel, then you need not worry about the list box item positions. If there is enough horizontal space, then multiple items can rendered in the same line, and if there is not enough space for the next item, then the next item would be rendered in the next line. Apart from it, its also takes care of resizing the listbox so if the end user is resizing the listbox, then the items would be rendered again and will take new positions corresponding to the space available. This sample also describes about an animation but I am not going to use that in my sample. Following is the link for the article:

You can directly follow up my example even without reading the above article, but I would highly recommend reading it.

What is the Idea?

Following are the steps that we will follow to achieve our goal. The steps would be more clear in the code section.

  1. Create a template class which will have properties for all the possible templates in the listbox.
  2. Create a new class which will derive from ListBox. It will have a new dependency property to select the template for a given ListBoxItem. Override the PrepareContainerForItemOverride method as it actually prepares the specified element to display the given ListBoxItem. It should call the base class (ListBox) PrepareContainerForItemOverride method and set the template of the item from the TemplateSelecter property.
  3. Define the templates for each type of item in the XAML resource.
  4. Define a TemplateSelecter in the XAML resource which will refer to the data template for the item types in the ListBox.
  5. Refer this TemplateSelector in the list box declaration in the User Control XAML.

Using the Code


Define the classes for each type of item. All the classes should have a common base class. Here, Employee is the common base class.

public class Employee
    public string Name { get; set; }
    public string ImageSource { get; set; }

public class Developer : Employee
    public string ManagerName { get; set; }

public class TeamLeader : Employee
    public List<Employee> DirectReports { get; set; }
    public string ManagerName { get; set; }

public class Manager : Employee
    public List<Employee> DirectReports { get; set; }

Step 2

Create a EmployeeTemplateSelecter class which should have all the used templates in the ListBox and should have a SelectTemplate method which would return the template.

public class EmployeeTemplateSelector : DataTemplateSelector
    public DataTemplate EmployeeTemplate { get; set; }
    public DataTemplate DeveloperTemplate { get; set; }
    public DataTemplate TeamLeaderTemplate { get; set; }
    public DataTemplate ManagerTemplate { get; set; }
    public override DataTemplate SelectTemplate(object item,
        DependencyObject container)
        if (item != null)
            if (item is Manager)
                return this.ManagerTemplate;

            if (item is TeamLeader)
                return this.TeamLeaderTemplate;

            if (item is Developer)
                return this.DeveloperTemplate;

            if (item is Employee)
                return this.EmployeeTemplate;

        return null;

Step 3

Create a class MultiTemplateListBox which will be derived from ListBox. It will have a dependency property which will refer to TemplateSelector to get the template for the given ListBoxItem. We have to override the virtual method PrepareContainerForItemOverride so that we can apply the template corresponding to the given ListBoxItem. Here is the code for MultiTemplateListBox.

public class MultiTemplateListBox : ListBox
    public static readonly DependencyProperty TemplateSelectorProperty = 
        typeof(DataTemplateSelector), typeof(MultiTemplateListBox),
        new PropertyMetadata(new PropertyChangedCallback(OnTemplateChanged)));

    public DataTemplateSelector ItemTemplateSelector
        get { return (DataTemplateSelector)this.GetValue(TemplateSelectorProperty); }
        set { this.SetValue(TemplateSelectorProperty, value); }

    protected override void PrepareContainerForItemOverride(
        DependencyObject element, object item)
        base.PrepareContainerForItemOverride(element, item);

        ListBoxItem listBoxItem = element as ListBoxItem;

        if (listBoxItem != null)
            listBoxItem.ContentTemplate = this.ItemTemplateSelector.SelectTemplate(
                item, this);

    private static void OnTemplateChanged(DependencyObject d,
        DependencyPropertyChangedEventArgs e)

public class DataTemplateSelector
    public virtual DataTemplate SelectTemplate(object item,
        DependencyObject container)
        return null;

Step 4

I created three different controls for three types of items. You can see the controls in the attached solution. Now, we can create the templates for each type of item, which will have different views for different types of items. Here is the code which defines the templates:

<DataTemplate x:Key="DeveloperTemplate">
<CustomControls:DeveloperView />
    <DataTemplate x:Key="LeaderTemplate">
<CustomControls:TeamLeaderView />
<DataTemplate x:Key="ManagerTemplate">
    <CustomControls:ManagerView />

Step 5

Define an EmployeeTemplateSelector in the User Control resource which will refer each template defined in the resources.

<CustomControls:EmployeeTemplateSelector x:Key="EmployeeTemplateSelector"
                                "{StaticResource DeveloperTemplate}" 
                                "{StaticResource LeaderTemplate}"
                                "{StaticResource ManagerTemplate}"/>

Step 6

Include an object of MultiTemplateListBox which will have a ItemTemplateSelector property as a static resource and refers to the EmployeeTemplateSelector key. Bind the ListBox to the Employees collection property.

<CustomControls:MultiTemplateListBox x:Name="EmployeeList"
                                         ItemsSource="{Binding Employees}"       
                                         "{StaticResource EmployeeTemplateSelector}" 
                                         Width="800" Height="600" 
            <Grid>D:\Personal\Submit Article\MultipleDataTemplateInListBox\
                    <ItemsPresenter />
            <CustomControls:WrapPanel Width="Auto"/>

The only thing remaining is to populate the data and set the context. Here is the code for it:

public class EmployeeContext
    public List<employee> Employees { get; set; }
    public EmployeeContext()
        Employees = GetEmployeeList();
    private List<employee> GetEmployeeList()
        Developer dev1 = new Developer() { Name = "Mike", ManagerName = "Peterson" ,
            ImageSource = @"/Images/image1.jpg"};
        Developer dev2 = new Developer() { Name = "John", ManagerName = "Peterson" };
        TeamLeader leader1 = new TeamLeader() { Name = "Peterson",
            ManagerName = "Anderson", DirectReports = new List<employee> { dev1,
            dev2 } };
        Developer dev3 = new Developer() { Name = "Steave Mollenkopf",
            ManagerName = "Tomi Swartz" };
        Developer dev4 = new Developer() { Name = "Han Tran",
            ManagerName = "Tomi Swartz" };
        Developer dev5 = new Developer() { Name = "Parth Sarthi",
            ManagerName = "Tomi Swartz" };
        Developer dev6 = new Developer() { Name = "Shivank Nayak",
            ManagerName = "Tomi Swartz" }; 
        TeamLeader leader2 = new TeamLeader() { Name = "Allona Cholnika",
            ManagerName = "Tomi Swartz", DirectReports = new List<employee> { dev3,
            dev4, dev5, dev6 } };
        Manager manager1 = new Manager() { Name = "Tomi Swartz",
            DirectReports = new List<employee>() { leader1, leader2 } };
        return new List<employee>()
               dev1, dev2, dev3, dev4, dev5, dev6, leader1, leader2, manager1
EmployeeContext context = new EmployeeContext();
        this.DataContext = context;

Now, if you run the code, you will find the items in three different colors (yellow, cyan, and green). I am not very good at UI designing, so the UI might not look very good. The ListBox contains three different types of items, and different types of items have different UI. We can deal with them separately. Here, the team leader ListBoxItem has a list of developers and the manager ListBoxItem has a list of team leaders.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer Microsoft India
India India
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 4 Pin
THOBONG27-Sep-10 22:15
memberTHOBONG27-Sep-10 22:15 
Questionhow about ItemsControl::ItemTemplateSelector? Pin
Andy Gao8-Jun-10 20:58
memberAndy Gao8-Jun-10 20:58 
AnswerRe: how about ItemsControl::ItemTemplateSelector? Pin
Anil_gupta13-Jun-10 20:55
memberAnil_gupta13-Jun-10 20:55 
AnswerUsing a template in a Grid Pin
rrmt27-Jan-10 21:21
memberrrmt27-Jan-10 21:21 
QuestionUsing a template in a Grid Pin
rrmt25-Jan-10 19:38
memberrrmt25-Jan-10 19:38 
AnswerRe: Using a template in a Grid Pin
Anil_gupta26-Jan-10 15:10
memberAnil_gupta26-Jan-10 15:10 
If I am correct, you want to apply the template in the grid. You can not set the canvas left and right withing a grid as grid doesn't support these properties.
I think you want to display some columns in the grid. better to go with datagrid from Silverlight tools. You don't have to define the templates for it.You have to define the clumns for it. Refer the articles from internet on DataGrid.

Anil Kumar Gupta

GeneralForcing a template change Pin
Phil Nicholas7-Dec-09 23:10
memberPhil Nicholas7-Dec-09 23:10 
QuestionQuestion Pin
alandw3-Nov-09 11:40
memberalandw3-Nov-09 11:40 
AnswerRe: Question Pin
Anil_gupta4-Nov-09 2:01
memberAnil_gupta4-Nov-09 2:01 
Questionquestion Pin
alandw2-Nov-09 5:22
memberalandw2-Nov-09 5:22 
AnswerRe: question Pin
Anil_gupta2-Nov-09 18:07
memberAnil_gupta2-Nov-09 18:07 
GeneralAutoCompleteBox Pin
Thomas M.3-Oct-09 2:18
memberThomas M.3-Oct-09 2:18 
GeneralRe: AutoCompleteBox Pin
Anil_gupta2-Nov-09 18:10
memberAnil_gupta2-Nov-09 18:10 
GeneralRe: AutoCompleteBox Pin
Thomas M.3-Nov-09 11:05
memberThomas M.3-Nov-09 11:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1509028.1 | Last Updated 26 Feb 2009
Article Copyright 2009 by Anil_gupta
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid