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 />