Posted by: Zeeshan Amjad | January 4, 2010

Applying Data Template Conditionally Revisited


We have already seen how to apply data template conditionally. Now we are going to apply it on tree view and list view sample. We are going to create two data template to display department and students information. Here is a piece of code to define two data templates.

Here is a department and subjects data template

  1: <DataTemplate x:Key="departmentTemplate">
  2: 	<Border Margin="3" BorderBrush="Brown" Background="LightYellow" BorderThickness="2" CornerRadius="5">
  3: 		<Grid Margin="2">
  4: 			<Grid.ColumnDefinitions>
  5: 				<ColumnDefinition/>
  6: 				<ColumnDefinition/>
  7: 			</Grid.ColumnDefinitions>
  8: 			<Grid.RowDefinitions>
  9: 				<RowDefinition/>
 10: 				<RowDefinition/>
 11: 				<RowDefinition/>
 12: 			</Grid.RowDefinitions>
 13: 			<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
 14: 					   Text="{Binding Name}" FontWeight="Bold"
 15: 					   FontSize="16" Foreground="Black"
 16: 					   HorizontalAlignment="Center" Margin="3"/>
 17: 			<TextBlock Grid.Row="1" Grid.Column="0" Text="Chairman"
 18: 					   Foreground="Black"/>
 19: 			<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Chairman}"
 20: 					   Foreground="Black"/>
 21: 			<TextBlock Grid.Row="2" Grid.Column="0" Text="Description"
 22: 					   Foreground="Black"/>
 23: 			<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Description}"
 24: 					   Foreground="Black"/>
 25: 		</Grid>
 26: 	</Border>
 27: </DataTemplate>
 28: <DataTemplate x:Key="subjectTemplate">
 29: 	<Border Margin="3" BorderBrush="DarkBlue" Background="AliceBlue" BorderThickness="2" CornerRadius="5">
 30: 		<Grid Margin="2">
 31: 			<Grid.ColumnDefinitions>
 32: 				<ColumnDefinition/>
 33: 				<ColumnDefinition/>
 34: 			</Grid.ColumnDefinitions>
 35: 			<Grid.RowDefinitions>
 36: 				<RowDefinition/>
 37: 				<RowDefinition/>
 38: 				<RowDefinition/>
 39: 				<RowDefinition/>
 40: 				<RowDefinition/>
 41: 			</Grid.RowDefinitions>
 42: 			<TextBlock Grid.Row="0" Grid.Column="0"
 43: 					   Text="Student ID" Foreground="Black"/>
 44: 			<TextBlock Grid.Row="0" Grid.Column="1"
 45: 					   Text="{Binding ID}" Foreground="Black"/>
 46: 			<TextBlock Grid.Row="1" Grid.Column="0"
 47: 					   Text="First Name" Foreground="Black"/>
 48: 			<TextBlock Grid.Row="1" Grid.Column="1"
 49: 					   Text="{Binding FirstName}" Foreground="Black"/>
 50: 			<TextBlock Grid.Row="2" Grid.Column="0"
 51: 					   Text="Last Name" Foreground="Black"/>
 52: 			<TextBlock Grid.Row="2" Grid.Column="1"
 53: 					   Text="{Binding LastName}" Foreground="Black"/>
 54: 			<TextBlock Grid.Row="3" Grid.Column="0"
 55: 					   Text="Subject ID" Foreground="Black"/>
 56: 			<TextBlock Grid.Row="3" Grid.Column="1"
 57: 					   Text="{Binding SubjectID}" Foreground="Black"/>
 58: 			<TextBlock Grid.Row="4" Grid.Column="0"
 59: 					   Text="Grade" Foreground="Black"/>
 60: 			<TextBlock Grid.Row="4" Grid.Column="1"
 61: 					   Text="{Binding Grade}" Foreground="Black"/>
 62: 		</Grid>
 63: 	</Border>
 64: </DataTemplate>
 65: 

Now we are inherit class from DataTemplateSelector. Here is a code of it.

  1: public class MyTemplateSelector : DataTemplateSelector
  2: {
  3:     public DataTemplate DepartmentTemplate
  4:     { get; set; }
  5: 
  6:     public DataTemplate SubjectTemplate
  7:     { get; set; }
  8: 
  9:     public override DataTemplate SelectTemplate(object item, DependencyObject container)
 10:     {
 11:         Department dept = item as Department;
 12: 
 13:         if (dept != null)
 14:             return DepartmentTemplate;
 15: 
 16:         Student student = item as Student;
 17: 
 18:         if (student != null)
 19:             return SubjectTemplate;
 20: 
 21:         return base.SelectTemplate(item, container);
 22:     }
 23: }
 24: 

