We have seen many requirements where a page has two ListBox controls and left ListBox displays a list of items and using a button we can add items from the left ListBox and add them to the right side ListBox and using the remove button we can remove items from the right side ListBox and add them back to the left side ListBox.
This sample shows how we can move items from one ListBox to another. The final page looks like Figure 1. The Add button adds the selected item to the right side ListBox and removes from the left side ListBox. The Remove button removes the selected item from the right side ListBox and adds back to the left side ListBox.
Figure 1
Figure 2
The following XAML code generates two ListBox control and two Button controls.
<ListBox Margin="11,13,355,11" Name="LeftListBox" />
<ListBox Margin="0,13,21,11" Name="RightListBox" HorizontalAlignment="Right" Width="216" />
<Button Name="AddButton" Height="23" Margin="248,78,261,0" VerticalAlignment="Top"
Click="AddButton_Click">Add >></Button>
<Button Name="RemoveButton" Margin="248,121,261,117"
Click="RemoveButton_Click"><< Remove</Button>
On the Window loaded event, we create and load data items to the ListBox by setting the ItemsSource property to an ArrayList.
Private Sub Window_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
' Get data from somewhere and fill in my local ArrayList
myDataList = LoadListBoxData()
' Bind ArrayList with the ListBox
LeftListBox.ItemsSource = myDataList
End Sub
''' <summary>
''' Generate data. This method can bring data from a database or XML file
''' or from a Web service or generate data dynamically
''' </summary>
''' <returns></returns>
Private Function LoadListBoxData() As ArrayList
Dim itemsList As New ArrayList()
itemsList.Add("Coffie")
itemsList.Add("Tea")
itemsList.Add("Orange Juice")
itemsList.Add("Milk")
itemsList.Add("Mango Shake")
itemsList.Add("Iced Tea")
itemsList.Add("Soda")
itemsList.Add("Water")
Return itemsList
End Function
On Add button click event handler, we get the value and index of the selected item in the left side Listbox and add that to the right side ListBox and remove that item from the ArrayList, which is our data source. The ApplyBinding method simply removes the current binding of the ListBox and rebinds with the updated ArrayList.
Private Sub AddButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
' Find the right item and it's value and index
currentItemText = LeftListBox.SelectedValue.ToString()
currentItemIndex = LeftListBox.SelectedIndex
RightListBox.Items.Add(currentItemText)
If myDataList IsNot Nothing Then
myDataList.RemoveAt(currentItemIndex)
End If
' Refresh data binding
ApplyDataBinding()
End Sub
''' <summary>
''' Refreshes data binding
''' </summary>
Private Sub ApplyDataBinding()
LeftListBox.ItemsSource = Nothing
' Bind ArrayList with the ListBox
LeftListBox.ItemsSource = myDataList
End Sub
Similarly, on the Remove button click event handler, we get the selected item text and index from the right side ListBox and add that to the ArrayList and remove from the right side ListBox.
Private Sub RemoveButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
' Find the right item and it's value and index
currentItemText = RightListBox.SelectedValue.ToString()
currentItemIndex = RightListBox.SelectedIndex
' Add RightListBox item to the ArrayList
myDataList.Add(currentItemText)
RightListBox.Items.RemoveAt(RightListBox.Items.IndexOf(RightListBox.SelectedItem))
' Refresh data binding
ApplyDataBinding()
End Sub
Summary
In this article, we saw how we can transfer items from one ListBox to another by adding and remove items from the ListBoxes.