Introduction to Templates–DataTemplate

Download the source code from here.

Most controls have some type of content, and that content often comes from data that you are binding to. In this sample, the data is the name and id of the student. In WPF, you use a DataTemplate to define the visual representation of data. Basically, what you put into a DataTemplate determines what the data looks like in the rendered application. For student name and id to be displayed  and highlighted, you create a DataTemplate as a resource:

            <DataTemplate DataType="{x:Type localXAMLClass:student}" >
                <Border BorderBrush="AliceBlue" BorderThickness="2">
                    <Grid Margin="10">
                        <TextBlock>
                            <Run Text="The Name of the student is "> </Run>
                            <TextBlock Background="LightBlue" Text="{Binding name}"></TextBlock>
                            <Run Text=" And his ID is "></Run>
                            <TextBlock Background="LightBlue" Text="{Binding id}" ></TextBlock>
                        </TextBlock>
                    </Grid>
                </Border>
            </DataTemplate>

Notice that the DataType property is very similar to the TargetType property of the Style. If your DataTemplate is in the resources section, when you specify the DataType property to a type and not assign it an x:Key, the DataTemplate is applied whenever that type appears. You always have the option to assign the DataTemplate with an x:Key and then set it as a StaticResource for properties that take DataTemplate types, such as the ItemTemplate property or the ContentTemplate property.

Before we dive into the data template used in the WPF application let’s see how a simple example works. First take a look at a simple class which represents a student:

namespace IntroductiontoTemplates1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

    public class student
    {
        private string Name;
        private int Id;

        public string name
        {
            get{return Name;}
            set{Name = value;}
        }

        public int id
        {
            get { return Id;}
            set { Id = value; }
        }
    }
}

 

The student class contains two properties name and id. If we were to display an instance of this class in a ContentControl, the XAML would be something like this:

1. <Window x:Class="IntroductiontoTemplates1.MainWindow"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
4.         Title="MainWindow" Height="350" Width="525"
5.         xmlns:localXAMLClass="clr-namespace:IntroductiontoTemplates1" >
6.     <Grid>
7.         <Grid.Resources>
8.             <localXAMLClass:student x:Key="studentXAMLObject" name="kishore1021" id="1"></localXAMLClass:student>
9.         </Grid.Resources>
10.         <ContentControl
11.             Content="{StaticResource studentXAMLObject}" >
12.         </ContentControl>
13.     </Grid>
14. </Window>

 

The UI created by that XAML looks like the following:

That certainly isn’t too impressive. What you see above is what gets displayed as a result of calling ToString() on the student object referenced by the ContentControl. Let’s take a moment to examine what is going on here.

The example above creates an instance of the student class, which represents the student kishore1021. It also creates a ContentControl which is told to display that student object somehow. The ContentControl examines the student object and tries to figure out how to render it, but since student does not derive from UIElement it has no way of knowing how to do so. Once ContentControl is devoid of options, it ends up calling ToString() on the student object and then displays that text.

Override the inherited member Object.ToString() implementation.

        public override string ToString()
        {
            return "Returned from ToString() of student class";
        }

 

Now that we’ve seen how boring a student object looks in the absence of data templates, it’s time to add one into the mix. Here’s the same XAML used before, only this time there is a template for the student class:

            <DataTemplate DataType="{x:Type localXAMLClass:student}" >
                <Border BorderBrush="AliceBlue" BorderThickness="2">
                    <Grid Margin="10">
                        <TextBlock>
                            <Run Text="The Name of the student is "> </Run>
                            <TextBlock Background="LightBlue" Text="{Binding name}"></TextBlock>
                            <Run Text=" And his ID is "></Run>
                            <TextBlock Background="LightBlue" Text="{Binding id}" ></TextBlock>
                        </TextBlock>
                    </Grid>
                </Border>
            </DataTemplate>

 

Essentially, the DataTemplate in the above example defines that whenever there is a student class object, it should appear as the text “The name of the student is <xyz> And his ID is <322323>. With this DataTemplate, our application now looks like this:

 

