将两个 Listbox 中的 SelectedItems 绑定到一个 Listbox

Question

How can I bind SelectedItems from two ListBoxes to one Listbox ? I'm using MVVM pattern and I set binding for SelectedItems for two ListBoxes to property in my ViewModel :

<ListBox SelectedItemsList="{Binding EmployeeViewM.SelectedAll, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}"/>

Then I bind SelectedAll property as an ItemsSource for my third ListBox :

<ListBox ItemsSource="{Binding EmployeeViewM.SelectedAll, Mode=TwoWay}" SelectionMode="Single" >

The property on my ViewModel :

Private _selectedAll As IList = New ArrayList()

Public Property SelectedAll() As IList
    Get
        Return _selectedAll
    End Get
    Set
        _selectedAll = Value
        RaisePropertyChanged("SelectedAll")
    End Set
End Property

When I select items from my first ListBox they will appear on my third Listbox - as they should. But when I select items from second ListBox as well, items selected previously from the first one disappear and I can see only items selected from the second one. How can I handle third ListBox binding to get selected items from the first ListBox and from the second as well?

Thank you for any suggestions

Answer 1

The simple way (but not the best) to do this is to Bind the Two ListBox to two attributes (FisrtSelectedItem and SecondSelectedItem) in The VM. In the setter of two Attributes add RaisePropertyChanged("SelectedAll").

The SelectedAll attribute will be the union of Two Attributes

Public Property SelectedAll() As IList
    Get
         _selectedAll.Clear()
         _selectedAll.AddRang(_fisrtSelectedItem)
         _selectedAll.AddRang(_secondSelectedItem)        
         Return _selectedAll
    End Get
    Set
        _selectedAll = Value
        RaisePropertyChanged("SelectedAll")
    End Set
End Property

The other Way is to bind SelectionChanged Event with interactivity see how to handle WPF listbox selectionchanged event using MVVM

Answer 2

Well first off I would advise using ObservableCollection for your list of employees. then have a second list bound to the Third ListBox to store the Employees selected from the first two ListBoxes like so.....

    Private _SelectedItem As Employee
    Public Property SelectedItem() As Employee
        Get
            Return _SelectedItem
        End Get
        Set(ByVal value As Employee)
            _SelectedItem = value

            Dim emp As Employee = (From e In SelectedEmployees
                                   Where e.ID = value.ID Select e).FirstOrDefault()
            If emp Is Nothing Then
                SelectedEmployees.Add(value)
            End If
        End Set
    End Property

    Private _selectedAll As New ObservableCollection(Of Employee)
    Public Property SelectedAll() As ObservableCollection(Of Employee)
        Get
            Return _selectedAll
        End Get
        Set
            _selectedAll = Value
            RaisePropertyChanged("SelectedAll")
        End Set
    End Property

    Private _SelectedEmployees As New ObservableCollection(Of Employee)
    Public Property SelectedEmployees() As ObservableCollection(Of Employee)
        Get
            Return _SelectedEmployees
        End Get
        Set
            _SelectedEmployees = Value
            RaisePropertyChanged("SelectedEmployees")
        End Set
    End Property

End Class

and your XAML....

    <StackPanel>
        <ListBox ItemsSource="{Binding SelectedAll, Mode=TwoWay}" SelectionMode="Single" SelectedItem="{Binding SelectedItem}" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding RecordID}" />
                        <TextBlock Grid.Column="1" Text="{Binding ID}"/>
                        <TextBlock Grid.Column="2" Text="{Binding FName}" />
                        <TextBlock Grid.Column="3" Text="{Binding SName}" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <ListBox ItemsSource="{Binding SelectedAll, Mode=TwoWay}" SelectionMode="Single" SelectedItem="{Binding SelectedItem}" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding RecordID}" />
                        <TextBlock Grid.Column="1" Text="{Binding ID}"/>
                        <TextBlock Grid.Column="2" Text="{Binding FName}" />
                        <TextBlock Grid.Column="3" Text="{Binding SName}" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <ListBox ItemsSource="{Binding SelectedEmployees}" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding RecordID}" />
                        <TextBlock Grid.Column="1" Text="{Binding ID}"/>
                        <TextBlock Grid.Column="2" Text="{Binding FName}" />
                        <TextBlock Grid.Column="3" Text="{Binding SName}" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

    </StackPanel>

Of course the XAML can be reduced, but for the purpose of this demo it illustrates the processes

And for completeness, here is the class that i created for the List of employees...

Public Class Employee
Private _ID As Integer

Public Property ID() As Integer
    Get
        Return _ID
    End Get
    Set(ByVal value As Integer)
        _ID = value
    End Set
End Property

Private _FName As String
Public Property FName() As String
    Get
        Return _FName
    End Get
    Set(ByVal value As String)
        _FName = value
    End Set
End Property

Private _SName As String
Public Property SName() As String
    Get
        Return _SName
    End Get
    Set(ByVal value As String)
        _SName = value
    End Set
End Property
End Class

And the constructor in the VM looked like this....

Public Sub New()
    Me.SelectedAll.Add(New Employee() With {.ID = 1, .FName = "John", .SName = "Doe"})
    Me.SelectedAll.Add(New Employee() With {.ID = 2, .FName = "Jane", .SName = "Doe"})
    Me.SelectedAll.Add(New Employee() With {.ID = 3, .FName = "Gill", .SName = "Doe"})
    Me.SelectedAll.Add(New Employee() With {.ID = 4, .FName = "Fred", .SName = "Doe"})
    Me.SelectedAll.Add(New Employee() With {.ID = 5, .FName = "Sam", .SName = "Doe"})
    Me.SelectedAll.Add(New Employee() With {.ID = 6, .FName = "Harry", .SName = "Doe"})

End Sub