Bind to a Collection with the Master-Detail Pattern

image_pdfimage_print


   
  

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF" Height="370" Width="280">
    <Window.Resources>
        <DataTemplate 
            x:Key="masterTemplate">
            <TextBlock Margin="4" Text="{Binding Path=Description, UpdateSourceTrigger=PropertyChanged}"/>
        </DataTemplate>
        <DataTemplate x:Key="detailTemplate">
            <StackPanel>
               <TextBlock Text="First Name"/>
               <TextBox Text="{Binding Path=FirstName, Mode=TwoWay}"/>
               <TextBlock Text="Age"/>
               <TextBox Text="{Binding Path=Age, Mode=TwoWay}"/>
               <TextBlock Text="Occupation"/>
               <ComboBox x:Name="cboOccupation" IsEditable="False" Text="{Binding Path=Occupation, Mode=TwoWay}">
             <ComboBoxItem>Student</ComboBoxItem>
             <ComboBoxItem>Engineer</ComboBoxItem>
             <ComboBoxItem>Professional</ComboBoxItem>
        </ComboBox>
      </StackPanel>
        </DataTemplate>
    </Window.Resources>

    <StackPanel Margin="5">
        <ListBox ItemsSource="{Binding}" ItemTemplate="{StaticResource masterTemplate}" IsSynchronizedWithCurrentItem="True" />
        <ContentControl 
          Content="{Binding}"
          ContentTemplate="{StaticResource detailTemplate}" />
       
        <Button Click="AddButton_Click">Add Employee</Button>
    </StackPanel>
</Window>
//File:Window.xaml.cs

using System.Windows;
using System.ComponentModel;
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Collections.ObjectModel;


namespace WpfApplication1
{
    public partial class Window1 : Window
    {
        EmployeeCollection people = new EmployeeCollection();

        public Window1()
        {
            InitializeComponent();
            this.DataContext = people;
        }

        private void AddButton_Click(object sender, RoutedEventArgs e)
        {
            people.Add(new Employee(){FirstName = "A",Age = 26});
        }
    }

    public class Employee : INotifyPropertyChanged
    {
        private string firstName;
        private int age;

        public string FirstName
        {
            get
            {
                return firstName;
            }
            set
            {
                if(firstName != value)
                {
                    firstName = value;
                    OnPropertyChanged("FirstName");
                    OnPropertyChanged("Description");
                }
            }
        }
        public int Age
        {
            get
            {
                return age;
            }
            set
            {
                if(this.age != value)
                {
                    this.age = value;
                    OnPropertyChanged("Age");
                    OnPropertyChanged("Description");
                }
            }
        }
        
        public string Description
        {
            get
            {
                return string.Format("{0})", firstName);
            }
        }
        public override string ToString()
        {
            return Description;
        }
        public event PropertyChangedEventHandler PropertyChanged;

        private void OnPropertyChanged(string propertyName)
        {
            if(this.PropertyChanged != null)
            {
                this.PropertyChanged(this,new PropertyChangedEventArgs(propertyName));
            }
        }
    }

    public class EmployeeCollection:ObservableCollection<Employee>
    {
        public EmployeeCollection()
        {
            Add(new Employee(){FirstName = "A",Age = 26,});

            Add(new Employee(){FirstName = "C",Age = 28,});

            Add(new Employee(){FirstName = "E",Age = 37,});

            Add(new Employee(){FirstName = "Q",Age = 25,});
        }
    }
}