In this article we will learn how to use ListBox control in WPF.
ListBox control
The WPF ListBox control Contains a list of selectable items.
The ListBox tag represents a WPF ListBox control in XAML.
<ListBox></ListBox>
The Width and Height attributes represent the width and the height of a ListBox. The Control can be uniquely identified by x:Name attribute represents the name of the control.
The following XAML code sets the name, height and width of ListBox control.
<ListBox Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ListBox1"VerticalAlignment="Top" Width="120" />
Properties - ListBox control has the following properties.
Figure 1.
Items - Items collection property is used to add the items in the ListBox control.
Foreground - The Foreground attributes of ListBoxItem represents the foreground colors of the item.
Background - The Background attributes of ListBoxItem represents the background colors of the item.
Adding ListBox Items
To add ListBox items in the ListBox using items property of the ListBox control.
Figure 2.
XAML code
<ListBox Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ListBox1"VerticalAlignment="Top" Width="120">
<ListBoxItem Content="Cricket" />
<ListBoxItem Content="Football" />
<ListBoxItem Content="Hockey" />
<ListBoxItem Content="Tenis" />
</ListBox>
Formatting ListBox Items
Select every items in the ListBox and set the foreground and background property.
Figure 3.
XAML code
<ListBox Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ListBox1"VerticalAlignment="Top" Width="120">
<ListBoxItem Content="Cricket" Background="SpringGreen" Foreground="Blue" />
<ListBoxItem Content="Football" Background="LightPink" Foreground="Blue" />
<ListBoxItem Content="Hockey" Foreground="Green" Background="Yellow" />
<ListBoxItem Content="Tenis" Background="Red" Foreground="BlueViolet" />
</ListBox>
The form looks like this.
Figure 4.
Displaying Images in a ListBox
Taking an Image control on the form and apply source property of image control.
Figure 5.
The form looks like this.
Figure 6.
XAML code
<ListBox Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ListBox1"VerticalAlignment="Top" Width="237">
<ListBoxItem Content="Cricket" Background="SpringGreen" Foreground="Blue" />
<ListBoxItem Content="Football" Background="LightPink" Foreground="Blue"Name="ListBoxItem1" />
<ListBoxItem Content="Hockey" Foreground="Green" Background="Yellow" />
<ListBoxItem Content="Tenis" Background="Red" Foreground="BlueViolet" />
</ListBox>
<Image Height="18" HorizontalAlignment="Left" Margin="12,12,0,0" Name="Image1"Stretch="Fill" VerticalAlignment="Top" Width="39"Source="/WpfApplication7;component/Images/flowers-image.jpg" />
<Image Height="15" HorizontalAlignment="Left" Margin="12,28,0,0" Name="Image2"Stretch="Fill" VerticalAlignment="Top" Width="41"Source="/WpfApplication7;component/Images/imagec26.jpg" />
For example
Taking a ListBox control and TextBox control on the form.
The form looks like this.
Figure 7.
XAML code
<TextBox Name="TextBox1" Height="30" Margin="190,194,129,87"></TextBox>
<ListBox Name="lb" Height="55" SelectionChanged="PrintText" SelectionMode="Single"Margin="190,106,129,150">
<ListBoxItem>Item 1</ListBoxItem>
<ListBoxItem Name="ListBoxItem1">Item 2</ListBoxItem>
<ListBoxItem>Item 3</ListBoxItem>
<ListBoxItem>Item 4</ListBoxItem>
<ListBoxItem>Item 5</ListBoxItem>
<ListBoxItem>Item 6</ListBoxItem>
<ListBoxItem>Item 7</ListBoxItem>
<ListBoxItem>Item 8</ListBoxItem>
<ListBoxItem>Item 9</ListBoxItem>
<ListBoxItem>Item 10</ListBoxItem>
</ListBox>
Now select ListBox control and press F4 for event and choose SelectionChanged event.
Figure 8.
Now double click on the selected event and add the following code.
VB.NET code
Private Sub PrintText(ByVal sender As System.Object, ByVal e AsSystem.Windows.Controls.SelectionChangedEventArgs)
Dim lbsender As ListBox
Dim li As ListBoxItem
lbsender = CType(sender, ListBox)
li = CType(lbsender.SelectedItem, ListBoxItem)
TextBox1.Text = " You selected " & li.Content.ToString & "."
End Sub
Now run the application and test it.
Figure 9.