ListBox in WPF

WPF ListBox Control

A ListBox control is an items control that works as a ListBox control but only one item from the collection is visible at a time and clicking on the ListBox makes the collection visible and allows users to pick an item from the collection. Unlike a ListBox control, a ListBox does not have multiple item selection.

This article demonstrates how to create and use a ListBox control in WPF.

Introduction

The ListBox element represents a ListBox control in XAML.

<ListBox></ListBox>

The Width and Height properties represent the width and the height of a ListBox. The x:Name property represents the name of the control, which is a unique identifier of a control. The Margin property sets the location of a ListBox on the parent control. The HorizontalAlignment and VerticalAlignment properties are used to set horizontal and vertical alignments.

The code snippet in Listing 1 creates a ListBox control and sets the name, height, and width of a ListBox control. The code also sets the vertical and horizontal alignment of the ListBox and sets the margin.

<ListBox x:Name="ListBox1" Width="200" Height="200"
          VerticalAlignment="Top" HorizontalAlignment="Left"
            Margin="10,10,0,0">
</ListBox>

Listing 1

The output looks like Figure 1.



Figure 1

The IsSelected property of the ListBox control sets an item as currently selected item in the ListBox. The following code snippet sets the IsSelected property of a ListBox.

<ListBoxItem Content="Coffie" IsSelected="True" />

Adding ListBox Items

<ListBox Margin="10,10,0,13" Name="ListBox1" HorizontalAlignment="Left"
         VerticalAlignment="Top" Width="194" Height="200">
            <ListBoxItem Content="PREETY" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Content="AISH" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Content="KAREENA" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Content="CELINA" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Content="LARA" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Content="AMRITA" FontWeight="Bold"></ListBoxItem>
</ListBox>

Listing 2

The above code generates Figure 2.



Figure 2

Adding and Deleting ListBox Items at Run-time

In the previous section, we saw how to add items to a ListBox at design-time from XAML. Now we will add items to a ListBox at run-time.

The Items property of the ListBox represents ListBox items, which is an ItemsCollection object. To add and remove items from the collection, we use Add and Remove or RemoveAt methods of the ItemsCollection.
Let's change our UI and add a TextBox and a button control to the page. The XAML code in Listing 3 adds a TextBox and a Button controls to UI.

<Canvas>
        <TextBox x:Name="TextBox1" Width="200" Height="25"  Canvas.Left="10" Canvas.Top="10"/>
       <Button x:Name="AddButton" Width="80" Height="25" Canvas.Left="220" Canvas.Top="10" Content="Add Item" Click="AddButton_Click" />
         <ListBox Margin="10,50,0,13" Name="ListBox1" HorizontalAlignment="Left"
         VerticalAlignment="Top" Width="194" Height="200">
            <ListBoxItem Content="PREETY" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Content="AISH" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Content="KAREENA" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Content="CELINA" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Content="LARA" FontWeight="Bold"></ListBoxItem>
            <ListBoxItem Content="AMRITA" FontWeight="Bold"></ListBoxItem>
        </ListBox>
    </Canvas>

Listing 3

The final UI looks like Figure 3.



Figure 3

On button click event handler, we add the content of TextBox to the ListBox by calling ListBox.Items.Add method. The code in Listing 4 adds TextBox contents to the ListBox items.

private void AddButton_Click(object sender, RoutedEventArgs e)
{
    ListBox1.Items.Add(TextBox1.Text);
}

Listing 4

On button click event handler, we add the content of TextBox to the ListBox by calling ListBox.Items.Add method.
Now if you enter text in the TextBox and click Add Item button, it will add contents of the TextBox to the ListBox. See Figure 4.



Figure 4

We can use ListBox.Items.Remove or ListBox.Items.RemoveAt method to delete an item from the collection of items in the ListBox. The RemoveAt method takes the index of the item in the collection.

Now, we modify our application and add a new button called Delete Item. The XAML code for this button looks is listed in Listing 5.

<Button x:Name="DeleteButton" Width="80" Height="25"
         Canvas.Left="300" Canvas.Top="10"
        Click="DeleteButton_Click" Content="Delete Item"/>

Listing 5

The new page looks like Figure 5.



Figure 5

The button click event handler looks like Listing 6. On this button click, we find the index of the selected item and call ListBox.Items.RemoveAt method and pass the selected item of the ListBox. Now if you click on the Delete button click, the selected item will be removed from the ListBox items.

private void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    ListBox1.Items.RemoveAt
    (ListBox1.Items.IndexOf(ListBox1.SelectedItem));
}

Listing 6

Formatting and Styling ListBox Items

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

<ListBoxItem Content="PREETY" Background="LightPink" Foreground="Green">
</ListBoxItem>

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

<ListBoxItem Content="PREETY" FontWeight="Bold" Background="LightPink" Foreground="Green"
FontFamily="Verdana" FontSize="12" >
</ListBoxItem>

The code in Listing 7 sets the formatting of the ListBox items.

<ListBoxItem Content="PREETY" FontWeight="Bold" Background="LightPink" Foreground="Green"
FontFamily="Verdana" FontSize="12" >
</ListBoxItem>
<ListBoxItem Content="AISH" FontWeight="Bold" Background="LightGray" Foreground="Red" FontFamily="Verdana" FontSize="12">
</ListBoxItem>
<ListBoxItem Content="KAREENA" FontWeight="Bold" Background="LightBlue"    Foreground="Yellow" FontFamily="Verdana" FontSize="12">
</ListBoxItem>
<ListBoxItem Content="CELINA" FontWeight="Bold" Background="LightGoldenrodYellow" Foreground="Blue"                        FontFamily="Verdana" FontSize="12">
</ListBoxItem>
<ListBoxItem Content="LARA" FontWeight="Bold" Background="LightGreen" Foreground="Pink" FontFamily="Verdana" FontSize="12">
</ListBoxItem>
<ListBoxItem Content="AMRITA" FontWeight="Bold" Background="LightYellow" Foreground="Black" FontFamily="Verdana" FontSize="12">
</ListBoxItem>

Listing 7

The new ListBox looks like Figure 6.



Figure 6

Data Binding

The ItemsSource property of ListBox is used to bind a collection of IEnuemerable such as an Array. The code listed in Listing 11 creates an array of strings.

private string[] LoadListBoxData()
        {
            string[] strArray =
            {
                "PREETY",
                "AISH",
                "KAREENA",
                "CELINA",
                "LARA",
                "AMRITA"               
            };
            return strArray;
         }

Listing 11

The following line of code sets the ItemsSource property of a ListBox to the array.

ListBox1.ItemsSource = LoadListBoxData();

Result would be like figure 7:



Figure 7

Summary

In this article, I discussed how to create and use a ListBox control available in WPF. We saw how we can add items to a ListBox, change item properties. In the end of this article, we saw how data binding works in ListBox.