RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


WPF Wonders: Using DataTemplates : Page 2

WPF data templates let you determine the pieces a repetitive control uses to display its items. Learn some unique and interesting ways to use data templates for displaying the items in ListBoxes, ComboBoxes, and ListViews.


ListBoxes with DataTemplates

Without any guidance, the ListBox produces a series of functional but dull strings. To get a better result, you can add a data template to the control to tell it how to display items.

The DataTemplate should be contained within the ListBox's ItemTemplate property. It should contain whatever controls you want to display an item's values. The DataTemplate itself can hold only a single child, so often you'll want to give it a Grid, StackPanel, or other container control and put other controls inside that one.

You use data binding (a big topic that I'm just barely going to touch on in this article) to place pieces of the item's data in the output. For data templates, the data bindings generally have the form "{Binding Path=valuename}," where valuename is the name of a piece of data provided by an item.

Figure 2. A Better Box: A DataTemplate tells this ListBox to display each item's Name and Picture.

For example, the third version of CoursesList uses the following code to create its ListBox.

<ListBox Name="lstCourses" Margin="10" Background="LightGreen">
            <Grid Margin="3" Width="200" Background="White">
                <TextBlock Foreground="Blue"
                     Text="{Binding Path=Name}"
                 Width="50" Height="50"
                 Source="{Binding Path=Picture}"/>
Figure 2 shows the new and improved list.

Figure 3. Detailed DataTemplates: Once you know the secrets of the DataTemplate, you can add all sorts of decorations to a ListBox.

The DataTemplate contains a Grid that holds a TextBlock and an Image.

The TextBlock control's Text property is set to the value "{Binding Path=Name}." This tells the TextBlock to take the currently bound item and display its Name property.

The Image control's Source property is set to "{Binding Path=Picture}" to make it display the current item's Picture property. The Course class's Picture property is of type ImageSource, so it can be displayed in an Image control.

Of course, no self-respecting WPF developer would leave it at that. Now that you know the basic technique, you can fill the DataTemplate with all sorts of bells and whistles. You can display other item properties, add decoration, group items in boxes or expanders, and so forth. Figure 3 shows a prettier variation of the program. It adds a bulged-up bevel to the Grid, and displays each item's DayOfWeek and Fee properties indented. Notice that the ListBox automatically makes an item taller if necessary. In Figure 3, the "Choosing Your Snake" item is taller than "Choosing Your Cat" because its name needed to wrap.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date