Article directory
I. Introduction
Recently, I read Liu Tiemeng's "In-depth Introduction to WPF" and found that I have a deeper understanding of some of the contents in the template chapter, so I wrote an article.
The title of the article is Control and Template, which translates into Control and Template.
The two are not put together for no reason. In WPF, the two are quite closely related.
2. Controls
If someone asked you what a control is, how would you answer?
The buttons, text boxes, and scroll bars on the interface are all controls.
So controls can be understood as components of the interface.
The above is my previous answer. There is nothing wrong with this answer. It is very intuitive. Many people can understand it, although it may not be rigorous.
But if you continue to ask,
why is it called a control and not another name? Isn’t this interactive pattern on the interface, called a graphic element, more intuitive and appropriate?
I might answer that the name control is translated from the word Control, so it is called control.
The other person may continue to ask, why is it called Control in English instead of Graphic Element?
At this time, I fell into deep thought. Indeed, why is it named with the word Control.
How to eliminate this doubt? The easiest way is Baidu.
Baidu entry
Control refers to the encapsulation of data and methods .
Controls can have their own properties and methods, where properties are simple visitors to the control data, and methods are some simple and visible functions of the control. The control creation process includes design, development, debugging, and then the use of the control.
Regardless of whether what Baidu said is right or wrong, it is obviously not intuitive. If you explain this to a non-programmer, he may still not understand.
So from a professional perspective, does this description of the control make sense?
Anyone who has studied programming knows that the essence of programming is data structures and algorithms .
The controls on the interface present certain content and provide some interactive methods. Users can change the program status through interaction.
So, what is the essence of the content presented by the control?
It's data.
What is the nature/purpose of the interaction provided by the control?
I think it should be program logic. For example, if you press a button, a method (a piece of code, that is, program logic) will eventually be executed inside the program, and the program state may change as a result.
Therefore, controls are not only a representation of data so that users can see the data intuitively, but also a representation of algorithms so that users can conveniently operate logic .
As a "form of expression", each control is created to implement a certain user operation algorithm and visually display certain data. What a control looks like is determined by its "algorithm content" and "data content". It is also often said in philosophy that content determines form .
From this point of view, Baidu's statement is quite reasonable and closer to the essence of the control.
3. Template
Next go back to templates in WPF.
In the past GUI technology, the logic and data inside the control are fixed and cannot be changed by programmers (such as WinForms/Qt (QWidget)); as for the appearance of the control, the changes that programmers can make are very limited, generally just setting the control properties, it is even more impossible to change the internal structure of the control. If you want to extend the functionality of a control or change its appearance to make it more suitable for business logic, even if there is only a slight change, you often need to subclass the control or create a UserControl. The fundamental reason for this situation is that the "form" and "content" of data and algorithms are too tightly coupled .
In WPF, the "content" and "form" of data and algorithms are decoupled by introducing templates.
Templates in WPF are divided into two categories:
- ControlTemplate is the expression of algorithm content. It controls how a control organizes its internal structure to make it more consistent with business logic and make users more comfortable to operate. It determines what the control "looks like" and gives programmers the opportunity to extend their own logic based on the control's original internal logic.
- DataTemplate is the representation of data content. It determines how a piece of data is displayed, whether it is simple text or intuitive graphic animation.
In a word, Template is the "coat" - ControlTemplate is the coat of the control, and DataTemplate is the coat of the data.
Controls in WPF no longer have a fixed image, they are just carriers of algorithm content and data content.
You can think of a control as a set of operating logic wearing a set of clothes, and changing the clothes can transform it into another look. The default image of the control you see is actually the default clothing that Microsoft puts on it when it leaves the factory.
3.1 DataTemplate
In actual projects, DataTemplate is often used more often than ControlTemplate.
As the name suggests, it is a template/skin for the data. When used, an object is often bound to the outer layer, and then the properties of the object are bound to various controls internally.
As long as the bound control is replaced, the appearance of the display will also change. That is, the same content can be displayed in different forms. Software design is called the "Data-View" mode .
In WPF development, DataTemplate is commonly used in three places, namely:
- The ContentTemplate property of ContentControl is equivalent to dressing the content of ContentControl.
- The ItemTemplate property of ItemsControl is equivalent to dressing the data items of ItemsControl.
- The CellTemplate property of GridViewColumn is equivalent to dressing the data in the GridViewColumn cell.
3.2 ControlTemplate
As mentioned before,
the default image of the control you see is actually the default clothing that Microsoft puts on it when it leaves the factory.
Because ControlTemplate has default clothing, and most of the time the default clothing is enough, few people will modify it manually.
In actual projects, even if you want to replace the ControlTemplate, you often use a mature UI toolkit, introduce it into the project, and apply its style.
This is very reasonable. As mentioned before, each control is designed to implement a certain user operation algorithm and visually display certain data. These specific operation algorithms are determined by the nature of the control. Obviously this part of the content is more fixed than the data. There is no problem in leaving it to Microsoft or professional component developers.
However, this does not mean that ordinary programmers do not need to understand ControlTemplate at all. Because sometimes, you do need to modify them.
The book "WPF Explained in a Simple Way" says,
In actual projects, ControlTemplate has two main uses:
- Change the appearance of the control by replacing the ControlTemplate to give it a better user experience and appearance.
- With ControlTemplate, programmers and designers can work in parallel. Programmers can first use WPF standard controls to program. After the designer's work is completed, he only needs to apply the new ControlTemplate to the program.
However, considering the current situation of domestic WPF development, there should be few designers and programmers whose work is completely separated. Therefore, the use of ControlTemplate also focuses on the first point.
But the first point seems to conflict with what was said before. Isn't ControlTemplate a rendering algorithm? How can it change the appearance of the control?
In fact, this is not a contradiction, because the appearance of the control is closely related to the nature of the control.
- Why do Buttons have similar shapes? They are generally an ellipse or rectangle, clickable, and will sink in after being clicked.
- Why is TextBox always a rectangular box in which text can be entered.
- Why is the ScrollBar always a long bar? You can drag it to move it.
Remember what an algorithm is?
Every introductory programming book will say that algorithms are the solution to problems.
The reason why these controls have such appearance and interaction method is not created out of thin air, but designed by people. Obviously this design is to solve a type of problem, that is, it is an algorithm.
When you are not satisfied with the effect of a control, you may need to change its appearance to fit your actual needs.
At this time, I have another layer of understanding of ControlTemplate. The control template describes the appearance of the control and its response to external stimuli (such as various events/background color changes after button mouse touch, etc.), and the deeper meaning of the appearance and response to stimuli is that this type of control should Solutions to solved problems .
The following is a ControlTemplate application scenario under actual development. I need the background color of the button to turn red when the mouse moves over the button (this is to give a sense of feedback when the mouse moves to the button):
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="red">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
As shown in the code, a trigger is used to check whether the mouse is on the control. If so, the control template is modified, mainly by changing the background color of the border outside the control template to red.
3.3 ContentPresenter
In fact, the structure of Button is so simple,
<Border>
<ContentPresenter/>
</Border>
A border and a ContentPresenter form a button.
So, what is ContentPresenter?
We can see the structure through decompilation. Here is a class diagram I compiled:
You will find that the structure of ContentPresenter and ContentControl are highly overlapped.
I’m not trying to be trivial here, nor do I want to spend too much space delving into their relationship.
You can directly understand ContentPresenter as the data content template DataTemplate of the control.
Some controls inherit ContentControl, which I call content controls.
There are also some controls that do not inherit it, such as TextBox.
Therefore, ContentPresenter does not exist in the default control template of TextBox. This is also easy to understand. There is no data content, so how can the data content be presented?
You may ask, then its Text attribute is not data content?
Of course it is, but from the perspective of a control, properties like Text are already quite basic, just a string (somewhat similar to "atomic data"), and the Content of a content control may need to be segmented, such as in Button. There may be text descriptions/icons, etc. Therefore, I personally prefer that the simple characteristics of Text itself prevent it from appearing as a content template.
4. Conclusion
I have written so much, mainly talking about the understanding of controls and two templates.
This understanding is more like the internal strength of WPF development (not limited to WPF). It will not directly improve the efficiency of writing code, but it will have a long-term positive impact.