Posted by: Zeeshan Amjad | December 26, 2009

Using TreeView, GridSplitter and ListView together


We have already studied how to use treeview, gridsplitter and list view controls separately. We have information about department and subjects offer by the department displayed in the tree control. And when we click on any course then we will display the enrolled students of that course in the list view. We use LINQ to get the required students information.

At first step we are defining the appropriate classes to store information. Here are the classes of Department, Subjects and Student.

  1: public class Subject
  2: {
  3:     public Subject(int id, String name)
  4:     {
  5:         ID = id;
  6:         Name = name;
  7:     }
  8: 
  9:     public int ID
 10:     { get; set; }
 11: 
 12:     public String Name
 13:     { get; set; }
 14: }
 15: 
 16: public class Department
 17: {
 18:     public Department()
 19:     {
 20:         this.Subjects = new List<Subject>();
 21:     }
 22: 
 23:     public String Name
 24:     { get; set; }
 25: 
 26:     public List<Subject> Subjects
 27:     { get; set; }
 28: }
 29: 
 30: public class Student
 31: {
 32:     public Student()
 33:     {
 34:     }
 35: 
 36:     public Student(int id, String firstName, String lastName, int subjectID, String grade)
 37:     {
 38:         ID = id;
 39:         FirstName = firstName;
 40:         LastName = lastName;
 41:         SubjectID = subjectID;
 42:         Grade = grade;
 43:     }
 44: 
 45:     public int ID
 46:     { get; set; }
 47: 
 48:     public String FirstName
 49:     { get; set; }
 50: 
 51:     public String LastName
 52:     { get; set; }
 53: 
 54:     public int SubjectID
 55:     { get; set; }
 56: 
 57:     public String Grade
 58:     { get; set; }
 59: }
 60: 

Now we are creating list of these classes.

  1: static public List<Department> deptList = new List<Department>();
  2: private List<Student> studentList = new List<Student>();
  3: 

Next step is to populate these classes with data.

  1: List<Subject> sublist1 = new List<Subject>();
  2: sublist1.Add(new Subject(100101, "Pre Calculus"));
  3: sublist1.Add(new Subject(100210, "Calculus 1"));
  4: sublist1.Add(new Subject(100211, "Calculus 2"));
  5: sublist1.Add(new Subject(100212, "Calculus 3"));
  6: sublist1.Add(new Subject(100218, "Linear Algebra"));
  7: sublist1.Add(new Subject(100213, "Differential Equation"));
  8: Department dept1 = new Department();
  9: dept1.Name = "Math";
 10: dept1.Subjects = sublist1;
 11: 
 12: deptList.Add(dept1);
 13: 
 14: List<Subject> sublist2 = new List<Subject>();
 15: sublist2.Add(new Subject(200100, "Business Accounting"));
 16: sublist2.Add(new Subject(200101, "Accounting 1"));
 17: sublist2.Add(new Subject(200102, "Accounting 2"));
 18: sublist2.Add(new Subject(200201, "Accounting 3"));
 19: sublist2.Add(new Subject(200201, "Accounting 4"));
 20: sublist2.Add(new Subject(200203, "Cost Accounting"));
 21: sublist2.Add(new Subject(200205, "Tax Accounting"));
 22: sublist2.Add(new Subject(200214, "Auditing"));
 23: Department dept2 = new Department();
 24: dept2.Name = "Accounting";
 25: dept2.Subjects = sublist2;
 26: 
 27: deptList.Add(dept2);
 28: 
 29: List<Subject> sublist3 = new List<Subject>();
 30: sublist3.Add(new Subject(300101, "Introduction to CS"));
 31: sublist3.Add(new Subject(300106, "OOP"));
 32: sublist3.Add(new Subject(300121, "Visual Basic"));
 33: sublist3.Add(new Subject(300170, "Security 1"));
 34: sublist3.Add(new Subject(300201, "Computer Science"));
 35: sublist3.Add(new Subject(300208, "C++ Programming"));
 36: sublist3.Add(new Subject(300232, "DB Administrator"));
 37: sublist3.Add(new Subject(300241, "Networking"));
 38: Department dept3 = new Department();
 39: dept3.Name = "Computer Science";
 40: dept3.Subjects = sublist3;
 41: 
 42: deptList.Add(dept3);
 43: 
 44: studentList.Add(new Student(10, "Alex", "Martin", 100210, "A"));
 45: studentList.Add(new Student(10, "Alex", "Martin", 300101, "A"));
 46: studentList.Add(new Student(10, "Alex", "Martin", 200101, "B"));
 47: studentList.Add(new Student(12, "Joe", "Brown", 100101, "A"));
 48: studentList.Add(new Student(12, "Joe", "Brown", 300170, "B"));
 49: studentList.Add(new Student(12, "Joe", "Brown", 200203, "A"));
 50: studentList.Add(new Student(16, "David", "Frank", 100212, "A"));
 51: studentList.Add(new Student(16, "David", "Frank", 100218, "A"));
 52: studentList.Add(new Student(16, "David", "Frank", 100213, "A"));
 53: studentList.Add(new Student(16, "David", "Frank", 300101, "A"));
 54: studentList.Add(new Student(16, "David", "Frank", 200100, "B"));
 55: studentList.Add(new Student(18, "Patrick", "Justin", 200100, "A"));
 56: studentList.Add(new Student(18, "Patrick", "Justin", 300101, "A"));
 57: studentList.Add(new Student(18, "Patrick", "Justin", 100210, "A"));
 58: studentList.Add(new Student(18, "Patrick", "Justin", 100211, "A"));
 59: studentList.Add(new Student(25, "Ken", "White", 100210, "B"));
 60: studentList.Add(new Student(25, "Ken", "White", 300101, "B"));
 61: studentList.Add(new Student(25, "Ken", "White", 200101, "A"));
 62: 

