Winform interface Layout

Http://blog.163.com/prince.king_521/blog/static/106891204201192410455319/

When I switched from the Web to winform development, I had a piece of ecstasy, no session loss, no browser incompatibility, and no need to turn around HTML, CSS, JavaScript, and C, in Visual Studio, what the controls look like at the end (although there is a slight difference in the end user's operating system and resolution settings), this feeling has not been over for a long time, however, as the development interface becomes more complex, it is somewhat helpless.

Next, I will share two articles to introduce some things that need to be paid attention to in the winform interface layout. The previous article introduces some simple but common things, And the next article will introduce more complex but flexible content.

Dock & Anchor

The dock and anchor are both difficult to use. When you set the dock and anchor attributes for the control, the preceding settings are overwritten.

Dock

When I first came into contact with winform, I found that the width and height of the control can only be int and cannot be set to percentage. At that time, I thought about how the child control changed with the parent control? The parent control becomes larger and fills up that area. I even thought that this should be solved through code, such as in the sizechanged event ......

Later I found out that what I needed was the dock, and the dock meant the dock. The type of the dock attribute is dockstyle enumeration:

   1: public enum DockStyle

   2: {

   3:     None = 0,

   4:     Top = 1,

   5:     Bottom = 2,

   6:     Left = 3,

   7:     Right = 4,

   8:     Fill = 5

   9: }

The default value is none. If it is left, the Child control is docked in the left area of the parent control and filled with the Left area:

The Panel in is always docked in the left area of the form. No matter how you adjust the height of the form, it can always fill the Left area. The trouble with the dock is that when Multiple widgets start to run, for example, if two panels are set to left, what should we do? We will find that the child control is added to the controls set of the parent control. The later the child control is added, the higher the "Priority" (I did not know this is not the case, this is what I wrote ). Here, the priority indicates that the higher the subcontrol "Priority", the closer it is to the edge of the parent control, and the other subcontrols have to avoid it:

This. Controls. Add (this. Panel1 );
This. Controls. Add (this. panel2 );

 

Panel2 is added later, so it has a higher priority and is closer to the edge of form. This rule is not only effective for setting the dock to left, but also for the dock attributes, but also for the Child control:

   1: this.panel1.Dock = DockStyle.Left;

   2: this.panel2.Dock = DockStyle.Left;

   3: this.panel3.Dock = DockStyle.Top;

   4:  

   5: this.Controls.Add(this.panel1);

   6: this.Controls.Add(this.panel2);

   7: this.Controls.Add(this.panel3);

The dock of panel3 is set to top and finally added to the controls set, so it has the highest priority. The other two panels must be avoided:

How can I adjust panel3 to the second one? This is the scene:

Of course, the "Priority" here only works in the same "level". It is meaningless to compare the child control with the control at the same level of the parent control.

Anchor

The dock is generally divided into areas. It divides a form or a large control into several areas for layout, just like the DIV in the web. However, sometimes we want to avoid changing the relative position of the Child control in the parent control as the parent control grows or decreases, or the relative distance between the control edge and the edge of the parent control does not change, however, it's not the edge of the parent control. It's time for anchor to appear.

The anchor attribute is of the anchorstyles bit mark type. (If you do not understand the bit mark, you can use the bitwise operator to perform operations. Therefore, you can set the enumeration of multiple values, for more information, see the description of the position mark in msdn or CLR via C ):

   1: [Flags]

   2: public enum AnchorStyles

   3: {

   4:     None = 0,

   5:     Top = 1,

   6:     Bottom = 2,

   7:     Left = 3,

   8:     Right = 4

   9: }

The default value of anchor is anchor. left | anchor. top, that is, the relative positions of the Left and top edges of the Child control and the parent control remain unchanged. This ensures that the position of the child control remains unchanged after the form is maximized:

When the form is displayed by default->

After the form becomes larger->

 

Or remain in the upper left corner. What if it is set to left and right? When anchor is set to left | right, the Child control automatically expands to ensure that the distance between the control edge and the parent control remains unchanged when the parent control (form here) increases:

In short, remember the Chinese meaning of Anchor: anchor. When you set anchor for a control, it is equivalent to using a dingtalk to pin the edge of the control.

Padding & margin

There is nothing to say about padding and margin. It is exactly the same as the CSS box model description. Padding refers to the internal space of the control, and margin refers to the outside of the control:

Both padding and margin can specify four values.

Autosize

Sometimes we need to increase the number of controls as the content increases. For example, in multi-language programs, the length of the same meaning is different in different countries, in this case, autosize is required to be true, so that the text will not be truncated if it is too long. For more information about autosize, see msdn.

How to deal with complex interfaces? What should I do if something goes wrong? Design Time

When the interface becomes more and more complex, we would like to know the hierarchical relationship between controls. Which panel is this button placed on? The area of this Panel is similar. When I first came into contact with winform, I very much expected that winform also had a tool similar to the IE developer toolbar. Click HTML to display the area visually on the interface and select a region on the interface, you can also locate HTML elements. It is also possible to design the winform interface. This is the document outline window (View-> other Windows-> document
Outline ):

But if you just want to follow button1-> panel4-> panel3-> ...... This line navigation control tree provides a more convenient method: ESC key. Select a control, and Press ESC to continue the control hierarchy.

Select a control, right-click it, and select... You can select a parent control of the control:

It's really convenient ~~~

Runtime

However, there is a problem: the above methods are all designed at the time. Sometimes, if we dynamically modify some properties related to the layout in our program, we finally find that the interface is messy, this is neat. When a running problem is solved, a layout event is attached to a parent control. When the attribute related to layout is modified, this event is triggered (there are also special cases, next section ). This event will have a layouteventargs parameter, which has the affectedproperty attribute, which indicates the culprit affecting the layout and you will find the problem.

Suspendlayout & resumelayout

I think the two methods are definitely not default. In the initializecomponent method in winform, The suspendlayout method is called at the beginning of the method, then, the resumelayout method is called at the end of the method. Some readers may have tried to delete these two methods and found that the program shows the same behavior as before.

Understanding the two methods is helpful for the performance of the winform program. The layout event is triggered when the layout-related attribute is modified as mentioned in the previous section, but there are special cases, the suspendlayout method is called. For details about the attributes that will trigger the layout event, refer to msdn. If you modify attributes such as size and dock in the code or add child controls to the parent control, the layout logic is executed, and sometimes the layout is re-painted. When we want to modify a bunch of such attributes, such as the initializecomponent method mentioned above, we certainly don't want to modify it to execute a layout logic, which is too slow. In this case, you can call the suspendlayout method to suspend the layout logic before modifying the layout.
Use the resumelayout attribute, especially when the interface is complex.

Visual Studio places all the statements for setting these attributes in the initializecomponent method by default, and then uses suspendlayout and resumelayout to enclose them. Therefore, we generally do not claim to remove these attributes from the external settings, however, sometimes we want to dynamically generate some interfaces in the Code, such as adding some sub-controls or something. We 'd better call these two methods as vs does.

Note that the suspendlayout and resumelayout methods of form are not called. If you want to add sub-controls to a panel, you have to call these two methods of panel.