WPF path-WPF Layout System

Preface

Some time ago, I was busy with Google Earth for a while, and this week I was busy with the architect's thesis opening report. Now I have time to continue <the WPF road>. First, let's look back at the content of the previous article. In "from helloworld to WPF World", we have a general understanding of WPF and learned about what knowledge points should be used to start with WPF. Today, we will continue to learn about WPF from one of the most basic knowledge points, including the following content.

0. What is layout?

1. Basic elements-panel

2. Common container controls

3. Measurement and Arrangement

4. Basic Attributes: alignment, margin, and pading

5. Additional attributes

6. layout and Performance

7. Summary

0. What is layout?

This is a simple problem. To put it simply, some controls are arranged in a proper position on the interface. Obviously, the layout is messy. In WPF, this structure is slightly different from winform. Let's look at a very simple interface:

You are not familiar with this interface. As shown in the figure, WPF first uses the Blue Line (the assumed line) to divide the interface into the upper and lower parts, then the red lines are divided into multiple squares, and finally placed into the control, controls or spaces in each part can only be arranged vertically or horizontally. In most cases, WPFProgramThe controls on the interface should be arranged one by one according to this recursive method to form the interface that you see.

 

1. Basic elements-panel

In the previous section, we learned about the WPF layout principle, which can be simply understood as a small control placed in a large control by row or column, while a small control placed in a smaller control according to the same rule. This control that can be placed in other controls is the basic element in the WPF Layout System-panel. A panel is used to store items, including control elements and the Panel itself. The Panel not only supports other child elements (controls), but also controls the size, position, and arrangement of child elements. For example, in the above example, the panel control sub-elements of the Blue Line can only be arranged up and down, while the Panel control sub-elements of the red line can only be horizontally arranged.

By default, WPF provides several panels inherited from the base panel. Let's take a look at their inheritance chain.

System. Windows. Threading. dispatcherobject
System. Windows. dependencyobject
System. Windows. Media. Visual
System. Windows. uielement
System. Windows. frameworkelement

System. Windows. Controls. Control
System. Windows. Controls. Panel
System. Windows. Controls. Canvas
System. Windows. Controls. dockpanel
System. Windows. Controls. Grid
System. Windows. Controls. stackpanel
System. Windows. Controls. virtualizingpanel
System. Windows. Controls. wrappanel
 

2. Common container controls

By default, WPF provides several layout controls, including the following:

Name	Usage	Description
Canvas		This Panel can hold any element, including controls, graphics, and even text. Various elements are determined based on screen coordinates.
Dockpanel		On this panel, you can specify the arrangement and docking modes for each element.
Grid		This Panel lists child elements in a grid.
Stackpanel		This Panel lists child elements in either horizontal or vertical directions. You can select either of the two directions.
Virtualizingstackpanel		Similar to stackpanel, the difference is that it can Virtualize content.
Wrappanel		Arrange the child elements horizontally or vertically. The line breaks or columns at the row or column. The child elements are still arranged horizontally or vertically from left to right or from top to bottom.

 

3. Measurement and Arrangement

When we put sub-elements on the panel and set the corresponding attributes, the WPF layout system automatically completes two processes for us: Measurement and arrangement, which are two very important processes.

The WPF interface elements have many Layout-related attributes, such as coordinates, size, alignment, relative positions, and spacing. First, these attributes use device-independent resolution units, which may result in different display effects of elements of the same size on different interfaces. Secondly, each property value has a certain priority, for example, the height and width attributes of a button take precedence over the stretch attribute,If you set height, width, andStretch, Will causeStretchIgnored.

Therefore, although the attribute value is specified during the design, the layout system still needs to recalculate the actual size, position, and margin of each sub-element on the interface. These values are called "finalsize ".

 

4. Basic Attributes: alignment, margin, and pading

When designing the UI, WPF provides us with some attributes for precise positioning of elements, among which three are most commonly used: alignment (including horizontal and vertical), margin, pading, the usage is as follows:

name	description
alignment	alignment of child elements in the horizontal (vertical) direction, with left and right alignment (top alignment, bottom alignment), center alignment, stretching and filling.
margin	this parameter is used to specify the distance between an element and its sublevel or level, including the upper, lower, and left values. You can also use margin = "20" to specify four values at the same time.
pading	padding is similar to margin in most aspects, only a few elements are available (public ), used to increase the valid size of child elements to a specified thickness.

 

5. Additional attributes

We learned from the above that the child element is laid out on the Panel through setting some attribute values, such as alignment and dock and arrange attributes. These attributes do not belong to the child element, but depend on the parent element. For example, if the button is the same, there is the dock attribute in the dockpanel, but there is no such attribute in the grid. The dependency and parent element of these attributes are called "Additional attributes" in WPF ".

The purpose of an additional attribute is to allow different child elements to specify unique values for attributes actually defined in the parent element.The child element notifies the parent element of how it will be presented on the interface.As mentioned above, the dockpanel. Dock attributeBecause it will be set on the elements included in the dockpanel, rather than on the dockpanel itself. Note that the additional Attributes provided by the parent element are equivalent to the global attributes.

 

6. layout and Performance

As we can see above, when assigning a value to the layout attribute of the interface element, the layout system needs to re-calculate and arrange the "finalsize" of all the child elements (because of the impact of changes ). This is a recursive process. If you do not pay attention to it, it may cause performance problems. Therefore, pay attention to the following points during design:

1,Note which attribute values will cause recursive updates to the layout system;

2,If possible, use rendertransform instead of layouttransform;

3. Avoid calling updatelayout without any need, because updatelayout forces calling recursive updates of the layout system;

4. When there are a large number of element sets, use the virtualizingstackpanel virtualization element;

 

7. Summary

Through this article, we have learned about the WPF layout system, common layout panels, layout-related attributes, and precautions for designing and developing the UI. Many of the content is similar to the related concepts in winform. It can be said that it is an old bottle, new wine, and a little bit of thinking, it is not difficult to understand; if you have a deep understanding, you will find that it is completely different from winform. However, as a beginner, if you can flexibly use the knowledge points mentioned in this article and have a deep understanding of the Points of attention, it will be very helpful for your own improvement.