Page 1 of 1

Silverlight/WPF - Custom ListBox Item Template

#1 eclipsed4utoo  Icon User is offline

  • Not Your Ordinary Programmer
  • member icon

Reputation: 1526
  • View blog
  • Posts: 5,961
  • Joined: 21-March 08

Posted 24 October 2010 - 06:38 AM

In this tutorial, I will show how to create a custom ListBox Item Template.

For anybody who has tried doing a custom Item Template in WinForms, you would know that it is not fun. You have to override Draw/Paint events, and other jazz to get a ListBox to show how you want it to. However, in Silverlight/WPF, this process is so much easier.

I will be using Blend 4 in my example, as Blend makes the process even more easier.

So first we are going to create a Silverlight project. I will name it CustomListBoxItemTemplate.

Attached Image

Next, we are going to add a ListBox to our page. I made mine with a Height of 250, and a Width of 300, and gave it the name lstPeople.

<ListBox 
	x:Name="lstPeople" 
	ItemsSource="{Binding}"
	DisplayMemberPath="FullName"
	Margin="145,92,195,138"/>



Before we get to styling the ListBox, we need to create some test data to load into our ListBox. I created a simply Person class.

public class Person
{
    // Insert code required on object creation below this point.
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
    public string FullName { get { return FirstName + " " + LastName; } }

	public Person(string _fName, string _lName, int _age)
	{
        FirstName = _fName;
        LastName = _lName;
        Age = _age;
	}
}



And add it to the ListBox...

public partial class MainPage : UserControl
{
	public MainPage()
	{
		// Required to initialize variables
		InitializeComponent();

        ObservableCollection<Person> peopleList = new ObservableCollection<Person>();
        peopleList.Add(new Person("John", "Doe", 32));
        peopleList.Add(new Person("Jane", "Doe", 20));
        peopleList.Add(new Person("Betty", "Sue", 65));

        lstPeople.ItemsSource = peopleList;
	}
}



So now, our ListBox looks like this...

Attached Image

Let's say that we want to display the age below the Full Name. We can use Blend to edit the Item Template of the ListBox.

In the Objects And Timeline window, right-click on the ListBox --> Edit Additional Templates --> Edit Generated Items(ItemTemplate) --> Create Empty. You could also use the "Edit A Copy" if it's available.

Attached Image

We will name it MyListBoxItemTemplate.

Attached Image

If you switch over to the XAML view, you will see that the ItemTemplate of the ListBox has now been binded to a Static Resource. Right above the LayoutRoot in the UserControl.Resources, you should a DataTemplate.

You will now see a small Grid on the screen. We will expand the grid to a Height of 55 and a Width of 225. Inside the grid, we are going to add 4 TextBlocks. Two will be for display purposes and the other two will show our information. Notice I am also Binding the FullName and Age properties to the Text property of the TextBlock.

<Grid Width="225" Height="55">
	
	<TextBlock 
		Text="Full Name:" 
		HorizontalAlignment="Left" 
		Height="15" 
		Margin="12,8,0,0" 
		TextWrapping="Wrap" 
		VerticalAlignment="Top" 
		Width="70"/>
		
	<TextBlock 
		Text="Age:" 
		HorizontalAlignment="Left" 
		Margin="46,27,0,13" 
		TextWrapping="Wrap" 
		Width="33"/>
	
	<TextBlock 
		x:Name="FullNameTextBlock" 
		Text="{Binding FullName}"
		Height="15" 
		Margin="86,8,8,0" 
		TextWrapping="Wrap" 
		VerticalAlignment="Top" />
	
	<TextBlock 
		x:Name="AgeTextBlock" 
		Text="{Binding Age}"
		Margin="86,27,92,13" 
		TextWrapping="Wrap" />
		
</Grid>



And that's all we need to do. To get out of the ItemTemplate editing, click on the ListBox at the top...

Attached Image

Now run the application, and your ListBox will now look like this...
Attached Image

As you can see, using Blend in a Silverlight or WPF application, you can customize a ListBox in only a few minutes.

Is This A Good Question/Topic? 1
  • +

Page 1 of 1