WPF DataTemplateSelector

Kailash Chandra Behera | Thursday, August 27, 2020

Introduction

WPF DataTemplateSelector class allows you to change the WPF DataTemplate dynamically at runtime, here this blog we will discuss how to use WPF DataTemplateSelector to switch WPF DataTemplate at runtime.

Getting Started

WPF DataTemplateSelector class allows you to change the WPF DataTemplate dynamically at runtime. for example, let’s say you have a WPF ListBox where you want to display a list of employees and the employee details are varies based on an employee type(Permanente and Contract).

For example, a bonus is applicable to permanent employees and is not applicable for contract employees. You have to display the bonus field for permanent employees and hide that field for contract employees in WPF ListBox Item while displaying the employee list in ListBox.

There are various ways available in WPF to do that, but let’s say you want to display the employee’s details using the WPF Listbox item template and WPF DataTemplate.

To do that you have to declare a two different WPF DataTemplate to display different types of employee information at run time when DataSource (Employee List) binds to the ListBox and the ListBox should use the appropriate WPF DataTemplate for the employee based on the employee data.

WPF DataTemplateSelector class helps in this scenario, it allows switching WPF DataTemplate at runtime. Here in the below code example declare two different DataTeplate for Permanent Employee and Contract Employee and use those DataTemplate in WPF ListBox for employees based their type with the help of DataTemplateSelector class.

Demonstrtion

  1. Open Visual Studio and create a new WPF project with help of Template Window.

  2. Add a new class into project and name it as EmpDataTemplateSelector.

  3. Inherit the DataTemplateSelector class and implement the functions.

  4. Your EmpDataTemplateSelector class should look like the below code.

     public class EmpDataTemplateSelector : DataTemplateSelector  
   {  
     public override DataTemplate SelectTemplate(object item, DependencyObject container)  
     {  
       FrameworkElement element = container as FrameworkElement;  
       if (element != null && item != null && item is Employee)  
       {  
         Employee emp = item as Employee;  
         if (emp.Type == "Permanent")  
           return  
             element.FindResource("PerDataTemplate") as DataTemplate;  
         else  
           return  
             element.FindResource("CorDataTemplate") as DataTemplate;  
       }  
       return null;  
     }  
   }

  5. Open the MainWindow.xml in design mode and Windows resource declare a resource for your template selector class like the below code. 

     <Window.Resources>  
 <local:EmpDataTemplateSelector x:Key="empDataTemplateSelector"/>  
 </Window.Resources>

  6. Add the below WPF ListBox code to your MainWindow.

     <ListBox ItemsSource="{Binding Source={StaticResource myTodoList}}"  
      ItemTemplateSelector="{StaticResource empDataTemplateSelector}"  
      HorizontalContentAlignment="Stretch"/>

  7. Now open the App.xml declare two different WPF DataTemplate in application resources like below code given in the button of this blog.

App.xml File
  <Application.Resources>  
   <DataTemplate x:Key="PerEmployee">  
           <Border Padding="5" Margin="2" BorderThickness="1" Height="150" CornerRadius="5" BorderBrush="Black">  
         <Grid>  
           <Grid.RowDefinitions>  
             <RowDefinition Height="50"/>  
             <RowDefinition Height="50"/>  
             <RowDefinition Height="50"/>  
             <RowDefinition Height="*"/>  
           </Grid.RowDefinitions>  
           <TextBlock>  
             <Run Text="Employe Name :"/>  
             <Run Text="Permanent Employe "/>  
           </TextBlock>  
           <TextBlock>  
             <Run Text="Post Name :"/>  
             <Run Text="Engineer"/>  
           </TextBlock>  
           <TextBlock>  
             <Run Text="Bonous :"/>  
             <Run Text="Rs. 2,00,000.00"/>  
           </TextBlock>  
         </Grid>  
       </Border>  
     </DataTemplate>  
     <DataTemplate x:Key="ConEmployee">  
       <Border Padding="5" Margin="2" BorderThickness="1" Height="150" CornerRadius="5" BorderBrush="Black">  
         <Grid>  
           <Grid.RowDefinitions>  
             <RowDefinition Height="50"/>  
             <RowDefinition Height="50"/>  
             <RowDefinition Height="50"/>  
             <RowDefinition Height="*"/>  
           </Grid.RowDefinitions>  
           <TextBlock>  
             <Run Text="Employe Name :"/>  
             <Run Text="Contract Employe "/>  
           </TextBlock>  
           <TextBlock>  
             <Run Text="Post Name :"/>  
             <Run Text="Engineer"/>  
           </TextBlock>  
         </Grid>  
       </Border>  
     </DataTemplate>  
   </Application.Resources>

Summary

In the above, we demonstrated how to use the WPF DataTemplateSelector in WPF to switch between WPF DataTemplate at run time, I hope you have enjoyed it a lot.

Thanks

By at