WPF

Transferring data from one ListBox to another in WPF

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.
  1. <ListBox Margin="11,13,355,11" Name="LeftListBox" />  
  2. <ListBox Margin="0,13,21,11" Name="RightListBox" HorizontalAlignment="Right" Width="216" />  
  3. <Button Name="AddButton" Height="23" Margin="248,78,261,0" VerticalAlignment="Top"  
  4.         Click="AddButton_Click">Add >></Button>  
  5. <Button Name="RemoveButton" Margin="248,121,261,117"  
  6.         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.
  1. private void Window_Loaded(object sender, RoutedEventArgs e)  
  2. {  
  3.     // Get data from somewhere and fill in my local ArrayList  
  4.     myDataList = LoadListBoxData();  
  5.     // Bind ArrayList with the ListBox  
  6.     LeftListBox.ItemsSource = myDataList;             
  7. }  
  8. /// <summary>  
  9. /// Generate data. This method can bring data from a database or XML file  
  10. /// or from a Web service or generate data dynamically  
  11. /// </summary>  
  12. /// <returns></returns>  
  13. private ArrayList LoadListBoxData()  
  14. {  
  15.     ArrayList itemsList = new ArrayList();  
  16.     itemsList.Add("Coffie");  
  17.     itemsList.Add("Tea");  
  18.     itemsList.Add("Orange Juice");  
  19.     itemsList.Add("Milk");  
  20.     itemsList.Add("Mango Shake");  
  21.     itemsList.Add("Iced Tea");  
  22.     itemsList.Add("Soda");  
  23.     itemsList.Add("Water");  
  24.     return itemsList;  
  25. }  
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.
  1. private void AddButton_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     // Find the right item and it's value and index  
  4.     currentItemText = LeftListBox.SelectedValue.ToString();  
  5.     currentItemIndex = LeftListBox.SelectedIndex;  
  6.     RightListBox.Items.Add(currentItemText);  
  7.     if (myDataList != null)  
  8.     {  
  9.         myDataList.RemoveAt(currentItemIndex);  
  10.     }  
  11.     // Refresh data binding  
  12.     ApplyDataBinding();  
  13. }  
  14. /// <summary>  
  15. /// Refreshes data binding  
  16. /// </summary>  
  17. private void ApplyDataBinding()  
  18. {  
  19.     LeftListBox.ItemsSource = null;  
  20.     // Bind ArrayList with the ListBox  
  21.     LeftListBox.ItemsSource = myDataList;  
  22. }  
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.
  1. private void RemoveButton_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     // Find the right item and it's value and index  
  4.     currentItemText = RightListBox.SelectedValue.ToString();  
  5.     currentItemIndex = RightListBox.SelectedIndex;  
  6.     // Add RightListBox item to the ArrayList  
  7.     myDataList.Add(currentItemText);
  8.     RightListBox.Items.RemoveAt(RightListBox.Items.IndexOf(RightListBox.SelectedItem));  
  9.     // Refresh data binding  
  10.     ApplyDataBinding();  
  11. }  
Summary
 
In this article, we saw how we can transfer items from one ListBox to another by adding and remove items from the ListBoxes.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.
    Membership not found