Binding not working when using listview with an expander in WPF

Question

First of all I am new and have just started learning WPF.

I have an employee class as shown below:

public class Employee : INotifyPropertyChanged
    {
        public Employee()
        {
            _subEmployee = new ObservableCollection<Employee>();
        }

        private string _name;

        public ObservableCollection<Employee> SubEmployee
        {
            get { return _subEmployee; }
            set
            {
                _subEmployee = value;
                NotifiyPropertyChanged("SubEmployee");
            }
        }

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

        ObservableCollection<Employee> _subEmployee;

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

I have created an observable collection of employee in MainWindow class and set the datacontext to the same collection as shown below:

public partial class MainWindow : Window
    {
        public ObservableCollection<Employee> Emp { get; private set; }

        public MainWindow()
        {
            InitializeComponent();
            Emp = new ObservableCollection<Employee>();
            Emp.Add(new Employee(){Name = "Anuj"});
            Emp.Add(new Employee() { Name = "Deepak" });
            Emp.Add(new Employee() { Name = "Aarti" });

            Emp[0].SubEmployee.Add(new Employee(){Name = "Tonu"});
            Emp[0].SubEmployee.Add(new Employee() { Name = "Monu" });
            Emp[0].SubEmployee.Add(new Employee() { Name = "Sonu" });

            Emp[2].SubEmployee.Add(new Employee() { Name = "Harsh" });
            Emp[2].SubEmployee.Add(new Employee() { Name = "Rahul" });
            Emp[2].SubEmployee.Add(new Employee() { Name = "Sachin" });
            this.DataContext = Emp;
        }
    }

Now, in xaml.cs I have written following code:

<Grid>
        <ListView ItemsSource="{Binding Emp}">
            <ListView.ItemTemplate>
                <DataTemplate DataType="{x:Type vm:Employee }">
                    <Expander Header="{Binding Name}">
                        <ListView ItemsSource="{Binding SubEmployee}">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Text ="{Binding Name}"/>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Expander>
                </DataTemplate>
            </ListView.ItemTemplate> >
        </ListView>
    </Grid>

Now I should get the collection of Employee object with an expander button, clicking on button should give me all the SubEmployee. But unfortunately I am not getting the expected result.

Please help me to resolve the binding problem.

Answer 1

Your DataContext is ObservableCollection<Employee> so outer LitView should bind ItemsSource directly to current DataContext . In other words there is no Emp property in your DataContext . Your context is Emp property

<ListView ItemsSource="{Binding}">
    <ListView.ItemTemplate>
        <!-- .... -->
    </ListView.ItemTemplate>
</ListView>

or leave XAML as is and changed how you set DataContext to

this.DataContext = this;

EDIT

Thought this was copy/paste error but since you complaint about an Invalid Operation Exception error it's because of second > at the end of ItemTemplate tag

</ListView.ItemTemplate> >

Answer 2

I have tested your code. The DataContext was not set properly. I also gave a color to the text. Try this. Working perfectly at my end!

XAML :

<Grid>
    <ListView ItemsSource="{Binding Emp}">
        <ListView.ItemTemplate>
            <DataTemplate DataType="{x:Type vm:Employee }">
                <Expander Header="{Binding Name}">
                    <ListView ItemsSource="{Binding SubEmployee}">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Foreground="Black" Text  ="{Binding Name}"/>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Expander>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

Code Behind :

public partial class MainWindow : Window
{
    public ObservableCollection<Employee> Emp { get; set; }

    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;

        Emp = new ObservableCollection<Employee>();
        Emp.Add(new Employee() { Name = "Anuj" });
        Emp.Add(new Employee() { Name = "Deepak" });
        Emp.Add(new Employee() { Name = "Aarti" });

        Emp[0].SubEmployee.Add(new Employee() { Name = "Tonu" });
        Emp[0].SubEmployee.Add(new Employee() { Name = "Monu" });
        Emp[0].SubEmployee.Add(new Employee() { Name = "Sonu" });

        Emp[2].SubEmployee.Add(new Employee() { Name = "Harsh" });
        Emp[2].SubEmployee.Add(new Employee() { Name = "Rahul" });
        Emp[2].SubEmployee.Add(new Employee() { Name = "Sachin" });

    }
}

The other data class remains the same!