Now we are using this class in XAML.

  1: <local:MyTemplateSelector x:Key="myTemplateSelectorObj" 
  2:   DepartmentTemplate="{StaticResource departmentTemplate}"
  3:   SubjectTemplate="{StaticResource subjectTemplate}"/>
  4: 

Next step is using this my template in our list box.

  1: <ListBox Name="list" Margin="5" Grid.Row="0" Grid.Column="2"                  
  2: 	 ItemTemplateSelector="{StaticResource myTemplateSelectorObj}"
  3: 	 HorizontalContentAlignment="Stretch">
  4: </ListBox>
  5: 

Now we are writing a handler for tree view item change.

  1:         private void tree_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
  2:         {
  3:             list.Items.Clear();
  4: 
  5:             Subject selectedSubject = tree.SelectedItem as Subject;
  6: 
  7:             if (selectedSubject != null)
  8:             {
  9:                 int subjectID = selectedSubject.ID;
 10: 
 11:                 IEnumerable<Student> selectedStudents = from fn in studentList
 12:                                                         where fn.SubjectID == subjectID
 13:                                                         select fn;
 14: 
 15:                 foreach (Student student in selectedStudents)
 16:                 {
 17:                     list.Items.Add(student);
 18:                 }
 19:             }
 20: 
 21:             Department dept = tree.SelectedItem as Department;
 22: 
 23:             if (dept != null)
 24:             {
 25:                 list.Items.Add(dept);
 26:             }
 27:         }
 28: 

It is important to note that, although the tree view store information about department and subject, but select template method of our MyTemplateSelector class checks Department and Subjects. Because we are inserting Department and Subjects object in the list box.

Here is a 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:         <DataTemplate x:Key="departmentTemplate">
  8:             <Border Margin="3" BorderBrush="Brown" Background="LightYellow" BorderThickness="2" CornerRadius="5">
  9:                 <Grid Margin="2">
 10:                     <Grid.ColumnDefinitions>
 11:                         <ColumnDefinition/>
 12:                         <ColumnDefinition/>
 13:                     </Grid.ColumnDefinitions>
 14:                     <Grid.RowDefinitions>
 15:                         <RowDefinition/>
 16:                         <RowDefinition/>
 17:                         <RowDefinition/>
 18:                     </Grid.RowDefinitions>
 19:                     <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
 20:                                Text="{Binding Name}" FontWeight="Bold"
 21:                                FontSize="16" Foreground="Black"
 22:                                HorizontalAlignment="Center" Margin="3"/>
 23:                     <TextBlock Grid.Row="1" Grid.Column="0" Text="Chairman"
 24:                                Foreground="Black"/>
 25:                     <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Chairman}"
 26:                                Foreground="Black"/>
 27:                     <TextBlock Grid.Row="2" Grid.Column="0" Text="Description"
 28:                                Foreground="Black"/>
 29:                     <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Description}"
 30:                                Foreground="Black"/>
 31:                 </Grid>
 32:             </Border>
 33:         </DataTemplate>
 34:         <DataTemplate x:Key="subjectTemplate">
 35:             <Border Margin="3" BorderBrush="DarkBlue" Background="AliceBlue" BorderThickness="2" CornerRadius="5">
 36:                 <Grid Margin="2">
 37:                     <Grid.ColumnDefinitions>
 38:                         <ColumnDefinition/>
 39:                         <ColumnDefinition/>
 40:                     </Grid.ColumnDefinitions>
 41:                     <Grid.RowDefinitions>
 42:                         <RowDefinition/>
 43:                         <RowDefinition/>
 44:                         <RowDefinition/>
 45:                         <RowDefinition/>
 46:                         <RowDefinition/>
 47:                     </Grid.RowDefinitions>
 48:                     <TextBlock Grid.Row="0" Grid.Column="0"
 49:                                Text="Student ID" Foreground="Black"/>
 50:                     <TextBlock Grid.Row="0" Grid.Column="1"
 51:                                Text="{Binding ID}" Foreground="Black"/>
 52:                     <TextBlock Grid.Row="1" Grid.Column="0"
 53:                                Text="First Name" Foreground="Black"/>
 54:                     <TextBlock Grid.Row="1" Grid.Column="1"
 55:                                Text="{Binding FirstName}" Foreground="Black"/>
 56:                     <TextBlock Grid.Row="2" Grid.Column="0"
 57:                                Text="Last Name" Foreground="Black"/>
 58:                     <TextBlock Grid.Row="2" Grid.Column="1"
 59:                                Text="{Binding LastName}" Foreground="Black"/>
 60:                     <TextBlock Grid.Row="3" Grid.Column="0"
 61:                                Text="Subject ID" Foreground="Black"/>
 62:                     <TextBlock Grid.Row="3" Grid.Column="1"
 63:                                Text="{Binding SubjectID}" Foreground="Black"/>
 64:                     <TextBlock Grid.Row="4" Grid.Column="0"
 65:                                Text="Grade" Foreground="Black"/>
 66:                     <TextBlock Grid.Row="4" Grid.Column="1"
 67:                                Text="{Binding Grade}" Foreground="Black"/>
 68:                 </Grid>
 69:             </Border>
 70:         </DataTemplate>
 71:         <local:MyTemplateSelector x:Key="myTemplateSelectorObj" 
 72:                                   DepartmentTemplate="{StaticResource departmentTemplate}"
 73:                                   SubjectTemplate="{StaticResource subjectTemplate}"/>
 74:     </Window.Resources>
 75:     <Grid Background="Wheat">
 76:         <Grid.ColumnDefinitions>
 77:             <ColumnDefinition/>
 78:             <ColumnDefinition Width="Auto"/>
 79:             <ColumnDefinition Width="2*"/>
 80:         </Grid.ColumnDefinitions>
 81:         
 82:         <TreeView Name="tree" Margin="5" Grid.Row="0" Grid.Column="0"
 83:                   ItemsSource="{x:Static local:Window1.deptList}" SelectedItemChanged="tree_SelectedItemChanged">
 84:             <TreeView.ItemTemplate>
 85:                 <HierarchicalDataTemplate ItemsSource="{Binding Path=Subjects}">
 86:                     <TextBlock Text="{Binding Name}"/>
 87:                     <HierarchicalDataTemplate.ItemTemplate>
 88:                         <DataTemplate>
 89:                             <TextBlock Text="{Binding Name}"/>
 90:                         </DataTemplate>
 91:                     </HierarchicalDataTemplate.ItemTemplate>   
 92:                 </HierarchicalDataTemplate>
 93:             </TreeView.ItemTemplate>
 94:         </TreeView>
 95:         <GridSplitter Grid.Row="0" Grid.Column="1" Background="LightGray"
 96:                       Width="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
 97:         <ListBox Name="list" Margin="5" Grid.Row="0" Grid.Column="2"                  
 98:                  ItemTemplateSelector="{StaticResource myTemplateSelectorObj}"
 99:                  HorizontalContentAlignment="Stretch">
