Posted by: Zeeshan Amjad | February 13, 2010

Master Detail Data Binding


We have already seen the example of master detail data binding using LINQ here. Now we are going to define the master detail relationship without using LINQ. First we are going to define the classes to store the data. Here we have one class for States and another one for Cities. One state have many cities, but one city belongs to only one State. This is master detail relationship between these two. Here is a piece of code to define these classes.

  1: public class City
  2: {
  3:     public City(String cityName)
  4:     {
  5:         CityName = cityName;
  6:     }
  7: 
  8:     public String CityName
  9:     { get; set; }
 10: }
 11: 
 12: public class CityList : ObservableCollection<City>
 13: {
 14: }
 15: 
 16: public class States
 17: {
 18:     public States()
 19:     {
 20:         Cities = new CityList();
 21:     }
 22: 
 23:     public void AddCity(City city)
 24:     {
 25:         Cities.Add(city);
 26:     }
 27: 
 28:     public String Name
 29:     { get; set; }
 30: 
 31:     public CityList Cities
 32:     { get; set; }
 33: }  
 34: 

Then we insert some data into these classes and set that to data context of window.

  1: List<States> states = new List<States>();
  2: 
  3: States state1 = new States();
  4: state1.Name = "Maryland";
  5: state1.AddCity(new City("Frederick"));
  6: state1.AddCity(new City("Baltimore"));
  7: state1.AddCity(new City("Rockville"));
  8: state1.AddCity(new City("Annapolis"));
  9: 
 10: states.Add(state1);
 11: 
 12: States state2 = new States();
 13: state2.Name = "California";
 14: state2.AddCity(new City("Los Angeles"));
 15: state2.AddCity(new City("Burbank"));
 16: state2.AddCity(new City("Irvine"));
 17: 
 18: states.Add(state2);
 19: 
 20: DataContext = states;
 21: 

Now we define two listboxes and display states in one list box and city in another list box. When we select the state from the first list box then the second list box display the cities of that state. Here is complete XAML code of the program.

  1:  <Window x:Class="WpfTwoListBoxes.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Two List Boxes" Height="300" Width="400">
  5:     <Grid Background="AliceBlue">
  6:         <Grid.ColumnDefinitions>
  7:             <ColumnDefinition/>
  8:             <ColumnDefinition/>
  9:         </Grid.ColumnDefinitions>
 10:         <ListBox Grid.Column="0" Margin="5" HorizontalContentAlignment="Stretch"
 11:                  IsSynchronizedWithCurrentItem="True"
 12:                  ItemsSource="{Binding}">
 13:             <ListBox.ItemTemplate>
 14:                 <DataTemplate>
 15:                     <Border Margin="2" BorderThickness="1" BorderBrush="Blue">
 16:                         <TextBlock Margin="2" Text="{Binding Name}"/>
 17:                     </Border>
 18:                 </DataTemplate>
 19:             </ListBox.ItemTemplate>
 20:         </ListBox>
 21:         <ListBox Grid.Column="1" Margin="5" HorizontalContentAlignment="Stretch"
 22:                  IsSynchronizedWithCurrentItem="True"
 23:                  ItemsSource="{Binding Path=Cities}">
 24:             <ListBox.ItemTemplate>
 25:                 <DataTemplate>
 26:                     <Border Margin="2" BorderThickness="1" BorderBrush="Red">
 27:                         <TextBlock Margin="2" Text="{Binding CityName}"/>
 28:                     </Border>
 29:                 </DataTemplate>
 30:             </ListBox.ItemTemplate>
 31:         </ListBox>
 32:     </Grid>
 33: </Window>
 34: 

Not that we have to set IsSynchronizedWithCurrentItem  to true to synchronize them. Here is complete C# code of the program.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: using System.Collections.ObjectModel;
 15: 
 16: namespace WpfTwoListBoxes
 17: {
 18:     /// <summary>
 19:     /// Interaction logic for Window1.xaml
 20:     /// </summary>
 21:     public partial class Window1 : Window
 22:     {
 23:         public Window1()
 24:         {            
 25:             InitializeComponent();
 26: 
 27:             List<States> states = new List<States>();
 28: 
 29:             States state1 = new States();
 30:             state1.Name = "Maryland";
 31:             state1.AddCity(new City("Frederick"));
 32:             state1.AddCity(new City("Baltimore"));
 33:             state1.AddCity(new City("Rockville"));
 34:             state1.AddCity(new City("Annapolis"));
 35: 
 36:             states.Add(state1);
 37: 
 38:             States state2 = new States();
 39:             state2.Name = "California";
 40:             state2.AddCity(new City("Los Angeles"));
 41:             state2.AddCity(new City("Burbank"));
 42:             state2.AddCity(new City("Irvine"));
 43: 
 44:             states.Add(state2);
 45: 
 46:             DataContext = states;
 47:         }
 48:     }
 49: 
 50:     public class City
 51:     {
 52:         public City(String cityName)
 53:         {
 54:             CityName = cityName;
 55:         }
 56: 
 57:         public String CityName
 58:         { get; set; }
 59:     }
 60: 
 61:     public class CityList : ObservableCollection<City>
 62:     {
 63:     }
 64: 
 65:     public class States
 66:     {
 67:         public States()
 68:         {
 69:             Cities = new CityList();
 70:         }
 71: 
 72:         public void AddCity(City city)
 73:         {
 74:             Cities.Add(city);
 75:         }
 76: 
 77:         public String Name
 78:         { get; set; }
 79: 
 80:         public CityList Cities
 81:         { get; set; }
 82:     }  
 83: }
 84: 

Hers it the output of this program.

MasterDetailBindingOutput

Advertisements

Responses

  1. […] have already saw the example of master detail relationship between two list boxes here. We also saw one example of master detail data binding using LINQ here. This time we are going to […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: