Binding listbox to observablecollection

Question

I need some help to correctly bind an ObservableCollection to xaml. I can bind the data correctly but when the data changed, the changes did not reflect on the screen. I have read related blogs and seemed to have understood, but when trying to apply what I know into my own sample, it does not work quite as I have thought.

I have 2 classes Fruits and Fruit, where Fruits is a observablecollection of fruit which implements INotifyPropertyChanged

namespace TestCommand.Models
{
    public class Fruit:INotifyPropertyChanged
    {
        private string _fruitname;
        public string FruitName
        { get
            {
                return _fruitname;
            }
            set
            {
                if (_fruitname!=value)
                {
                    _fruitname = value;
                    OnPropertyChanged("FruitName");
                }
            }
        }

        private string _fruitcolor;
        public string FruitColor
        {
            get
            {
                return _fruitcolor;
            }
            set
            {
                if (_fruitcolor != value)
                {
                    _fruitcolor = value;
                    OnPropertyChanged("FruitColor");
                }
            }
        }

        private bool _selected;
        public bool bSelected
        {
            get
            {
                return _selected;
            }
            set
            {
                if (_selected != value)
                {
                    _selected = value;
                    OnPropertyChanged("bSelected");
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(string name)
        {
            if (PropertyChanged!=null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(name));
            }
        }
    }
}

    namespace TestCommand.Models
    {
        public class Fruits
        {
            private static ObservableCollection _fruitList;
            public static void Add(string f, string c)
            {
                _fruitList.Add(new Fruit
                {
                    FruitName = f,
                    FruitColor = c,
                    bSelected = false
                });
            }
            static Fruits()
            {
                _fruitList = new ObservableCollection();
                _fruitList.Add(new Fruit
                {
                    FruitName = "Mango",
                    FruitColor = "Yellow",
                    bSelected = false
                });
                _fruitList.Add(new Fruit
                {
                    FruitName = "Mango",
                    FruitColor = "Yellow",
                    bSelected = false
                });
                _fruitList.Add(new Fruit
                {
                    FruitName = "Water Melon",
                    FruitColor = "Green",
                    bSelected = false
                });
                _fruitList.Add(new Fruit
                {
                    FruitName = "Apple",
                    FruitColor = "Red",
                    bSelected = false
                });
                _fruitList.Add(new Fruit
                {
                    FruitName = "Banana",
                    FruitColor = "Yellow",
                    bSelected = false
                });
                _fruitList.Add(new Fruit
                {
                    FruitName = "Orange",
                    FruitColor = "Orange",
                    bSelected = false
                });
            }
            public static ObservableCollection getAllFruit(bool bSelected = false)
            {
                var result = (bSelected ?
                                            _fruitList.Where(x => x.bSelected = true).ToList()
                                            : _fruitList.ToList());
                return new ObservableCollection(result);
            }
        }
    }

My xaml:

and code behind:

namespace TestCommand
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            MyList.ItemsSource = Fruits.getAllFruit();
        }

        private void CommandBinding_Executed(object sender, ExecutedRoutedEventArgs e)
        {
            Fruits.Add("Durian", "Green");
        }

        private void CommandBinding_CanExecute(object sender, CanExecuteRoutedEventArgs e)
        {
            e.CanExecute = true;
        }
    }
}

My ItemTemplate

When I clicked on the button, I saw item added to the collection but the collection was not refreshed on the list. I must have not tied the collection correctly or may have missed something as I am very new to wpf.

Your help to point out my overlook is very much appreciated.

15ee8f99-57ff-4f92-890c-b56153 · Accepted Answer

This method creates a new ObservableCollection and returns it. You assign that to MyList.ItemsSource (that's not a binding, that's just an assignment), and then you add an item to a different ObservableCollection somewhere else.

MyList.ItemsSource = Fruits.getAllFruit();

...

public static ObservableCollection getAllFruit(bool bSelected = false)
{
    var result = (bSelected ? _fruitList.Where(x => x.bSelected = true).ToList()
        : _fruitList.ToList());
    return new ObservableCollection(result);
}

Of course you don't see any new items in the copy of _fruitList that you handed to the ListBox.

The ListBox has to have the same actual collection object that you're adding objects to.

public static ObservableCollection getAllFruit(bool bSelected = false)
{
    return _fruitList;
}

Whoops, no filtering.

And that's still not the right way to do this. Write a viewmodel with a public Fruits property that returns an ObservableCollection, and use a CollectionViewSource in your XAML for filtering. We can walk through all that stuff if need be. You already know how to implement INotifyPropertyChanged so you're on your way.

Update

I did a quick rewrite of the Fruits application as an MVVM thing. Usually I'd do the AddNewFruit command as a property of the viewmodel with a delegate command, but I didn't feel like writing a delegate command class and pasting it in. What's here is OK though.

ViewModels.cs

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Data;
using System.Windows.Media;