100:         </ListBox>
101:     </Grid>
102: </Window>
103: 

And here is a 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: 
 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.Chairman = "Bob Smit";
 39:             dept1.Description = "Applied Math Department";
 40:             dept1.Subjects = sublist1;
 41: 
 42:             deptList.Add(dept1);
 43: 
 44:             List<Subject> sublist2 = new List<Subject>();
 45:             sublist2.Add(new Subject(200100, "Business Accounting"));
 46:             sublist2.Add(new Subject(200101, "Accounting 1"));
 47:             sublist2.Add(new Subject(200102, "Accounting 2"));
 48:             sublist2.Add(new Subject(200201, "Accounting 3"));
 49:             sublist2.Add(new Subject(200201, "Accounting 4"));
 50:             sublist2.Add(new Subject(200203, "Cost Accounting"));
 51:             sublist2.Add(new Subject(200205, "Tax Accounting"));
 52:             sublist2.Add(new Subject(200214, "Auditing"));
 53:             Department dept2 = new Department();
 54:             dept2.Name = "Accounting";
 55:             dept2.Chairman = "Jon Thompson";
 56:             dept2.Description = "Accounting and Management";
 57:             dept2.Subjects = sublist2;
 58: 
 59:             deptList.Add(dept2);
 60: 
 61:             List<Subject> sublist3 = new List<Subject>();
 62:             sublist3.Add(new Subject(300101, "Introduction to CS"));
 63:             sublist3.Add(new Subject(300106, "OOP"));
 64:             sublist3.Add(new Subject(300121, "Visual Basic"));
 65:             sublist3.Add(new Subject(300170, "Security 1"));
 66:             sublist3.Add(new Subject(300201, "Computer Science"));
 67:             sublist3.Add(new Subject(300208, "C++ Programming"));
 68:             sublist3.Add(new Subject(300232, "DB Administrator"));
 69:             sublist3.Add(new Subject(300241, "Networking"));
 70:             Department dept3 = new Department();
 71:             dept3.Name = "Computer Science";
 72:             dept3.Chairman = "Chris Nathan";
 73:             dept3.Description = "Computer Engineering and Science";
 74:             dept3.Subjects = sublist3;
 75: 
 76:             deptList.Add(dept3);
 77: 
 78:             studentList.Add(new Student(10, "Alex", "Martin", 100210, "A"));
 79:             studentList.Add(new Student(10, "Alex", "Martin", 300101, "A"));
 80:             studentList.Add(new Student(10, "Alex", "Martin", 200101, "B"));
 81:             studentList.Add(new Student(12, "Joe", "Brown", 100101, "A"));
 82:             studentList.Add(new Student(12, "Joe", "Brown", 300170, "B"));
 83:             studentList.Add(new Student(12, "Joe", "Brown", 200203, "A"));
 84:             studentList.Add(new Student(16, "David", "Frank", 100212, "A"));
 85:             studentList.Add(new Student(16, "David", "Frank", 100218, "A"));
 86:             studentList.Add(new Student(16, "David", "Frank", 100213, "A"));
 87:             studentList.Add(new Student(16, "David", "Frank", 300101, "A"));
 88:             studentList.Add(new Student(16, "David", "Frank", 200100, "B"));
 89:             studentList.Add(new Student(18, "Patrick", "Justin", 200100, "A"));
 90:             studentList.Add(new Student(18, "Patrick", "Justin", 300101, "A"));
 91:             studentList.Add(new Student(18, "Patrick", "Justin", 100210, "A"));
 92:             studentList.Add(new Student(18, "Patrick", "Justin", 100211, "A"));
 93:             studentList.Add(new Student(25, "Ken", "White", 100210, "B"));
 94:             studentList.Add(new Student(25, "Ken", "White", 300101, "B"));
 95:             studentList.Add(new Student(25, "Ken", "White", 200101, "A"));
 96: 
 97:         }
 98: 
 99:         private void tree_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
