Eclipsed4utoo's Blog

In a previous tutorial, I showed how to do a custom Item Template for a ListBox. However, one of the painstaking parts of that was having to create the class and the code to populate the ListBox with actual data. Also, even though I was populating the ListBox, I still simply saw blank controls during design-time.

This is where Sample Data comes in. Not only can you quickly create sample data for a control, you can drag and drop it onto the control, and the ItemTemplate will be created for you(which you can still edit). And the biggest plus to using Sample Data?….the data can be view at DESIGN-TIME.

So first, let’s create a Silverlight project in Blend. I named mine SampleDataProject.

Next, we will put a ListBox on our page, and give it a Height of 200 and a Width of 250.

<ListBox
	Margin="178,128,212,152"
	Width="250"
	Height="200"/>

Now that we have the ListBox on the page, we can create our Sample Data. Click on the Data window, then on the “Create sample data” button, then choose “New Sample Data…”…

We are going to name it PersonDataSource.

A couple of things to note on this screen. You will see two radio buttons: Project, and This document. If you choose Project, it will make the sample data available to any control in the project. If you choose This document, then the sample data will only be available to this page.

You will also see a checkbox on this screen saying “Enable sample data when application is running”. This allows you to use the sample data in design time, but use another data source during runtime. Uncheck this box if you want to use a different data source at runtime. Since we want our sample data for design time and runtime, we will leave it checked.

After creating the sample data, the Data window will now show our data in a treeview type layout. By default, it will add two properties for us.

Let’s change the first property by double clicking it and giving it the name FullName.

Let’s change the second property to Age. By default, this property is set to a boolean type. Since our age is not a boolean value, we need to change that to a numeric format. Click on the “Change property type” button on the far right of the property line. You will see a dropdown with different types. Choose “Number”. We will leave it’s length at 2.

Now that we have the properties setup, we need to add some actual data. Click on the “Edit sample values” button…

You will now see a window with a number of rows and data. At the bottom, you can determine how many rows you want to show. We are going to change this to 3. We are going to add some data to those rows, then click OK.

Now that we have our sample data setup, let’s simply drag and drop the “Collection” from the Data window onto the ListBox. The ListBox will create it’s own ItemTemplate to display the data.

That’s all you have to do. As you can see, we now have data in our ListBox while designing it…

You can look at my other tutorial on how to edit the created ItemTemplate to show the data different ways.

To me, this is one of the best features of Blend. Being able to see how a collection control will look at design time will speed up the development process. No longer will you have to continuously run the application to see if you have the layout correct.

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.

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…

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.

We will name it MyListBoxItemTemplate.

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…

Now run the application, and your ListBox will now look like this…

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

So I answered a post on the Dream.In.Code forums about removing elements from a List that don’t meet a certain criteria, and I have decided to post that answer here.

Microsoft’s definition is, “A lambda expression is an anonymous function that can contain expressions and statements, and can be used to create delegates or expression tree types.”

Here is a fairly simple example of using a lambda expression.

Student class

public class Student
{
     public string Name;
     public double Grade;

     public Student(string _name, double _grade)
     {
          Name = _name;
          Grade = _grade;
     }
}

So our Student class has two properties for a student’s name and grade.

Main Program

List<Student> list = new List<Student>();
list.Add(new Student("You", 12));
list.Add(new Student("Me", 76));
list.Add(new Student("Them", 95));

// remove all students where Grade is less than 70
list.RemoveAll(li => li.Grade < 70);

foreach (Student s in list)
{
     Console.WriteLine(s.Name + " " + s.Grade);
}

Console.Read();

So in our main program, we add 3 students to a list, then use a lambda expression to remove students who have a grade less than 70.