Binding multiple unique UserControls in a ListView to an ObservableCollection

Question

I want the user to be able to select between 10 or more unique UserControls and display them in a list in any order with any number of multiple instances of any UserControl. So, the list might look like this UC1, UC1, UC3, UC3, UC 10, UC8, etc. It is important to note that the two UC1s and two UC3s in the previous example are different instances with different values associated with them. Essentially, I’m creating a sequence of commands that I’ll parse into a real-world actions.

Problem: I cannot bind my UserControls displayed in a ListView to the data in an ObservableCollection. At the very least, my bindings in the UserControls are just wrong and I am not sure how to get them to work.

I’m using MVVMLight. I have a Window control containing only a content control that has a UserControl loaded called CommandView, which is my main display. CommandView currently has several buttons with properties that bind to relay commands in the CommandViewModel that add unique class instances to an ObservableCollection called CommandsCollection. The ListView binds to a property that encapsulates the CommandsCollection.

I use a DataTemplate and a DataTemplateSelector in the code behind to select the correct UserControl (UC1, UC2, etc) based on the type of the class in that position in the collection. I have that working successfully, but I’m not binding the displayed UserControl textbox back to the ObservableCollection so no data is displayed in the textbox of the UserControl. I do set the default values of the class properties in the ObservableCollection and write the collection to a text file and see the values are the default. So the ObservableCollection is seeing the values.

How do I setup the binding in the user controls? Here’s what I have in UC1 User control:

VelocityCommandStatic – I’m actually a little confused by this as well, but this is the object (?) of the usercontrol created in the viewmodellocator.cs.

What is the best way to bind? Can the xaml binding point directly back to the ObservableCollection? One issue, each UserControl has different properties and I place a different class (instance of) for each user control in the collection. I would know the properties, but need correctly set them up in the xaml. Maybe this approach is not ideal. Can I have properties in the viewmodel for the UserControl point back to the correct position in the observablecolleciton in the CommandViewViewModel?

Fede · Accepted Answer

Look, you're overcomplicating it too much. All you need is an ObservableCollection that can hold all your items and a proper DataTemplate for each. There's no need for DataTemplateSelectors or any other stuff like that. Also, there's no need to point directly back to the ObservableCollection, whatever that means:

MainWindow:

Code Behind:

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows;
using System.ComponentModel;

namespace WpfApplication5
{
    public partial class Window3 : Window
    {
        public Window3()
        {
            InitializeComponent();

            DataContext = new ObservableCollection
                {
                    new Item1() {MyText1 = "This is MyText1 inside an Item1"},
                    new Item2() {MyText2 = "This is MyText2 inside an Item2"},
                    new Item3() {MyText3 = "This is MyText3 inside an Item3", MyBool = true}
                };
        }
    }

    public class ItemBase: INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void NotifyPropertyChange(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public class Item1: ItemBase
    {
        private string _myText1;
        public string MyText1
        {
            get { return _myText1; }
            set
            {
                _myText1 = value;
                NotifyPropertyChange("MyText1");
            }
        }
    }

    public class Item2: ItemBase
    {
        private string _myText2;
        public string MyText2
        {
            get { return _myText2; }
            set
            {
                _myText2 = value;
                NotifyPropertyChange("MyText2");
            }
        }

        private ObservableCollection _options;
        public ObservableCollection Options
        {
            get { return _options ?? (_options = new ObservableCollection()); }
        }

        public Item2()
        {
            Options.Add("Option1");
            Options.Add("Option2");
            Options.Add("Option3");
            Options.Add("Option4");
        }
    }

    public class Item3: ItemBase
    {
        private string _myText3;
        public string MyText3
        {
            get { return _myText3; }
            set
            {
                _myText3 = value;
                NotifyPropertyChange("MyText3");
            }
        }

        private bool _myBool;
        public bool MyBool
        {
            get { return _myBool; }
            set
            {
                _myBool = value;
                NotifyPropertyChange("MyBool");
            }
        }
    }
}

UserControl1:

UserControl2:

UserControl3:

Just Copy and paste My Code in a File - New - WPF Application and see the results for yourself. It looks like this:

enter image description here

Binding multiple unique UserControls in a ListView to an ObservableCollection

Answers (1)

Related Questions