We can get the required students information using LINQ.

  1: IEnumerable<Student> selectedStudents = from fn in studentList
  2:                                         where fn.SubjectID == subjectID
  3:                                         select fn;
  4: 

Here is a complete C# code of this 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: 
 15: namespace WpfTreeList
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         static public List<Department> deptList = new List<Department>();
 23:         private List<Student> studentList = new List<Student>();
 24:         
 25:         public Window1()
 26:         {
 27:             InitializeComponent();
 28: 
 29:             List<Subject> sublist1 = new List<Subject>();
 30:             sublist1.Add(new Subject(100101, "Pre Calculus"));
 31:             sublist1.Add(new Subject(100210, "Calculus 1"));
 32:             sublist1.Add(new Subject(100211, "Calculus 2"));
 33:             sublist1.Add(new Subject(100212, "Calculus 3"));
 34:             sublist1.Add(new Subject(100218, "Linear Algebra"));
 35:             sublist1.Add(new Subject(100213, "Differential Equation"));
 36:             Department dept1 = new Department();
 37:             dept1.Name = "Math";
 38:             dept1.Subjects = sublist1;
 39: 
 40:             deptList.Add(dept1);
 41: 
 42:             List<Subject> sublist2 = new List<Subject>();
 43:             sublist2.Add(new Subject(200100, "Business Accounting"));
 44:             sublist2.Add(new Subject(200101, "Accounting 1"));
 45:             sublist2.Add(new Subject(200102, "Accounting 2"));
 46:             sublist2.Add(new Subject(200201, "Accounting 3"));
 47:             sublist2.Add(new Subject(200201, "Accounting 4"));
 48:             sublist2.Add(new Subject(200203, "Cost Accounting"));
 49:             sublist2.Add(new Subject(200205, "Tax Accounting"));
 50:             sublist2.Add(new Subject(200214, "Auditing"));
 51:             Department dept2 = new Department();
 52:             dept2.Name = "Accounting";
 53:             dept2.Subjects = sublist2;
 54: 
 55:             deptList.Add(dept2);
 56: 
 57:             List<Subject> sublist3 = new List<Subject>();
 58:             sublist3.Add(new Subject(300101, "Introduction to CS"));
 59:             sublist3.Add(new Subject(300106, "OOP"));
 60:             sublist3.Add(new Subject(300121, "Visual Basic"));
 61:             sublist3.Add(new Subject(300170, "Security 1"));
 62:             sublist3.Add(new Subject(300201, "Computer Science"));
 63:             sublist3.Add(new Subject(300208, "C++ Programming"));
 64:             sublist3.Add(new Subject(300232, "DB Administrator"));
 65:             sublist3.Add(new Subject(300241, "Networking"));
 66:             Department dept3 = new Department();
 67:             dept3.Name = "Computer Science";
 68:             dept3.Subjects = sublist3;
 69: 
 70:             deptList.Add(dept3);
 71: 
 72:             studentList.Add(new Student(10, "Alex", "Martin", 100210, "A"));
 73:             studentList.Add(new Student(10, "Alex", "Martin", 300101, "A"));
 74:             studentList.Add(new Student(10, "Alex", "Martin", 200101, "B"));
 75:             studentList.Add(new Student(12, "Joe", "Brown", 100101, "A"));
 76:             studentList.Add(new Student(12, "Joe", "Brown", 300170, "B"));
 77:             studentList.Add(new Student(12, "Joe", "Brown", 200203, "A"));
 78:             studentList.Add(new Student(16, "David", "Frank", 100212, "A"));
 79:             studentList.Add(new Student(16, "David", "Frank", 100218, "A"));
 80:             studentList.Add(new Student(16, "David", "Frank", 100213, "A"));
 81:             studentList.Add(new Student(16, "David", "Frank", 300101, "A"));
 82:             studentList.Add(new Student(16, "David", "Frank", 200100, "B"));
 83:             studentList.Add(new Student(18, "Patrick", "Justin", 200100, "A"));
 84:             studentList.Add(new Student(18, "Patrick", "Justin", 300101, "A"));
 85:             studentList.Add(new Student(18, "Patrick", "Justin", 100210, "A"));
 86:             studentList.Add(new Student(18, "Patrick", "Justin", 100211, "A"));
 87:             studentList.Add(new Student(25, "Ken", "White", 100210, "B"));
 88:             studentList.Add(new Student(25, "Ken", "White", 300101, "B"));
 89:             studentList.Add(new Student(25, "Ken", "White", 200101, "A"));
 90: 
 91:         }
 92: 
 93:         private void tree_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
 94:         {
 95:             list.Items.Clear();
 96: 
 97:             Subject selectedSubject = tree.SelectedItem as Subject;
 98: 
 99:             if (selectedSubject != null)
100:             {
101:                 int subjectID = selectedSubject.ID;
102: 
103:                 IEnumerable<Student> selectedStudents = from fn in studentList
104:                                                         where fn.SubjectID == subjectID
105:                                                         select fn;
106: 
107:                 foreach (Student student in selectedStudents)
108:                 {
109:                     list.Items.Add(student);
110:                 }
111:             }
112:         }
113:     }
114: 
115:     public class Subject
116:     {
117:         public Subject(int id, String name)
118:         {
119:             ID = id;
120:             Name = name;
121:         }
122: 
123:         public int ID
124:         { get; set; }
125: 
126:         public String Name
127:         { get; set; }
128:     }
129: 
130:     public class Department
131:     {
132:         public Department()
133:         {
134:             this.Subjects = new List<Subject>();
135:         }
136: 
137:         public String Name
138:         { get; set; }
139: 
140:         public List<Subject> Subjects
141:         { get; set; }
142:     }
143: 
144:     public class Student
145:     {
146:         public Student()
147:         {
148:         }
149: 
150:         public Student(int id, String firstName, String lastName, int subjectID, String grade)
151:         {
152:             ID = id;
153:             FirstName = firstName;
154:             LastName = lastName;
155:             SubjectID = subjectID;
156:             Grade = grade;
157:         }
158: 
159:         public int ID
160:         { get; set; }
161: 
162:         public String FirstName
163:         { get; set; }
164: 
165:         public String LastName
166:         { get; set; }
167: 
168:         public int SubjectID
169:         { get; set; }
170: 
171:         public String Grade
172:         { get; set; }
173:     }
174: }
175: 

