Binding multi listbox itemsouce with 1 ObserverableCollection of usercontrol

Question

I have two listbox define below:

<ListBox x:Name="RemoteListBox" HorizontalAlignment="Right" Margin="0,88.5,8,0" 
             Width="382.5" 
             HorizontalContentAlignment="Stretch"                 
             ItemsSource ="{Binding RemoteItemsList}"                                 
             SelectedIndex="0">            
    </ListBox>
    <ListBox x:Name="LibraryListBox" 
             Margin="4.5,88.5,437,0"
             HorizontalContentAlignment="Stretch"
             ItemsSource="{Binding LibraryItemsList}"                 
             SelectedIndex="0">                      
    </ListBox>

My viewmodel

    private ObservableCollection<MotionTitleItem> _remoteItemsList;
    public ObservableCollection<MotionTitleItem> RemoteItemsList
    {
        get { return _remoteItemsList; }
        set
        {
            _remoteItemsList = value;
            NotifyPropertyChanged("RemoteItemsList");
        }
    }
    private ObservableCollection<MotionTitleItem> _libraryItemsList

    public ObservableCollection<MotionTitleItem> LibraryItemsList
    {
        get { return _libraryItemsList; }
        set
        {
            _libraryItemsList = value;
            NotifyPropertyChanged("LibraryItemsList");
        }
    }

I bind two ListBox ItemSource with a ObserverableCollection define below:

var listMotion = new ObservableCollection<MotionTitleItem>();                
foreach (MotionInfo info in listMotionInfo)
     {
          var motionTitleItem = new MotionTitleItem();                    
          listMotion.Add(motionTitleItem);                    
     }
 viewModel.RemoteItemsList = listMotion;
 viewModel.LibraryItemsList = listMotion;

MotionTitleItem is a custom user control. My problem is only the first ListBox with ItemSource binding with RemoteListItem displays the Item in UI, the other doest not. If I bind two ListBox ItemSource with 2 ObserverableCollection, the problem solved:

var listMotion = new ObservableCollection<MotionTitleItem>();
var listMotion2 = new ObservableCollection<MotionTitleItem>();
foreach (MotionInfo info in listMotionInfo)
     {
           var motionTitleItem = new MotionTitleItem();
           listMotion.Add(motionTitleItem);
           var motionTitleItem2 = new MotionTitleItem();
           listMotion2.Add(motionTitleItem2);
      }
 viewModel.RemoteItemsList = listMotion;
 viewModel.LibraryItemsList = listMotion2;

Could someone explain to me where is the point of the first scenario problem?

Answer 1

I don't know why you used two temporary list for this. You can directly add items to your Observable collection. Try this :

foreach (MotionInfo info in listMotionInfo)
 {
       viewModel.RemoteItemsList.Add(info);
       viewModel.LibraryItemsList.Add(info);
  }

Below, I tried to create the solution for you. I assumed the model MotionTitleItem.

public class MotionTitleItem 
{
string _name = string.Empty;

public string Name
{
  get { return _name; }
  set
  {
    _name = value;
    OnPropertyChanged("Name");
  }
}


public event PropertyChangedEventHandler PropertyChanged;

public void OnPropertyChanged(string propertyName)
{
  try
  {
    PropertyChangedEventHandler eventHandler = this.PropertyChanged;

    if (null == eventHandler)
      return;
    else
    {
      var e = new PropertyChangedEventArgs(propertyName);
      eventHandler(this, e);
    }
  }
  catch (Exception)
  {

    throw;
  }
}

}

My view model for this application is:

 public class MotionTitleItemViewModel : INotifyPropertyChanged
 {
ObservableCollection<MotionTitleItem> _remoteItemsList = new ObservableCollection<MotionTitleItem>();

public ObservableCollection<MotionTitleItem> RemoteItemsList
{
  get { return _remoteItemsList; }
  set { _remoteItemsList = value; }
}

ObservableCollection<MotionTitleItem> _libraryItemsList = new ObservableCollection<MotionTitleItem>();

public ObservableCollection<MotionTitleItem> LibraryItemsList
{
  get { return _libraryItemsList; }
  set { _libraryItemsList = value; }
}

public MotionTitleItemViewModel()
{
  MotionTitleItem motion;
  for (int i = 0; i < 10; i++)
  {
    motion = new MotionTitleItem();
    motion.Name = "Name " + i.ToString();

    this.LibraryItemsList.Add(motion);
    this.RemoteItemsList.Add(motion);
  }     
}

public event PropertyChangedEventHandler PropertyChanged;

public void OnPropertyChanged(string propertyName)
{
  try
  {
    PropertyChangedEventHandler eventHandler = this.PropertyChanged;

    if (null == eventHandler)
      return;
    else
    {
      var e = new PropertyChangedEventArgs(propertyName);
      eventHandler(this, e);
    }
  }
  catch (Exception)
  {

    throw;
  }
} }

My View is :

<Window x:Class="WPFExperiments.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
<ListBox x:Name="RemoteListBox" HorizontalAlignment="Right" Margin="0,0.5,8,0" 
         Width="382.5" 
         HorizontalContentAlignment="Stretch"                 
         ItemsSource ="{Binding RemoteItemsList}"                                 
         SelectedIndex="0">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Name}"/>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>
<ListBox x:Name="LibraryListBox" 
         Margin="4.5,0.5,437,0"
         HorizontalContentAlignment="Stretch"
         ItemsSource="{Binding LibraryItemsList}"                 
         SelectedIndex="0">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Name}"/>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>

In code behind of this window i set DataContext to view model.

public partial class MainWindow : Window
{
public MainWindow()
{
  InitializeComponent();
  this.DataContext = new MotionTitleItemViewModel();
}}

This code is working for me. Here is screenshot of the output.

Vote this answer if you find it useful.

Have fun!