That is how the XAML renders to show the proper data content: The student object is displayed much more intelligently when a data template is applied. The information held within it is now displayed as part of a sentence, and that sentence is wrapped in a curved blue border. Keep in mind that the rendition of a student object seen above is completely arbitrary. It can be displayed in whatever way is considered appropriate for the application in which it exists.

The complete code of the .cs file is as follows

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace IntroductiontoTemplates1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

    public class student
    {
        private string Name;
        private int Id;

        public string name
        {
            get{return Name;}
            set{Name = value;}
        }

        public int id
        {
            get { return Id;}
            set { Id = value; }
        }

        public override string ToString()
        {
            return "Returned from ToString() of student class";
        }

    }

}

The complete XAML code is as follows

<Window x:Class="IntroductiontoTemplates1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
        Title="MainWindow" Height="350" Width="525"
        xmlns:localXAMLClass="clr-namespace:IntroductiontoTemplates1" >
    <Grid>
        <Grid.Resources>
            <DataTemplate DataType="{x:Type localXAMLClass:student}" >
                <Border BorderBrush="Red" BorderThickness="2">
                    <Grid Margin="10">
                        <TextBlock>
                            <Run Text="The Name of the student is "> </Run>
                            <TextBlock Background="LightBlue" Text="{Binding name}"></TextBlock>
                            <Run Text=" And his ID is "></Run>
                            <TextBlock Background="LightBlue" Text="{Binding id}" ></TextBlock>
                        </TextBlock>
                    </Grid>
                </Border>
            </DataTemplate>

            <localXAMLClass:student x:Key="studentXAMLObject" name="kishore1021" id="1"></localXAMLClass:student>
        </Grid.Resources>
        
        <ContentControl
            Content="{StaticResource studentXAMLObject}" >
        </ContentControl>
    </Grid>
</Window>

 

Download the source code from here.

 

All men dream but not equally. Those who dream by night in the dusty recesses of their minds wake in the day to find that it was vanity; but the dreamers of the day are dangerous men, for they may act their dream with open eyes to make it possible. – T.E. Lawrence

DataContext in WPF

DataContext

DataContext is one of the most fundamental concepts in Data Binding. The Binding object needs to get its data from somewhere, and there are a few ways to specify the source of the data like using Source property directly in the Binding, inheriting a DataContext from the nearest element when traversing up in the tree, setting the ElementName and RelativeSource properties in the Binding object.

User interface elements in WPF have a DataContext dependency property. That property has the aforementioned "value inheritance" feature enabled, so if you set the DataContext on an element to a Student object, the DataContext property on all of its logical descendant elements will reference that Student object too. This means that all data bindings contained within that root element’s element tree will automatically bind against the Student object, unless explicitly told to bind against something else. This feature is extremely useful while designing WPF applications. In the following example, we are setting the DataContext in the code and all the elements in the window gets to access the Student object.

Exposing the entire object as DataContext from the code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace DataContextSample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Student objstudent = new Student();
            objstudent.StudentName = "Kishore1021";
            this.DataContext = objstudent;
        }

        public class Student
        {
            private string studentname;

            public string StudentName
            {
                get
                {
                    return studentname;
                }
                set
                {
                    studentname = value;
                }
            }

        }
    }
}

 

XAML for the above code

1. <Window x:Class="DataContextSample.MainWindow"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
4.         Title="MainWindow" Height="350" Width="525">
5.     <Grid>
6.         <Grid.RowDefinitions>
7.             <RowDefinition Height="*"> </RowDefinition>
8.         </Grid.RowDefinitions>
9.         <TextBox Name="TextBox1" Text="{Binding Path=StudentName}"></TextBox>
10.     </Grid>
11. </Window>

 

Download the source code from Microsoft here

 

Exposing just a single property value from the code:

