WPF Templates
What is a template in laymen’s term? A template is a shape or mold which we can apply on a look less or some randomly shaped piece of some object. E.g. suppose we have some randomly shaped clay and we want that clay to attain some shape may be like circle or triangle. This we can achieve by having a pre molded iron shape and pressing hard on that clay by keeping the other properties of clay intact such as hardness. WPF templates help us to achieve the same functionality. The controls in WPF are basically look less or they have some pre-defined shape which we may want to change in some scenario.
There are two ways in which we can alter the look and feel of a control in WPF Templates and they are
- ControlTemplate
- DataTemplate
I will discuss here all of them one by one.
-
ControlTemplate –
Control template is used to alter the UI of a control provided by the WPF.
All the controls in WPF are derived from the Control class which contains a property named Template which is of type ControlTemplate which is used to change the appearance of the control.Please check the code sample shown below in which we have two buttons. The first one is the default button and the second button’s template is changed to have user defined appearanceAnd the UI of the above code will be displayed as shown below.
The above UI has one problem, the second button does not show the Content of the button as the default style of the control is replaced by the new controltemplate. This problem can be resolved by using the ContentPresenter of the control which is a placeholder for the content of the control. Please have a look at the code below
As the Grid is an overlay panel in which the controls arrange themselves one above other if the row and columns are not provided for them that is why the contentpresenter is placed easily on Ellipse. After above change the controls will look as shown below.
-
DataTemplate –
Datatemplate is used to give a UI to the data of a control or we can say to represent data in UI we need to define a data template for the particular type. The example of the datatemplate we will see in the below code.Suppose I have an ItemsControl in the WPF window as shown below. This is one of the WPF templates which is bit confusing.
And the code behind for binding part is as shown below.
public partial class MainWindow : Window { public MainWindow() { PersonList = new List
() { new Person() { Age=31, Name = "Vikram Chaudhary" }, new Person() { Age= 30, Name = "Another Person" }}; this.DataContext = this; InitializeComponent(); } public IList PersonList { get; set; } } public class Person { public int Age { get; set; } public string Name { get; set; } } As we can see from the above code our list is being bound to the list of person but since we do not have any UI for the items of the ItemsControl, that is why the items render themselves with the object.ToString() form of the data as shown below.
Now the data in the ItemsControl does not have any visualization and if we want to have some UI representation of the data we can define a DataTemplate as shown below.
And after the above template is applied the UI we will get is as shown below,
This is due to the reason that whenever WPF renders a UI and it finds that there is some class is being rendered, it starts looking up the visual tree to check for any datatemplate present for that particular object type. If it finds the datatemplate for the object it renders that datatemplate otherwise it will renders the object.ToSting() form of that object.
There is one more way by which we can set the datatemplate of ItemsControl. This can be done by setting the ItemTemplate property of the ItemsControl as shown belowAnd having a datatemplate in the resources as shown below
In this article I have discussed two types of WPF templates i.e. ControlTemplate and Datatemplate and their usages. I hope you have been able to understand and differentiate among these two after this article.
Please let me know your thoughts about the article.
Like my facebook page at Dot Net For All
Leave a Reply