Introduction
The XAML ListBox element represents a ListBox in WPF.
The ListBox tag represents a 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 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 snippet sets 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" />
Adding ListBox Items
A ListBox control hosts a collection of ListBoxItems. The following code snippet adds items to a ListBoxcontrol.
<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 preceding 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 TextBoxand 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 as in Figure 2.
Figure 2.
On a button click event handler, we add the content of the TextBox to the ListBox by calling theListBox.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);
}
In the button click event handler, we add the contents of the TextBox to the ListBox by calling theListBox.Items.Add method.
Now if you enter text into the TextBox and click the Add Item button, it will add the contents of the TextBoxto the ListBox.
Figure 3. Adding ListBox items dynamically
Deleting ListBox Items
We can use the 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 as in the following.
<Button Height="23" Margin="226,14,124,0" Name="DeleteButton"
VerticalAlignment="Top" Click="DeleteButton_Click">
Delete Item
</Button>
The button click event handler looks as in following. On this button click, we find the index of the selected item and call the ListBox.Items.RemoveAt method as in the following.
private void DeleteButton_Click(object sender, RoutedEventArgs e)
{
listBox1.Items.RemoveAt
(listBox1.Items.IndexOf(listBox1.SelectedItem));
}