Here we see how to create a ListBox control and also explains various properties of the ListBox control in xaml.
ListBox control
The WPF ListBox control Contains a list of items that we can select one or more items from the list. A ListBox control is similar to ComboBox but ComboBox has the restriction that mean it display only single item from the list.
Creating ListBox in XAML
The following XAML code sets the name, height and width of ListBox control.
<ListBox Height="80" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ListBox1" VerticalAlignment="Top" Width="120" />
The Width and Height attributes represent the width and the height of a ListBox. The Control can be uniquely identified by Name attribute represents the name of the control.
Important Property of ListBox
The ListBox control has the following property.
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 Items in ListBox
To add the items in the ListBox using items property of the ListBox control.
XAML code
<ListBox Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ListBox1" VerticalAlignment="Top" Width="120">
<ListBoxItem Content="Rohatash" />
<ListBoxItem Content="Monu" />
<ListBoxItem Content="Rajesh" />
<ListBoxItem Content="Sundar" />
</ListBox>
The ListBox looks like this.
Figure1.gif
Setting Background and Foreground Colors.
The Background and Foreground attributes set the background and foreground colors of ListBox. The following code sets background color and foreground color.
XAML code
<ListBox Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ListBox1" VerticalAlignment="Top" Width="237">
<ListBoxItem Content="Rohatash" Background="SpringGreen" Foreground="Blue" />
<ListBoxItem Content="Monu" Background="LightPink" Foreground="Blue" Name="ListBoxItem1" />
<ListBoxItem Content="Rajesh" Foreground="Green" Background="Yellow" />
<ListBoxItem Content="Sundar" Background="Red" Foreground="BlueViolet" />
</ListBox>
Displaying Images in a ListBox
Taking an Image control on the form and apply source property of image control.
XAML code
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ListBox Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ListBox1" VerticalAlignment="Top" Width="237">
<ListBoxItem Content=" Rohatash" Background="SpringGreen" Foreground="Blue" />
<ListBoxItem Content=" Monu" Background="LightPink" Foreground="Blue" Name="ListBoxItem1" />
<ListBoxItem Content="Rajesh" Foreground="Green" Background="Yellow" />
<ListBoxItem Content="Sundar" Background="Red" Foreground="BlueViolet" />
</ListBox>
<Image Height="18" HorizontalAlignment="Left" Margin="12,12,0,0" Name="Image1" Stretch="Fill" VerticalAlignment="Top" Width="39" Source="/WpfApplication72;component/Images/image1.jpg.gif" />
<Image Height="15" HorizontalAlignment="Left" Margin="12,28,0,0" Name="Image2" Stretch="Fill" VerticalAlignment="Top" Width="41" Source="/WpfApplication72;component/Images/file1.jpg" />
</Grid>
</Window>
The image looks like this in ListBox.
Figure2.gif