binding ListBox to ObservableCollection in WPF

Question

I have a Class named Layer2Info

    public class Layer2Info
{
    public ObservableCollection<totalAvailablePorts> availableClientPorts = new ObservableCollection<totalAvailablePorts>();
}

The totalAvailablePorts Class is

    public class totalAvailablePorts : INotifyPropertyChanged
{
    public int _portID;
    public Boolean _isSelected;

    public int portID
    {
        get { return _portID; }
        set { _portID = value; NotifyPropertyChanged("portID"); }
    }
    public Boolean isSelected
    {
        get { return _isSelected; }
        set { _isSelected = value; NotifyPropertyChanged("isSelected"); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    public override string ToString()
    {
        return string.Format("{0}", portID);
    }
}

The creation of the data in availableClientPorts is:

            for (int i = 1; i <= 3; i++)
        {
            totalAvailablePorts newPort = new totalAvailablePorts();
            newPort.portID = i;
            newPort.isSelected = false;
            layer2InfoConfig.availableClientPorts.Add(newPort);              
        }

Now, in my MainWindow I'm binding the ListBox to the Layer2Info.availableClientPorts like this:

clientPortsList.ItemsSource = layer2InfoConfig.availableClientPorts;

and last is my xaml:

<ListBox x:Name="clientPortsList" 
         SelectionMode="Extended" 
         DisplayMemberPath="{Binding Path=portID}" 
         SelectedValuePath="{Binding Path=isSelected}" 
         Height="50"/>

Now, i'm able to see all the ports (1-3) in the ListBox, but what I want to do is that on every line that I select in the ListBox, I want the isSelected value in the availableClientPorts to change to true, and I have no idea where to start. Any suggestions?

score 0 · Accepted Answer · edited May 23 '17 at 12:29

First, SelectedValuePath isn't what you think. MSDN says it "Gets or sets the path that is used to get the SelectedValue from the SelectedItem." So when the user selects an item, the clientPortsList will take that property of its own SelectedItem, and return the value of that property from clientPortsList.SelectedValue. With multi-select, that's not a real useful concept for you, and anyhow it's unrelated to the question you're asking here.

What you want to do is, for each totalAvailablePorts instance, bind the isSelected property of that instance to the IsSelected property of the ListBoxItem that owns it. You could do that with an item template, but a Style is much simpler (and better, if you aren't interested in recreating or altering the default ListBoxItem visual behavior). That answer is already on StackOverflow:

<ListBox ItemsSource="..."
    x:Name="clientPortsList" 
    SelectionMode="Extended" 
    DisplayMemberPath="{Binding Path=portID}" >
  <ListBox.ItemContainerStyle>
   <Style TargetType="{x:Type ListBoxItem}">
     <!-- binding totalAvailablePorts.isSelected to ListBoxItem.IsSelected -->
     <Setter Property="IsSelected" Value="{Binding isSelected}"/>
   </Style>
  </ListBox.ItemContainerStyle>
 </ListBox>

For the ListBoxItem instances, their DataContext will be their respective totalAvailablePorts instances, so isSelected (lower-case I) will be "in scope".

binding ListBox to ObservableCollection in WPF

1 Answers1