XAML ListBox

The XAML <ListBox> element represents a WPF ListBox control. 

<ListBox></ListBox>

Similar to any other XAML element, the Width and Height properties of ListBox represent the width and the height of a ListBox. The Name property represents the name of the control that is a unique identifier of a control. The Margin property tells the location of a ListBox on the parent control. The HorizontalAlignment and VerticalAlignment properties are used to set horizontal and vertical alignments.

 

The following code example is used to set the name, height and width of a ListBox control. The code also sets the horizontal alignment to left and the vertical alignment to top. 

<ListBox Margin="10,10,0,13" Name="listBox1" HorizontalAlignment="Left"
VerticalAlignment="Top" Width="194" Height="200" />

The <ListBoxItem> element represents an item of a ListBox. A ListBox is a collection of ListBoxItem elements. The following code example adds several ListBoxItem elements to a ListBox. 

<ListBox Margin="10,10,0,13" Name="listBox1" HorizontalAlignment="Left"
         VerticalAlignment="Top" Width="194" Height="200">
    <ListBoxItem Content="Coffie"></ListBoxItem>
    <ListBoxItem Content="Tea"></ListBoxItem>
    <ListBoxItem Content="Orange Juice"></ListBoxItem>
    <ListBoxItem Content="Milk"></ListBoxItem>
    <ListBoxItem Content="Iced Tea"></ListBoxItem>
    <ListBoxItem Content="Mango Shake"></ListBoxItem>
</ListBox>

Each ListBoxItem is its own independent element and can have its own properties.

 

The Foreground and Background attributes of ListBoxItem represents the background and foreground colors of the item. The following code snippet sets the background and foreground colors of a ListBoxItem. 

<ListBoxItem Background="LightCoral" Foreground="Red" Content="Coffie"></ListBoxItem>

The FontFamily, FontSize and FontWeight are used to set a font of a ListBoxItem. The following code snippet sets the font to verdana, the size to 12 and bold of a ListBoxItem. I set the following properties of ListBoxItems. 

<ListBoxItem Background="LightCoral" Foreground="Red" Content="Coffie"
                         FontFamily="Verdana" FontSize="12" FontWeight="Bold"></ListBoxItem>
I set the following properties of ListBoxItems.

<ListBoxItem Background="LightCoral" Foreground="Red" Content="Coffie"
                         FontFamily="Verdana" FontSize="12" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Background="LightGray" Foreground="Black" Content="Tea"
                         FontFamily="Georgia" FontSize="14" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Background="LightBlue" Foreground="Purple" Content="Orange Juice"
                         FontFamily="Verdana" FontSize="12" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Background="LightGreen" Foreground="Green" Content="Milk"
                         FontFamily="Georgia" FontSize="14" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Background="LightBlue" Foreground="Blue" Content="Iced Tea"
                         FontFamily="Verdana" FontSize="12" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Background="LightSlateGray" Foreground="Orange" Content="Mango Shake"
                         FontFamily="Georgia" FontSize="14" FontWeight="Bold"></ListBoxItem>

In this article, I explained how to create and use a ListBox control available in WPF. We saw how to add items to a ListBox, change item properties and add images add check boxes. In the end of this article, we saw how data binding works in ListBox and how to bind a ListBox with data coming from objects, databases and other controls.

To avoid duplicate content, the detailed tutorial is moved here: WPF ListBox Tutorial