100:         {
101:             list.Items.Clear();
102: 
103:             Subject selectedSubject = tree.SelectedItem as Subject;
104: 
105:             if (selectedSubject != null)
106:             {
107:                 int subjectID = selectedSubject.ID;
108: 
109:                 IEnumerable<Student> selectedStudents = from fn in studentList
110:                                                         where fn.SubjectID == subjectID
111:                                                         select fn;
112: 
113:                 foreach (Student student in selectedStudents)
114:                 {
115:                     list.Items.Add(student);
116:                 }
117:             }
118: 
119:             Department dept = tree.SelectedItem as Department;
120: 
121:             if (dept != null)
122:             {
123:                 list.Items.Add(dept);
124:             }
125:         }
126:     }
127: 
128:     public class MyTemplateSelector : DataTemplateSelector
129:     {
130:         public DataTemplate DepartmentTemplate
131:         { get; set; }
132: 
133:         public DataTemplate SubjectTemplate
134:         { get; set; }
135: 
136:         public override DataTemplate SelectTemplate(object item, DependencyObject container)
137:         {
138:             Department dept = item as Department;
139: 
140:             if (dept != null)
141:                 return DepartmentTemplate;
142: 
143:             Student student = item as Student;
144: 
145:             if (student != null)
146:                 return SubjectTemplate;
147: 
148:             return base.SelectTemplate(item, container);
149:         }
150:     }
151: 
152:     public class Subject
153:     {
154:         public Subject(int id, String name)
155:         {
156:             ID = id;
157:             Name = name;
158:         }
159: 
160:         public int ID
161:         { get; set; }
162: 
163:         public String Name
164:         { get; set; }
165:     }
166: 
167:     public class Department
168:     {
169:         public Department()
170:         {
171:             this.Subjects = new List<Subject>();
172:         }
173: 
174:         public String Name
175:         { get; set; }
176: 
177:         public String Chairman
178:         { get; set; }
179: 
180:         public String Description
181:         { get; set; }
182: 
183:         public List<Subject> Subjects
184:         { get; set; }
185:     }
186: 
187:     public class Student
188:     {
189:         public Student()
190:         {
191:         }
192: 
193:         public Student(int id, String firstName, String lastName, int subjectID, String grade)
194:         {
195:             ID = id;
196:             FirstName = firstName;
197:             LastName = lastName;
198:             SubjectID = subjectID;
199:             Grade = grade;
200:         }
201: 
202:         public int ID
203:         { get; set; }
204: 
205:         public String FirstName
206:         { get; set; }
207: 
208:         public String LastName
209:         { get; set; }
210: 
211:         public int SubjectID
212:         { get; set; }
213: 
214:         public String Grade
215:         { get; set; }
216:     }
217: }
218: 

This will be the output of the program when we selects the department name from the tree view.

Tree GridSplitter and ListView_02

And this is the output when we select subjects from the tree view.

Tree GridSplitter and ListView_03

Advertisements

Responses

  1. […] TreeView, GridSplitter, ListBox with Value Converter We have already make one program to display the department name, subjects offer by the department and students enrolled in that […]

  2. […] saw one example of applying data template conditionally here. Now we are going to apply the data template conditionally on data grid. The main difference […]


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: