Detailed description of adorner Layer

First, do not think that adorner is far away from you, because the simplest WPF interface will also use adorner. In WPF, the following common functions are implemented using adorner.

1. cursor (caret)

2. Focus)

3. Highlight)

4. Drag Preview (drag and drop)

5. Spelling error prompt

6. Error template used in data binding to prompt errors

Of course there are others. It is easy to find some adorner in WPF with reflector. As shown in.

A lot! These adorner are all placed on a layer called adorner layer. Msdn explains that the adorner layer is placed above all other controls in a window. In addition, the adornerlayer class does not have a public structure function. You can only use the followingCodeTo obtain the adorner layer of a control:

However, the above method creates two illusion:

1. The adorner layer is built in WPF and cannot be managed.

2. Each control has its own adorner layer.

 

If you continue to look at the getadornerlayer code, it is easy to know where the adorner layer comes from. In view of the function'sSource codeIt's ugly, so I won't post it here to shame Microsoft. But we can know from the source code:

1. Not every control has an adorner layer. In fact, only adornerdecorator and scrollcontentpresenter have an adorner layer.

2. The adorner layer obtained from an element is generally ancestor.

 

By the way, decorator is a product of the decoration mode in WPF. It is something broader than adorner, and adorner is a kind of decorator. Our common border and viewbox belong to decorator. For more information about decorator, see here.

 

In this case, adornerdecorator is the provider of the adorner layer. Let's take a look at the default template of the window. From the Aero. normalcolor. XAML file in blend.

<Controltemplate Targettype= "{X: type window }">
 

 
<Border Background= "{Templatebinding background }"
 

 
Borderbrush= "{Templatebinding borderbrush }"
 

 
Borderthickness= "{Templatebinding borderthickness }">
 

<Adornerdecorator>
 

 
<Contentpresenter/>
 

</Adornerdecorator>
 

 
</Border>
 

</Controltemplate>
 

That is to say, all windows using the default template will have an adornerdecorator that provides the adorner layer for them. Therefore, if you want to customize the template of the window, remember to add an adornerdecorator for contentpresenter.

The following is the arrangeoverride Function Definition of adornerdecorator:

Protected OverrideSize arrangeoverride (size finalsize)
 

 
{
 

Size size =Base. Arrangeoverride (finalsize );
 

 
If(Visualtreehelper. getparent (This. _ Adornerlayer )! =Null)
 

{
 

 
This. _ Adornerlayer. Arrange (NewRect (finalsize ));
 

 
}
 

 
ReturnSize;
 

 
}
 

In base. arrangeoverride, the content in the window is rendered. Then adornerdecorator will go to the _ adornerlayer that comes with arrange. In this way, the adorner layer is located above all the window content.

But is there no way to put things on the adornerlayer? Please think about it yourself.

 

I would like to refer to it here. Do you want to call the base function in the rewritten function? Where can I call it? It is worth noting. This issue depends on the specific situation. To call the base function correctly, you must have a certain understanding of the base class. Therefore, it is necessary to read the source code and understand the working principle when necessary. This principle can also lead to such an inference that it is unrealistic to learn a technology idea or product in a short time. (Xue Tong's definition: if you delete WPF from. net, theoretically, you can rewrite it by yourself)

 

Now that we know the source of the adorner layer, let's take a look at the adorner on the adorner layer. The adorner layer can only contain adorner, And the adorner does not have a constructor. All operations related to adorner can be performed only in C # code by default (of course, there is always a way to define adorner in XAML ). When constructing an adorner, you must pass the adorned element as a parameter to the adorner. Because adorner needs to know the location and size of the adorned element. So that the adorner layer knows where to render the adorner. All the information is saved by the adorner layer in an internal class named adorner info.

It contains some information required for rendering each adorner. The rendersize and transform are calculated based on the adornedelement of the adorner. 1. However, the position or transform of A uielement has changed. The adornerinfo of all adorner associated with this element will be updated once. In this way, adorner seems to be the same as adorned element, but it only uses trasform to stick the two together from the positional relationship.

 

The principles of the adorner layer are described above. In short, a window usually has a unique adorner layer. During rendering, all adorner layers are placed in the upper left corner of the window, use rendertransform to move the adorner to its associated adorned element.

 

The adorner is inherited from frameworkelement and does not even have the content attribute, the Child attribute, or the controltemplate attribute. The consequence is that if you want to create an adorner, you must first inherit the adorner class, then rewrite the onrender function, and draw the desired effect with a line in it. Of course, no one really wants to use drawingcontext to draw things, and there are many solutions. One is to add a child property of the uielement type to the adorner first, and then you can add a common WPF control to the uielementadorner, right? The implementation method is also provided here.

 

The last question is when to use adorner? I think we should answer this question from its design philosophy. Adorner is a type of decorator. It can provide a means to attach other interface elements or decorations to each independent control without changing the original XAML structure. This is a powerful design concept. What can you do with it? You can see some clues from the first figure. However, in actual projects, it depends on your own efforts. Here are some examples. (What Microsoft has already implemented is no longer an example)

1. In the listview column header, it indicates the small arrow of the current sorting method. I have provided implementation methods in my previous article.

2. If you need to hover your mouse over a chart, you can leave a mark on the chart. This tag can be placed in the adorner layer.

3.ProgramMask and processing animation added to the entire interface during loading or an operation.

4. The anchor used to adjust the widget size in the interface design tool.

The implementation method is provided here.

5. the enlarged image in the magnifier control. (No instance, as you can imagine)

6. Select a box dragged out by the mouse. The figure description is concise.

Using the adorner layer in the WPF program can not only bring some outstanding results, but also make the architecture and modules of the software clearer.