Why does WPF/Silverlight use methods such as Canvas. SetLeft?

Document directory

• Layout objects in WPF
• Formation Mode
• Summary

I saw a brother in the garden discussing the attributes of WPF/SL, for example:

"Why can flex directly operate on the left and top attributes of the control? The sl has to be converted. This is hard to understand. Is it because dp is easy to use? Compared with dp, the use of flex is much simpler and clearer"

I am studying WPF recently. Here I will talk about my opinion. Most of us may be using WPF or SL as interfaces. Therefore, we are concerned about the layout of interfaces first. I will explain some usage using the WPF layout as an example.

Layout objects in WPF

Can I add "Left" or "Top" to each interface element control in WPF? In general la S, WPF provides the Margin attribute for each component inherited from FrameworkElement. With this attribute, we can easily set the margins around it. In addition, the HorizontalAlignment and verticalignment attributes are sufficient for general element positioning. The most common one is to drag a Button in Windows to generate a XAML code similar to this:

<Button Name = "button1" Margin = "0, 0, 28, 7" HorizontalAlignment = "Right" Width = "53"> button </Button>

How is the position of the control during rendering determined by using the Margin attribute? We can say that the control is determined by ourselves, or that it is determined by WPF ".

Besides, WPF also provides another layout method, that is, layout objects. The biggest feature of this layout method is that,The parent control centrally manages the layout of child objects.. Such controls include Border, StackPanel, DockPanel, And Gird ". I believe you are familiar with these layout controls. Let's look at some sample code to see how WPF manages the layout of child objects in a unified manner by the parent control. Use Canvas As An Example

Class Canvas: Panel
{
// Define DependencyProperty
// Public static readonly DependencyProperty LeftProperty =
// Public static readonly DependencyProperty TopProperty =

Protected override Size MeasureOverride (Size availableSize)
{
// Calculate the expected size of all child controls.
Foreach (UIElement ele in InternalChildren)
{
Ele. Measure (availableSize );
}
// Here, the measurement size of the current (parent control) is returned. If it is available, the returned size is greater than the size, which is not changed according to the sub-control.
Return availableSize;
}
Protected override Size ArrangeOverride (Size finalSize)
{
// Calculate the position of each sub-control, that is, layout of the sub-control.
Foreach (UIElement ele in InternalChildren)
{
// This Rect is used to indicate the position of the stator control relative to itself.
Rect itsRect = new Rect (
New Point (double) ele. GetValue (LeftProperty), (double) ele. GetValue (TopProperty), // * is the key
Ele. DesiredSize,
Ele. DesiredSize
);
Ele. Arrange (itsRect );
}
Return finalSize
}
}

For detailed layout process, refer to some books (the classic Application = Code + Markup: WPF programming guide is strongly recommended, note that the new Point (double) ele. getValue (LeftProperty), (double) ele. getValue (TopProperty), which uses the GetValue method to obtain the Left and Top attributes of each sub-control, and then locates the sub-control accordingly.

I am not familiar with Flex, so I will compare it with other la s, such as Winform and Winform. The boss said, each of our objects that can participate in the layout has Left, Top, or Position to specify Relative or Absolute (I did think of css). Now it's different, because of "decentralization", WPF directly delegated the layout right to the layout control, which is troublesome. Canvas needs the Left attribute, Top attribute, and Grid may need the Row attribute, the Column attribute and the DockPanel may need the Dock attribute. What should I do? So we use the Attached Property to define the attributes under each "boss". The "brother" involved in the layout below uses the Attached Property method to set and read the values of these attributes.

Maybe you ask what the benefits of "decentralization" are. If you do not know the benefits of some layout controls that come with WPF, I recommend a link, you can see a variety of cool custom Layout:

Why WPF Rocks (Custom Layout Panel Showcase)

In fact, if you want to create a Left and Top for every "little brother", you can implement the following code by yourself:

Class MyFrameworkElement: FrameworkElement
{
Public int Left {get ;}
Public int Top {get ;}
//
}

Class MyCanvas: Canvas
{
Protected override Size ArrangeOverride (Size finalSize)
{
Foreach (UIElement ele in InternalChildren)
{
MyFrameworkElement mele = ele as MyFrameworkElement;
If (mele! = Null)
{
Rect itsRect = new Rect (
New Point (mele. Left, mele. Top ),
Ele. DesiredSize,
Ele. DesiredSize
);
Ele. Arrange (itsRect );
}
}
Return base. ArrangeOverride (finalSize );
}
}

I don't know how you feel. I don't like this implementation anyway. MyFrameworkElement and MyCanvas are strongly coupled. I don't know whether the Left and Top attributes are required for the DockPanel control, but these two attributes do exist. Do I need to define MyFrameworkElementForCanvas, myFrameworkElementForDockPanel ...? Terrible

However, there is no specific "layout object" in WPF. In fact, each Visual Object (Visual) can arrange the layout of its own sub-objects.

Formation Mode

Regardless of the layout, from the design mode and the object-oriented design, this method of setting attribute values can be regarded as a very meaningful mode, and it is very beautiful to separate the attribute (Left ), the coupling relationship between attributes (Element), Canvas, and attribute values. DependencyProperty and AttachedProperty are useful not only in layout system, but also in data binding, animation support, resources, and style.

Of course, any complicated design is costly. The biggest cost of this method may be performance, although WPF has made a lot of optimizations (refer to my other Post to be released) on the storage, the performance loss certainly exists. On the other hand, complicated design will certainly increase the complexity of user (our programmers) usage, that is, we must use the GetValue or SetValue method to obtain the value. However, in terms of complexity, WPF has implemented some official specifications. He hopes that ordinary DependencyProperty can be encapsulated into a get/set method named "CLR Wapper, attachedProperty is encapsulated into a Canvas. setLeft (v, 150) syntax, so Canvas appears. setLeft ..

In addition, Silverlight itself is only a Beta version, so it is best not to talk about Silverlight. I like WPF very much.

Summary

This Post begins with the layout system of WPF, introduces how to apply AttachedProperty in the layout system, and summarizes the reasons why the syntax such as Canvas. SetLeft () appears.
These are my personal opinions. If there is anything wrong, I hope you can correct them more ~