WPF ListBox

Introduction

The ListBox tag represents a Silverlight ListBox control in XAML.

<ListBox></ListBox>

The Width and Height properties represent the width and the height of a ListBox. The Name property represents the name of the control, which 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 snippet sets the name, height, and width of a ListBox control. The code also sets horizontal alignment to left and vertical alignment to top.

<ListBox Margin="10,10,0,13" Name="listBox1" HorizontalAlignment="Left"

VerticalAlignment="Top" Width="194" Height="200" />

Adding ListBox Items

A ListBox control hosts a collection of ListBoxItem. The following code snippet adds items to a ListBox control.

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

The above code generates Figure 1.

Figure 1. ListBox with items

Adding ListBox Items Dynamically

In the previous section, we saw how to add items to a ListBox at design-time from XAML. We can add items to a ListBox from the code.

Let's change our UI and add a TextBox and a button control to the page. The XAML code for the TextBox and Button controls look like following:

<TextBox Height="23" HorizontalAlignment="Left" Margin="8,14,0,0"

Name="textBox1" VerticalAlignment="Top" Width="127" />

<Button Height="23" Margin="140,14,0,0" Name="button1" VerticalAlignment="Top"

HorizontalAlignment="Left" Width="76" Click="button1_Click">

Add Item

</Button>

The final UI looks like Figure 2.

Figure 2.

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

private void button1_Click(object sender, RoutedEventArgs e)

{

listBox1.Items.Add(textBox1.Text);

}

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.

Figure 3. Adding ListBox items dynamically

Deleting ListBox Items

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 like below.

<Button Height="23" Margin="226,14,124,0" Name="DeleteButton"

VerticalAlignment="Top" Click="DeleteButton_Click">

Delete Item</Button>

The button click event handler looks like following. On this button click, we find the index of the selected item and call ListBox.Items.RemoveAt method as following.

private void DeleteButton_Click(object sender, RoutedEventArgs e)

{

listBox1.Items.RemoveAt

(listBox1.Items.IndexOf(listBox1.SelectedItem));

}

Formatting and Styling

Formatting 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 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 font verdana, size 12, and bold of a ListBoxItem.

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

The new ListBox looks like Figure 4.

Figure 4. Formatted ListBox