Charles Petzold

ListBox Templates

January 29, 2006
Weekend in Roscoe, NY

As has been often noted, one of the more interesting and useful features of the Windows Presentation Foundation is the use of templates, which separate the functionality of a control from its look and feel. A ListBox, for example, lets the user pick one item out of many. That much is fixed. But the common default appearance of the ListBox results from its default template. The ListBox is basically a Border element containing a ScrollViewer containing a StackPanel, which presents the items. It is possible for an application to change the look and feel of the ListBox by substituting its own templates.

Generally, the definition of templates is done in XAML rather than code, but the ColorGrid.cs file shows a ColorGrid control that inherits from ListBox and mimics the little color-selection grid found in Microsoft Word in the Format Background menu and the Formatting Toolbar. The first few statements of the constructor create a FrameworkElementFactory based on a UniformGrid panel. This becomes the ItemsPanel property of the ListBox. That's all that's necessary to force ListBox to use a UniformGrid for displaying items rather than a StackPanel

The constructor continues by creating a template for the items themselves. This template is built around the Rectangle element with a fixed size and margin. Notice the SetBinding call, which indicates that the Fill property of each Rectangle is the ListBox item itself, which is of type Brush. The constructor concludes by assigning the Brush array to the ItemsSource property of the ListBox

The SelectColorFromGrid.cs file shows the color grid in action between two do-nothing buttons that let you examine how keyboard tabbing works. (The SelectColorFromGrid.csproj project file rounds out the project.) Notice the SetBinding call, which binds the selected item to the Background property of the window.

Of course, creating such a control with traditional means is considerably more complex. My recent WinForms book does a similar control in 5 pages of code (pages 204-209).

What really impressed me, however, was the keyboard interface that mysteriously appears when a UniformGrid is substituted for the StackPanel. The Up key moves up, the Down key moves down, the Left key moves left, and the Right key moves right, and Home, End, Page Up, and Page Down work as well. There must be some generalized keyboard handling that looks at the actual relative locations of the items on the screen.

I know the keyboard handling is not based specifically on UniformGrid because I did a custom RadialPanel and stuck that into a ListBox and it acquired keyboard handling as well. Each of the arrow keys moved the cursor in a semi-circle. For example, if the selected item was on the left side of the circle, then Up and Down would move along the left semi-circle between the topmost and bottom-most items. To continue around the circle from that point, you'd need to switch to the Right key.

Book Progress:

Yesterday I hit the 400 book pages mark. My goal of 5 books page per calendar day starting November 1st implies that I'm about a week behind. It appears now that Part 1 of the book (which sticks entirely to C# code) will be about 400 pages long. I'll try to post a Table of Contents for Part 1 later this week.