Here is complete XAML code of this program.

  1: <Window x:Class="WpfTreeList.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     xmlns:local="clr-namespace:WpfTreeList"
  5:     Title="Tree, GridSplitter and ListView" Height="400" Width="600">
  6:     <Window.Resources>
  7:         <Style x:Key="alternateColor" TargetType="{x:Type ListViewItem}">
  8:             <Style.Triggers>
  9:                 <Trigger Property="ItemsControl.AlternationIndex" Value="0">
 10:                     <Setter Property="Background" Value="LightBlue"/>
 11:                 </Trigger>
 12:                 <Trigger Property="ItemsControl.AlternationIndex" Value="1">
 13:                     <Setter Property="Background" Value="AliceBlue"/>
 14:                 </Trigger>
 15:             </Style.Triggers>
 16:         </Style>
 17:     </Window.Resources>
 18:     <Grid Background="Wheat">
 19:         <Grid.ColumnDefinitions>
 20:             <ColumnDefinition/>
 21:             <ColumnDefinition Width="Auto"/>
 22:             <ColumnDefinition Width="2*"/>
 23:         </Grid.ColumnDefinitions>
 24:         
 25:         <TreeView Name="tree" Margin="5" Grid.Row="0" Grid.Column="0"
 26:                   ItemsSource="{x:Static local:Window1.deptList}" SelectedItemChanged="tree_SelectedItemChanged">
 27:             <TreeView.ItemTemplate>
 28:                 <HierarchicalDataTemplate ItemsSource="{Binding Path=Subjects}">
 29:                     <TextBlock Text="{Binding Name}"/>
 30:                     <HierarchicalDataTemplate.ItemTemplate>
 31:                         <DataTemplate>
 32:                             <TextBlock Text="{Binding Name}"/>
 33:                         </DataTemplate>
 34:                     </HierarchicalDataTemplate.ItemTemplate>   
 35:                 </HierarchicalDataTemplate>
 36:             </TreeView.ItemTemplate>
 37:         </TreeView>
 38:         <GridSplitter Grid.Row="0" Grid.Column="1" Background="LightGray"
 39:                       Width="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
 40:         <ListView Name="list" Margin="5" Grid.Row="0" Grid.Column="2"
 41:                   AlternationCount="2" ItemContainerStyle="{StaticResource alternateColor}">
 42:             <ListView.View>
 43:                 <GridView>
 44:                     <GridView.ColumnHeaderTemplate>
 45:                         <DataTemplate>
 46:                             <TextBlock FontWeight="Bold" Margin="5" Text="{Binding}"/>
 47:                         </DataTemplate>
 48:                     </GridView.ColumnHeaderTemplate>
 49:                     
 50:                     <GridViewColumn Width="Auto" Header="Student ID" DisplayMemberBinding="{Binding Path = ID}"/>
 51:                     <GridViewColumn Width="Auto" Header="First Name" DisplayMemberBinding="{Binding Path = FirstName}"/>
 52:                     <GridViewColumn Width="Auto" Header="Last Name" DisplayMemberBinding="{Binding Path = LastName}"/>
 53:                     <GridViewColumn Width="Auto" Header="Subject ID" DisplayMemberBinding="{Binding Path = SubjectID}"/>
 54:                     <GridViewColumn Width="Auto" Header="Grade" DisplayMemberBinding="{Binding Path = Grade}"/>
 55:                 </GridView>
 56:             </ListView.View>
 57:         </ListView>
 58:     </Grid>
 59: </Window>
 60: 

Here is the output of this program.

Tree GridSplitter and ListView

Advertisements

Responses

  1. […] tree and list view control. In fact we have already saw one example that is closely related to this here but in that example we are using LINQ to get the detail […]


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: