DataTemplate In WPF

Data template is a bit of XAML that describes how bound data is displayed. A data template can contain elements that are each bound to a data property along with additional markup that describes layout, color and other appearance. DataTemplate is, basically, used to specify the appearance of data displayed by a control not the appearance of the control itself.

Therefore, DataTemplate can be applied to ContentControls or ItemsControl. The name of the property to which you can assign a DataTemplate depends whether the control is a content control or an ItemsControl. So what are ContentControls and ItemsControl?

The controls that can contain a single item (single logical child of type Object) are called “content controls”. These controls derive from the ContentControl base class. Controls that can contain a collection of items (many logical children of type Object) are called “items controls”.

Let’s understand with an example:

We want to fill a Listbox with employee details such as employee name, employee number, address and telephone number.



But, Listbox can be bounded only with one data property of the employee class (shown below). If we bind Listbox itemsource property to employee array, binding calls ToString() method of the class and populates the listbox with the return value.


If ToString () method is overridden and it returns the desired value, the same can be displayed in the listbox.

public override string  ToString()
        {
            return this.Name;
        }

Data display:



In order to achieve what we started with, we need to do more. Therefore, we need to change the datatemplate of the listbox.



Datatemplate should be changed in such a way that details of an employee are displayed as shown above.

<DataTemplate x:Key="myTemplate">
            <StackPanel>
                <Label Background="Purple" Foreground="White" BorderBrush="Red" BorderThickness="4">
                    <Label.Content>
                        <WrapPanel HorizontalAlignment="Stretch">
                            <TextBlock>Emplyoee Name:</TextBlock>
                            <TextBlock Text="{Binding Name}" />
                        </WrapPanel>
                    </Label.Content>
                </Label>
                <Label  BorderBrush="Black" HorizontalAlignment="Stretch" Background="Yellow" BorderThickness="3" Foreground="Blue">
                    <Label.Content>
                        <StackPanel>
                            <WrapPanel>
                                <TextBlock> Employee Nr.:</TextBlock>
                                <TextBlock Text="{Binding EmployeeNr}"/>
                            </WrapPanel>
                            <WrapPanel>
                                <TextBlock> Department:</TextBlock>
                                <TextBlock Text="{Binding Dept}"/>
                            </WrapPanel>
                            <WrapPanel>
                                <TextBlock> Telephone:</TextBlock>
                                <TextBlock Text="{Binding TelephoneNr}"/>
                            </WrapPanel>
                        </StackPanel>
                    </Label.Content>
                </Label>
            </StackPanel>
        </DataTemplate>

It is recommended that data templates are defined in a resource collection and referenced in your element rather than defining them inline. All that is required to reuse a data template in this manner is to define the template in a resource collection and set a Key property for the template, as shown here:

<Window.Resources>
        <DataTemplate x:Key="myTemplate">

<!--- details here - - >

</DataTemplate>
    </Window.Resources>

Then you can set the template by referring to the resource, as shown in bold here:

<ListBox ItemTemplate="{StaticResource myTemplate}" Name="empList" />

When binding a property or list directly to a control, you are limited to binding a single property. With data templates, however, you can bind more than one property in each item, thereby displaying multiple bits of related data together.

 

Read more articles on WPF:

• How To Fire Button Click Event In MVVM Pattern Using Prism Library In WPF
• Building Custom Email Client In WPF Using C#