In the Student class, I added one more property Address. In the MainWindow, an Employee object is created and initialized with some values and we are setting just the address as the datacontext using this.DataContext = objstudent.Address; in line28

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 DataContextSample
16. {
17.     /// <summary>
18.     /// Interaction logic for MainWindow.xaml
19.     /// </summary>
20.     public partial class MainWindow : Window
21.     {
22.         public MainWindow()
23.         {
24.             InitializeComponent();
25.             Student objstudent = new Student();
26.             objstudent.StudentName = "Kishore1021";
27.             objstudent.Address = "Washington DC";
28.             this.DataContext = objstudent.Address;
29.         }
30.  
31.         public class Student
32.         {
33.             private string studentname;
34.             private string address;
35.  
36.             public string Address
37.             {
38.                 get { return address; }
39.                 set { address = value; }
40.             }
41.  
42.             public string StudentName
43.             {
44.                 get
45.                 {
46.                     return studentname;
47.                 }
48.                 set
49.                 {
50.                     studentname = value;
51.                 }
52.             }
53.  
54.  
55.         }
56.     }
57. }

 

In the XAML code, created two textblocks and assigned the address. Keep a watch on how I am using the DataContext values. Since we are just setting the Address as DataContext, TextBlock1 binding doesn’t know where to find in that address property. TextBlock2 binds to whatever is there in the datacontext, which is just the address property..

1. <Window x:Class="DataContextSample.MainWindow"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
4.         Title="MainWindow" Height="350" Width="525">
5.     <Grid>
6.         <Grid.RowDefinitions>
7.             <RowDefinition Height="*"> </RowDefinition>
8.             <RowDefinition Height="*"></RowDefinition>
9.         </Grid.RowDefinitions>
10.         <TextBlock Grid.Row="0" Name="TextBlock1" Text="{Binding Path=Address}"></TextBlock>
11.         <TextBlock Grid.Row="1" Name="TextBlock2" Text="{Binding Path=.}"></TextBlock>
12.     </Grid>
13. </Window>

 

Download the source code from here

To Understand the above concept better, see the following code. I have an employee class and one more class called AnotherClass and used employee class as a property inside that class. In the mainwondow class, we are creating an employee class object and initializing it with some values. Then we are creating an anotherclass object and initializing with the previously created employee object as well as one more property of anotherclass “State” and then we are assigning this anotherclass object as dataconext. There are several ways to specify the binding source object. Using the DataContext property on a parent element is useful when you are binding multiple properties to the same source. However, sometimes it may be more appropriate to specify the binding source on individual binding declarations.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;

namespace Bindingtoclasses
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Employee P = new Employee("Hello World");
            P.State = "MD";
            AnotherClass c = new AnotherClass();
            c.EmployeeNameTest = P;
            c.AnotherField = "Another Value";
            this.DataContext = c;
        }
    }

    public class AnotherClass : INotifyPropertyChanged
    {

        private string anotherfield;
        private Employee emp;

        public string AnotherField
        {
            get { return anotherfield; }
            set
            {
                anotherfield = value;
                OnPropertyChanged("AnotherField");
            }
        }

        public Employee EmployeeNameTest
        {
            get { return emp; }
            set
            {
                emp = value;
                OnPropertyChanged("EmployeeNameTest");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        //// Create the OnPropertyChanged method to raise the event
        protected void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(name));
            }
        }

        public override string ToString()
        {
            return string.Format("My ToString implementation of AnotherClass");
        }

    }

    // This class implements INotifyPropertyChanged to support one-way and two-way bindings
    // (such that the UI element updates when the source has been changed dynamically)
    public class Employee : INotifyPropertyChanged
    {
        private string name;
        private string state;
        // Declare the event
        public event PropertyChangedEventHandler PropertyChanged;

        public Employee()
        {
        }

        public Employee(string value)
        {
            this.name = value;
        }

        public string EmployeeName
        {
            get { return name; }
            set
            {
                name = value;
                // Call OnPropertyChanged whenever the property is updated
               OnPropertyChanged("EmployeeName");
            }
        }

        public string State
        {
            get { return state; }
            set
            {
                state = value;
                OnPropertyChanged("State");
            }
        }

        //// Create the OnPropertyChanged method to raise the event
        protected void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(name));
            }
        }
    }

}

 

