Transfer data from one ListBox to another in WPF

This article discusses how we can transfer items from one ListBox to another in WPF.
  • 5177
 

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.

untitled.JPG

Figure 1

untitled1.JPG

 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 &gt;&gt;</Button>

<Button Name="RemoveButton" Margin="248,121,261,117"

        Click="RemoveButton_Click">&lt;&lt; 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 ObjectByVal 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 ObjectByVal 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 ObjectByVal 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.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.