Introduction
In Visual Studio 2008, thanks to the introduction of Windows Presentation Foundation, the humble ListBox finally comes of age. In previous incarnations, if you wanted to do anything but the most basic tweak of the user interface of a ListBox you usually had to resort to using OwnerDraw techniques and your options were quite limited. WPF really lifts the lid off the ListBox. (Sorry - I just couldn't resist that one!).
Now you can create very complex ListBoxes with ListBoxItems that contain multiple combinations of elements and other controls. In fact, you don't even need to contain them in ListBoxItems; if you simply want a "list" of, for instance, a set of images then WPF is smart enough to know how to render these correctly for you. And the selection process works exactly as if you had the more usual list of strings, complete with all the SelectedIndex, IsSelected, etc information that you would expect.
Add to this the power of WPF Control Templates and time-saving WPF Styles and you really do have a tool set that can be reworked in ways that were unimaginable with Windows Forms ListBoxes.
Plain ListBox of Strings
I'm going to begin with some relatively simple lists, however, just to introduce the basic steps. All the ListBoxes in this article contain strings - pretty much what you would do with Windows Forms ListBoxes. However, with relatively little code you easily change the appearance of the items listed.
Here's the XAML code for a ListBox comprising six String ListBoxItems
<ListBox Name="ListBox1" FontSize="13" Padding="2"
Margin="3" Background="AliceBlue" Width="104" Height="122"
HorizontalAlignment="Center" VerticalAlignment="Center">
<ListBoxItem Content="First Item"/>
<ListBoxItem >Second ItemListBoxItem>
<ListBoxItem>Third ItemListBoxItem>
<ListBoxItem>Fourth ItemListBoxItem>
<ListBoxItem >Fifth ItemListBoxItem>
<ListBoxItem>Sixth ItemListBoxItem>
ListBox>
Fairly standard stuff. The only point to note is that I used the full markup to assign the string to the Content property in the first ListBoxItem. As you can see from the five items that follow, this isn't necessary - the ListBoxItems will take whatever characters you enter between those opening and closing tags and treat them as content.
The less-than-mind blowing result is:-
Alternating Backgrounds
In Windows Forms you can set the BackColor to a color of your choice but, unless you use OwnerDraw methods you can only pick one. With WPF you can have different Background colors for each item. As that would be a bit garish, we'll settle for the kind of alternating line colors that you often see on accounts and spreadsheets. Something like this:
The following XAML will produce the above result:
<ListBox Grid.ColumnSpan="1" Margin="3" Name="ListBox2"
Width="104" Height="114" Grid.Column="1"
FontSize="13" >
<ListBoxItem Background="LightGreen">First ItemListBoxItem>
<ListBoxItem Background="LightYellow">Second ItemListBoxItem>
<ListBoxItem Background="LightGreen">Third ItemListBoxItem>
<ListBoxItem Background="LightYellow">Fourth ItemListBoxItem>
<ListBoxItem Background="LightGreen">Fifth ItemListBoxItem>
<ListBoxItem Background="LightYellow">Sixth ItemListBoxItem>
<ListBoxItem Background="LightGreen">Seventh ItemListBoxItem>
ListBox>
As you can see, all I have done is to assign the required color to each ListBoxItem's Background.
And if you're thinking "That's a whole lot of repetition of property values there", you're right. There are other less repetitive ways of assigning the values, one of which is to use Styles (which I will cover in my WPF Styles Part 2 item). It's not really a problem when there are only a few items in the list, and you are hand building it anyway, but if the list is long or you are using DataBinding to populate it, then you will need to use Styles and/or Control Templates, all of which I hope to get round to covering in future blogs.
In the meantime, one shortcut you can use is to assign a default value to the Background and Foreground, then override these for every alternate row (ListBoxItem). Or every third item or whatever layout takes your fancy!
Using this approach, the following example changes both the Background and Foreground colors for each alternate row:
<ListBox Grid.ColumnSpan="1" Margin="3" Name="ListBox3"
Width="104" Height="112" FontSize="13"
Background="DarkSeaGreen" Foreground="Yellow">
<ListBoxItem Background="DarkGreen" Foreground="White">First ItemListBoxItem>
<ListBoxItem >Second ItemListBoxItem>
<ListBoxItem Background="DarkGreen" Foreground="White">Third ItemListBoxItem>
<ListBoxItem>Fourth ItemListBoxItem>
<ListBoxItem Background="DarkGreen" Foreground="White">Fifth ItemListBoxItem>
<ListBoxItem>Sixth ItemListBoxItem>
ListBox>
The result of which is:
ListBox With Borders
Of course, one of the great things about WPF is the way you can wrap layer after layer of controls one inside the other like Russian Dolls to create the effect you want. A fairly simple example of this might be:
All I've done here is to wrap the listbox inside a couple of Borders to create the two outer rounded rectangles. The Borders each have a small value assigned to the CornerRadius property in order to achieve that rounded look:
<Border BorderBrush="Navy" BorderThickness="3" CornerRadius="3">
<Border BorderBrush="Aqua" BorderThickness="2" CornerRadius="3">
For better presentation, I have actually placed the Borders and ListBox inside a Canvas to lock them in place, but then placed the whole thing inside a ViewBox so that as the form is resized, the bordered ListBox also resizes proportionately in line with the size of the Window.
Here's the complete code:
<Window x:Class="Window4"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window4" Height="300" Width="300">
<Grid>
<Viewbox Margin="4,6,4,6">
<Canvas Width="86" Height="159" Background="White"
Margin="1">
<Border BorderBrush="Navy" BorderThickness="3" CornerRadius="3">
<Border BorderBrush="Aqua" BorderThickness="2" CornerRadius="3">
<ListBox Canvas.Top="1" Canvas.Left="3" Padding="2"
Background="LightBlue">
<ListBoxItem>First ItemListBoxItem>
<ListBoxItem >Second ItemListBoxItem>
<ListBoxItem>Third ItemListBoxItem>
<ListBoxItem>Fourth ItemListBoxItem>
<ListBoxItem>Fifth ItemListBoxItem>
<ListBoxItem>Sixth ItemListBoxItem>
ListBox>
Border>
Border> Canvas> Viewbox>Grid>
Window>
Of course, you don't get the sense of this proportional resizing in this HTML page, but if you copy and paste the XAML into a project and run it you will see that with only a small bit of markup you have enhanced the usability of the display.
Listing Fonts
The last example in this blog article shows another advantage of the WPF ListBox over the Windows Forms one. Simply by assigning the Font and/or FontStyle and/or FontWeight you can have different ListBoxItems displayed using those different fonts.
Let's take a hypothetical case where you want to allow the user to use one of eight different font/styles. Something like this:-
This XAML is all that is needed for those ListBoxItems to be rendered in the appropriate fonts and styles:
<ListBoxItem FontFamily="Arial" >ArialListBoxItem>
<ListBoxItem FontFamily="Arial" FontStyle="Italic" >Arial ItalicListBoxItem>
<ListBoxItem FontFamily="Arial" FontWeight="Bold" FontStyle="Normal" >Arial BoldListBoxItem>
<ListBoxItem FontFamily="Arial" FontWeight="Bold" FontStyle="Italic">Arial Bold ItalicListBoxItem>
<ListBoxItem FontFamily="Georgia" >GeorgiaListBoxItem>
<ListBoxItem FontFamily="Georgia" FontStyle="Italic">Georgia ItalicListBoxItem>
<ListBoxItem FontFamily="Georgia" FontWeight="Bold" FontStyle="Normal" >Georgia BoldListBoxItem>
<ListBoxItem FontFamily="Georgia" FontWeight="Bold" FontStyle="Italic" >Georgia Bold ItalicListBoxItem>
Really nothing to it, is there? Simply assign the values you want and WPF dutifully renders the individual display exactly according to your wishes.
We've only scratched the surface of WPF ListBoxes and I'll certainly be writing more on this later. But - even with plain old strings - I think you can see just how versatile WPF can be if you want the display to be rendered outside the confines of the straightjacket you may have been used to.