In the XAML: Even though we assigned the entire anotherclass object as datacontext, I am just assigning the EmployeeNameTest object in it as the datacontext for the grid using the code <Grid DataContext="{Binding Path=EmployeeNameTest}"> .

<Window x:Class="Bindingtoclasses.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
        xmlns:src="clr-namespace:Bindingtoclasses"

        Title="MainWindow" Height="350" Width="525">
    <Grid DataContext="{Binding Path=EmployeeNameTest}">
        <Grid.Resources>
                <src:Employee x:Key="myDataSource" EmployeeName="Kishore1021"/>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBox Name="TextBox1" Grid.Row="0" Text="{Binding Source={StaticResource myDataSource}, Path=EmployeeName, UpdateSourceTrigger=PropertyChanged}"/>
        <TextBox Name="TextBox2" Grid.Row="1" Text="{Binding Source= {StaticResource myDataSource}, Path=EmployeeName}"></TextBox>
        <TextBox Name="TextBox3" Grid.Row="2" Text="{Binding Path=EmployeeName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></TextBox>
        <TextBox Name="TextBox4" Grid.Row="3" Text="{Binding Path=EmployeeName}"></TextBox>
        <TextBlock Name="TextBlock1" Grid.Row="4" Text="{Binding Path=EmployeeName}"/>
        <TextBlock Name="TextBlock2" Grid.Row="5" Text="{Binding Path=AnotherField}"/>
        
    </Grid>
</Window>

 

Download the source code from here

 

Priority of Source VS DataContext:

Code Snippet

<Window x:Class="DataBinding_Source_Property.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
       Title="MainWindow" Height="350" Width="525"
       xmlns:kishore="clr-namespace:DataBinding_Source_Property">
   <Window.Resources>
       <kishore:Person x:Key="PersonXAMLDataSource" FullName="Kishore1021"/>
        <kishore:Person x:Key="Person1" FullName="Person1Name"/>
    </Window.Resources>
   
    <Grid DataContext="{StaticResource Person1}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"> </RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
       
        <TextBox Grid.Row="0" Text="{Binding Source={StaticResource PersonXAMLDataSource}, Path=FullName}"></TextBox>
        <TextBox Grid.Row="1" Text="{Binding Path=FullName}"/>
    </Grid>
</Window>

The first TextBox inherits the DataContext from the parent Grid as well as has a Source set in the Binding object too. In this case, Source takes priority, causing the TextBox to bind to the Name property of the resource with key “PersonXAMLDataSource” – this displays “kishore1021”. The second inherits the DataContext from the parent Grid causing the TextBox to bind to the Name property of the resource with key “Person1”, causing it to display “Person1Name”. WPF will search up the element tree until it encounters a DataContext object if a Source or RelativeSource is not used. Once it finds a non-null DataContext, that object is used for binding. Useful for binding several properties to the same object.

Most data bound applications tend to use DataContext much more heavily than Source. Use DataContext only when you need to bind more than one property to a particular source. When binding only one property to a source, always use Source. The reason for this is ease of debugging – We can see all the information about the Binding in one place than search for the nearest DataContext to understand what is going on. Other than setting the DataContext property on an element directly, inheriting the DataContext value from an ancestor , and explicitly specifying the binding source by setting the Source property on the Binding, you can also use the ElementName property or the RelativeSource property to specify the binding source. The ElementName property is useful when you are binding to other elements in your application, such as when you are using a slider to adjust the width of a button. The RelativeSource property is useful when the binding is specified in a ControlTemplate or a Style.

"We must be silent before we can listen. We must listen before we can learn. We must learn before we can prepare. We must prepare before we can serve. We must serve before we can lead." – William Arthur Ward