In this article we will learn how to use
ListBox control in Silverlight 4.
ListBox control
The Silverlight ListBox control provides all
the functionality of a standard (web) ListBox.
The ListBox tag represents a
Silverlight 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="110"
HorizontalAlignment="Left"
Margin="10,10,0,0"
Name="ListBox1"
VerticalAlignment="Top"
Width="255"
Background="SpringGreen">
<ListBoxItem
Content="
Cricket"
Foreground="Blue">
<ListBoxItem.Background>
<ImageBrush
/>
</ListBoxItem.Background>
</ListBoxItem>
<ListBoxItem
Content="Football"
Background="LightPink"
Foreground="Blue"
/>
<ListBoxItem
Content="Hockey"
Foreground="Green"
Background="Yellow"
/>
<ListBoxItem
Content="Tenis"
Background="Red"
Foreground="BlueViolet"
/>
</ListBox>
<Image
Height="23"
HorizontalAlignment="Left"
Margin="10,10,0,0"
Name="Image1"
Stretch="Fill"
VerticalAlignment="Top"
Width="26"
Source="/SilverlightApplication45;component/Images/imagec26.jpg"
/>
<Grid.Background>
<ImageBrush
/>