Binding from one ListBox to another ListBox?

Question

I am trying to bind a ListBox to another ListBox within the same window. The left hand sided Listbox has data in it that one can select. But I want a user to be able to click on the item(s) in the left hand listbox and those same item(s) would be displayed in the other listbox on the right hand side.

You are wanting to just display the same item in the other ListBox, not a collection that exists on the selected item? If you select a different item should the item in the other list box be removed or remain in the list box? Let's see what you have so far and get it figured out. — HoboCannibaL, Feb 22 '16 at 01:22
Gives some code to know how you filled first ListBox.The selected item selection is change with respect to the way of adding values in it. — Shahid Neermunda, Feb 22 '16 at 02:24

score 2 · Answer 1 · edited May 23 '17 at 11:50

2

EDITED: Of course you can bind a UI property to another UI property (Dependency Property actually) using ElementName, but I recommend to bind the properties to one view model. See a simplified example below.

View model:

public ObservableCollection<ItemObject> Items  { get; set; }
public ObservableCollection<ItemObject> SelectedItems { get; set; }

Left:

<ListBox ItemsSource="{Binding Items}" SelectedItems="{Binding SelectedItems}" />

(Note that there is no SelectedItems dependency property actually. See question like: Select multiple items from a DataGrid in an MVVM WPF project)

Right:

<ListBox ItemsSource="{Binding SelectedItems}" />

This works fine. Furthermore, with this approach, the list on the right hand can be customized with ease (eg order, filter, ... by using CollectionView).

private ICollectionView _collectionView;
private ICollectionView _CollectionView {
    get { return _collectionView
        ?? (_collectionView = CollectionViewSource.GetDefaultView(SelectedItems)); }
}
public ICollectionView FilteredItems { 
    get { _CollecitionView.Filter(...); }
}

<ListBox ItemsSource={"Binding FilteredSelectedItems"} />

Such an MVVM approach is sometimes laborious, but eventually found as beneficial.

edited May 23 '17 at 11:50

Community

1
1

answered Feb 22 '16 at 03:49

dytori

487
4
12

Exactly what is wrong binding one UI item to another? – ΩmegaMan Feb 22 '16 at 04:43
I guess binding to VM leads to better flexibility in app design - how about eg showing last two items of those a user selected? But yes question is how to binding to another UI property, and it is not wrong itself. Just suggesting an alternative approach. – dytori Feb 22 '16 at 08:49
Your question about showing the last two items is unclear, is that directed to me or in general? My example shows all items selected in the listbox as per the request of the user. The `TextBlock` shows only what is reported in the `SelectedItem` field which by design is only one item. If more items are needed to be shown in the `TextBlock` then it needs to be bound to the `SelectedItems` and a converter needs to be written to return a string from the list of data. But the OP is not requesting that...I only show it to provide an understanding of the differences. – ΩmegaMan Feb 22 '16 at 14:51
Please understand that i am not challenging you...and i am not referring to `TextBlock` for showing "the two items". Just suggesting that, with VM, one can filter `SelectedItems` easily for example. – dytori Feb 23 '16 at 01:07
I understand. :-) All I am trying to do is make your answer better so to not leave open ended statements; what appears obvious to you may not be to others. Just update your answer with those thoughts to help the user. – ΩmegaMan Feb 23 '16 at 12:40
Thank you for your comment, and you are right. Will try to help community more carefully. – dytori Feb 25 '16 at 07:16

ΩmegaMan · Answer 2 · 2016-02-22T04:38:40.177

You name the first listbox, then any other control on the xaml will bind to that control using it's name in the ElementName attribute of the binding.

For example there are two listboxes and one text box. The top listbox has multiselections and those selection(s) are shown on the lower listbox. While the textbox only gets the first item selected.

<StackPanel Orientation="Vertical">
    <StackPanel.Resources>
        <converters:PathToFilenameConverter x:Key="FilenameConverter" />
        <x:Array x:Key="FileNames" Type="system:String">
            <system:String>C:\Temp\Alpha.txt</system:String>
            <system:String>C:\Temp\Beta.txt</system:String>
            <system:String>C:\Temp\Gamma.txt</system:String>
        </x:Array>
    </StackPanel.Resources>

    <ListBox  Name="lbFiles"
              SelectionMode="Multiple"
              ItemsSource="{StaticResource FileNames}"
              Margin="10"/>

    <ListBox ItemsSource="{Binding SelectedItems, ElementName=lbFiles }"  Margin="10" />

    <TextBlock Text="{Binding SelectedItem, 
                      ElementName=lbFiles,
                      Converter={StaticResource FilenameConverter}}"
               Margin="10" />

</StackPanel>

Note...the code is binding using the SelectedItems property for the lower list box and not SelectedItem used by the TextBlock.

As an aside, another answer has the use of an ObservableCollection, that is not needed unless the array is dynamically changing; otherwise any array can be used. Depending on loading, say from a VM, it may need to adheres to the INotifyPropertyChanged.

Binding from one ListBox to another ListBox?

2 Answers2