Articles → WPF → Data Template In WPF

Data Template In WPF

Data Template is the powerful concept introduced in WPF. Data Template is for changing the visual appearance of data item in control.

To illustrate "changing the visual appearance" let us consider an example in which we have a combo box. In the control I want that list items should contain a check box and a text instead of just text. See figure below.

Picture showing the dropdown with checkbox and text which we want to achieve from data template

Click to Enlarge

In this case we are changing the visual appearance of items in combo box (i.e. from simple textblock to checkbox + textblock).

Let us implement it. First of all we create a sample wpf windows application and inside the form there is a combo box

<ComboBox x:Name="DataTemplateComboBox" 
                    ItemsSource="{Binding}" SelectedValuePath="ID" Width="100" Height="20" 
                    ItemTemplate="{StaticResource ComboBoxDataTemplate}"> </ComboBox>

In the above code width, height and x:Name are self explainatory so I am not going to explain it. Before I will explain rest of the properties let us add some code in the code behind.

To display data in the combo box you need to bind the control with a datasource. In the example I am creating a data table contains an ID and text of the different types of drugs.

  private DataTable GetTable() {
    //
    // Here we create a DataTable with four columns.
    //
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof (int));
    table.Columns.Add("Drug", typeof (string));

    //
    // Here we add five DataRows.
    //
    table.Rows.Add(1, "Indocin");
    table.Rows.Add(2, "Enebrel");
    table.Rows.Add(3, "Hydralazine");
    table.Rows.Add(4, "Combivent");
    table.Rows.Add(5, "Dilantin");
    return table;
  }
  // In the load event of window bind combo box with data table.
  private void Window_Loaded(object sender, RoutedEventArgs e) {
    DataTable dt = GetTable();
    DataTemplateComboBox.DataContext = dt;
  }

Now let us go back to XAML code. In the code I have bind ItemSource (i.e. binding with datatable which we have done in code behind). As you can see above in the method GetTable there are 2 columns ID and Drug in the data table, by assigning ID to SelectedValuePath I am assigning value 1 to first drug name, 2 to second drug name and so on.

Now comes the main part of the discussion i.e. ItemTemplate property. This property is bind to ComboBoxItemTemplate data template. Now let us define data template. Add following code inside the of your code

<DataTemplate x:Key="ComboBoxDataTemplate">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="0.2*"></ColumnDefinition>
			<ColumnDefinition Width="0.8*"></ColumnDefinition>
		</Grid.ColumnDefinitions>
		<CheckBox Grid.Column="0" Width="20" Height="20"></CheckBox>
		<TextBlock Grid.Column="1" Text="{Binding Drug}"></TextBlock>
	</Grid>
</DataTemplate>

In the code I have defined a grid and inside the grid I have defined a checkbox and a textblock while rendering the data in the combobox each list item is replaced by the whole grid.

There is one important thing in the code is the text property of TextBlock. As I have mentioned there is a method called GetTable so that method returns a table with 2 columns i.e. ID and Drug. The column Drug is bind to the TextBlock in data template.

Posted By -	Karan Gupta

Posted On -	Friday, April 30, 2010

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**