namespace Fruits.ViewModels
{
    public class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(string name)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(name));
            }
        }
    }

    public class Fruit : ViewModelBase
    {
        public Fruit()
        {
        }

        public Fruit(string name, String clrString)
        {
            FruitName = name;
            //  Parse colors like so: (Color)ColorConverter.ConvertFromString(clrString);
            FruitColor = clrString;
        }

        public Fruit(string name, Color clr)
        {
            FruitName = name;
            FruitColor = clr.ToString();
        }

        private string _fruitname;
        public string FruitName
        {
            get
            {
                return _fruitname;
            }
            set
            {
                if (_fruitname != value)
                {
                    _fruitname = value;
                    OnPropertyChanged("FruitName");
                }
            }
        }

        private String _fruitcolor;
        public String FruitColor
        {
            get
            {
                return _fruitcolor;
            }
            set
            {
                if (_fruitcolor != value)
                {
                    _fruitcolor = value;
                    OnPropertyChanged("FruitColor");
                }
            }
        }

        private bool _isSelected = true;
        //  NOTE: I renamed this property
        public bool IsSelected
        {
            get
            {
                return _isSelected;
            }
            set
            {
                if (_isSelected != value)
                {
                    _isSelected = value;
                    OnPropertyChanged("IsSelected");
                }
            }
        }
    }

    #region MainViewModel Class
    public class MainViewModel : ViewModelBase
    {
        public MainViewModel()
        {
            Fruits = new ObservableCollection();

        }

        #region ShowSelectedFruitOnly Property
        private bool _showSelectedFruitOnly = true;
        public bool ShowSelectedFruitOnly
        {
            get { return _showSelectedFruitOnly; }
            set
            {
                if (value != _showSelectedFruitOnly)
                {
                    _showSelectedFruitOnly = value;
                    FruitsView.Refresh();
                    OnPropertyChanged("ShowSelectedFruitOnly");
                }
            }
        }
        #endregion ShowSelectedFruitOnly Property

        #region Add Methods
        public void AddNewFruit()
        {
            Fruits.Add(new Fruit(NewFruitName, NewFruitColor));

            NewFruitName = "";
            NewFruitColor = "";
        }

        public void AddNewFruit(string name, string color)
        {
            Fruits.Add(new Fruit(name, color));
        }

        public void AddNewFruit(string name, Color color)
        {
            Fruits.Add(new Fruit(name, color));
        }
        #endregion Add Methods

        #region NewFruitName Property
        private String _newFruitName = default(String);
        public String NewFruitName
        {
            get { return _newFruitName; }
            set
            {
                if (value != _newFruitName)
                {
                    _newFruitName = value;
                    OnPropertyChanged("NewFruitName");
                }
            }
        }
        #endregion NewFruitName Property

        #region NewFruitColor Property
        private String _newFruitColor = default(String);
        public String NewFruitColor
        {
            get { return _newFruitColor; }
            set
            {
                if (value != _newFruitColor)
                {
                    _newFruitColor = value;
                    OnPropertyChanged("NewFruitColor");
                }
            }
        }
        #endregion NewFruitColor Property

        public ICollectionView FruitsView { get; private set; }

        #region Fruits Property
        private ObservableCollection _fruits;
        public ObservableCollection Fruits
        {
            get { return _fruits; }
            private set
            {
                if (value != _fruits)
                {
                    _fruits = value;

                    FruitsView = CollectionViewSource.GetDefaultView(Fruits);

                    FruitsView.Filter = FruitFilterPredicate;
                    FruitsView.Refresh();

                    OnPropertyChanged("Fruits");
                }
            }
        }

        protected bool FruitFilterPredicate(Object o)
        {
            if (ShowSelectedFruitOnly)
            {
                return (o as Fruit).IsSelected;
            }

            return true;
        }
        #endregion Fruits Property
    }
    #endregion MainViewModel Class
}

App.xaml

MainWindow.xaml


    
        
    
    
        
    
    
        
            Selected Fruit Only
            
            
                New Name:
                
            
            
                New Color:

MainWindow.xaml.cs

using System;
using System.Windows;
using System.Windows.Input;
using Fruits.ViewModels;

namespace Fruits
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            DataContext = new MainViewModel();

            ViewModel.AddNewFruit("Jackfruit", "Yellow");
            ViewModel.AddNewFruit("Watermelon", "ForestGreen");
            ViewModel.AddNewFruit("Apple", "Red");
            ViewModel.AddNewFruit("Banana", "Yellow");
            ViewModel.AddNewFruit("Orange", "DeepSkyBlue");

            ViewModel.Fruits[0].IsSelected = false;
            ViewModel.Fruits[1].IsSelected = false;

            ViewModel.FruitsView.Refresh();
        }

        public MainViewModel ViewModel { get { return DataContext as MainViewModel; } }

        private void AddFruitCommandBinding_Executed(object sender, ExecutedRoutedEventArgs e)
        {
            ViewModel.AddNewFruit();
        }

        private void AddFruitCommandBinding_CanExecute(object sender, CanExecuteRoutedEventArgs e)
        {
            e.CanExecute =
                ViewModel != null
                && !String.IsNullOrWhiteSpace(ViewModel.NewFruitName)
                && !String.IsNullOrWhiteSpace(ViewModel.NewFruitColor)
                ;
        }
    }
}

Screenshot:

Standard HTML color names (see System.Windows.Media.Colors for WPF predefined color constants) will work for the colors, and so will #RRGGBB or #AARRGGBB hex colors.

Binding listbox to observablecollection

Answers (1)

Update

Related Questions