[Simple introduction to Windows 10] layout principle, simple introduction to layout

[Simple introduction to Windows 10] layout principle, simple introduction to layout
5.2 Layout Principle

In many cases, the importance of application layout is ignored when writing the program interface. You only need to regard the layout as an arrangement of UI elements, as long as the layout effect can be achieved, however, in actual product development, this is far from enough. You may face more complex la s than regular la S, this requires a deep understanding and mastery of the technical knowledge of the layout. To achieve a layout effect, there may be many general layout solutions. How should we choose the implementation method? If a layout effect is complicated, how can we encapsulate this layout rule? To solve these problems, we need to have a deep understanding of the principle of program layout.

5.2.1 significance of Layout

Layout is the first step in page programming. It is to grasp the display of UI elements on the page in the general direction. Layout is actually a very important part of application development. This knowledge is often ignored by developers. With Windows 10 supporting these many devices and screen resolutions, the layout becomes more important and complex. It is very necessary for us to understand the significance of Program-based interface layout, this is not just a display of the interface. Let's take a look at the significance of the application layout:

(1) Code Logic

A good layout will make the code logic very clear, and a poor layout scheme will make the Page code logic very messy. If you only rely on Drag controls for Windows 10 layout, the interface layout of this program will definitely become very bad. Therefore, a good layout scheme must be based on understanding of various layout controls, then they fully implement their features to achieve the layout effect.

(2) Efficiency and performance

The layout is not only about the Interface UI, but also affects the running efficiency of the program. Of course, the page layout of several simple controls has little impact on program efficiency and performance, but if you want to display a large number of controls on your interface, at this time, the layout will directly affect the program efficiency. A good layout implementation logic allows the program to run the process even if there are a large number of controls on the page.

(3) Dynamic Adaptation

Dynamic Adaptation includes two aspects: one is the adaptation of Windows 10 with multiple resolutions, and the other is that the page control is uncertain and will also cause dynamic adaptation problems. A good layout scheme allows applications to be compatible with the settings of various resolutions. pages affected by different resolutions can also be solved through layout techniques, ensure that different resolutions are displayed in line with the product display effect. There is also a dynamically generated control, which means that different content will be displayed on your page according to different situations, at this time, we need to think about how to deal with these changed pages.

(4) Implement complex Layout

Sometimes the page needs to implement some complex layout effects, for example, the layout controls such as circles must be arranged. In Windows 10, such layout controls do not support such complex layout effects, at this time, we need to customize the layout rules to solve this problem. Whether the layout control can be customized to achieve Complex layout effects depends on your understanding of the layout technology of Windows 10.

5.2.2 Layout System

The layout system refers to the operating principle of the layout process of the layout panel of Windows 10. The layout is actually a process of adjusting the object size and locating the object in Windows 10 applications. To locate visualization objects, You must place them in a Panel or another layout Panel. The Panel class is the parent class of all layout panels. The Canvas, StackPanel, Grid, and RelativePanel of the system layout Panel are subclasses of the Panel class and inherit the features of all Panel classes. The Panel class defines the layout of members (Children attribute) in all panels on the screen. This is a computing-intensive process, that is, the larger the Children set, the more computing tasks are executed, that is, the more elements in the panel, the entire layout process takes longer. All layout Panel classes Add corresponding layout rules on the basis of the Panel class. The layout Panel is further encapsulated on the basis of the Panel class to better solve some layout rules, in fact, such encapsulation increases complexity and causes some performance loss. Therefore, if you do not need a Complex layout Panel (such as Grid), you can use a relatively simple layout (such as Canvas) to produce better performance.

To put it simply, layout is a recursive system that allows you to adjust, locate, and draw elements on the screen. During the entire layout process, the layout system processes layout Panel members in two steps: the first is the measurement processing process, and the second is the arrangement processing process. The measurement processing process is the process of determining the size required for each sub-element. The arrangement process is the process of determining the size and position of each sub-element. Every time the members in the panel change their positions, the layout system may trigger a new processing process and reprocess the two processes mentioned above. The following operations occur whenever the layout system is called:

1. The first recursive traversal measures the size of each layout panel sub-element (a subclass control of the UIElement class.

2. Calculate the size adjustment attributes defined on the Child control elements of the FrameworkElement class, such as Width, Height, and Margin.

3. Application layout panel specific logic, such as horizontal layout of StackPanel.

4. The second recursive traversal is used to route sub-elements to their own positions.

5. Draw all child elements on the screen.

If the layout attributes (such as Width and Height) of other child elements added to the set or child elements are changed or the UpdateLayout method is called, the process is called again. Therefore, it is important to understand the features of the layout system, because unnecessary calls may lead to poor application performance. The following describes the layout process in detail.

5.2.3 important methods and attributes of the Layout System

In Windows 10, layout is not only about the layout panel, but also about organizing the layout process, in the entire layout process, elements in the layout panel must go through a recursive measurement and arrangement process from the outermost to the innermost. After studying the recursive arrangement and testing process, let's take a look at some important methods and attributes about the layout on the basic controls.

The UI elements of Windows 10 have two very important basic classes: The UIElement class and the FrameworkElement class. Their Inheritance hierarchies are as follows:

Windows. UI. Xaml. DependencyObject

Windows. UI. Xaml. UIElement

Windows. UI. Xaml. FrameworkElement

(1) UIElementClass

The UIElement class is the base class of most objects that have a visual appearance and can process basic input. For layout, the UIElement class has two very important attributes: The DesiredSize and RenderSize attributes and two very important methods: the Measure method and the Arrange method.

DesiredSizeAttribute:This is a read-only attribute and the type is the Size class, indicating the Size calculated during the measurement and processing of the layout process.

RenderSizeAttribute:This is a read-only attribute. The type is the Size class, indicating the final rendering Size of the UI element. The RenderSize and DesiredSize are not necessarily equal. RenderSize is the return value of its ArrangeOverride method.

Public void Measure (Size availableSize)Method:What the Measure method does is update the DesiredSize attribute of the UIElement and Measure the size of the UI element. If the FrameworkElement. MeasureOverride (System. Windows. Size) method is implemented on the UI element, this method is used to form a recursive layout update. AvailableSize indicates the available space that the parent object can allocate to sub-objects. The sub-object can request a space larger than the available space. If the specific panel allows scrolling or other resizing behaviors, the provided size can adapt to the space.

Public void Arrange (Rect finalRect)Method:What the Arrange method does is to locate the sub-object and determine the size of the UIElement, that is, the value of the DesiredSize attribute. If the FrameworkElement. ArrangeOverride (System. Windows. Size) method is implemented on the UI element, this method is used to form a recursive layout update. The finalRect parameter indicates that the parent object in the layout is the final size calculated by the sub-object, which is provided as the System. Windows. Rect value.

(2) FrameworkElementClass

The FrameworkElement class is a subclass of the UIElement class and provides a public API framework for objects involved in the Windows 10 layout. The FrameworkElement class has two virtual methods related to layout: The MeasureOverride method and the ArrangeOverride method. If an existing layout panel cannot meet special layout requirements, you may need to customize the layout panel. You need to override the MeasureOverride and ArrangeOverride methods, the two methods are the custom interfaces provided by the Layout System of Windows 10. The meanings of these two methods are shown below.

Protected virtual Size MeasureOverride (Size availableSize):Provides a measurement processing process for Windows 10 layout. You can override this method to define its own measurement processing process behavior. The availableSize parameter indicates the available size of the object that can be assigned to the sub-object. You can specify an infinite value (System. double. positiveInfinity) to indicate that the object size will be adjusted to the available content size. If the size calculated by the sub-object is larger than availableSize, The availableSize part will be truncated. The returned result indicates the size required by the object during the layout process based on its calculation of the allocated size of the Child object or other factors such as fixed panel size.

Protected virtual Size ArrangeOverride (Size finalSize):This method can be rewritten to define the behavior of the sorting and processing process in Windows 10 layout. The finalSize parameter indicates the final region of the object application in the parent level to arrange itself and its child elements. The returned result indicates the actual size used after the elements are arranged in the layout.

5.2.4 process of measurement and Arrangement

The Layout System of Windows 10 is a recursive system, which always starts with the Measure method and ends with the Ararnge method. Assume that there is only one object in the layout system. Before the object is loaded to the interface, the Measure method is called to Measure the object size, finally, the Ararnge method is called to arrange the object location to complete the layout of the entire process. However, in reality, an object usually contains multiple sub-objects, and the sub-objects also contain sub-objects. This recursion continues until the bottom object. The layout process starts measurement from the top-level object. The measurement process of the top-level object calls the measurement method of its sub-object, so that it is recursive until the bottom object. After the process of measurement is completed, the process of arrangement begins. The process of arrangement is the same as the principle of the process of measurement, and continues recursion until the bottom object. The following uses an example to simulate this process.

Two classes are created in the example. The TestPanel class is used to simulate the outermost layout panel and act as the parent object. The TestUIElement class is used to simulate the elements used as the layout panel and act as the bottom sub-object role. Both the TestUIElement class and the TestPanel class inherit the Panel class, implement the MeasureOverride and ArrangeOverride methods, and print the relevant logs to track the layout details.

Code List 5-8:Simulate the process of measurement and Arrangement (source code: Chapter 5th \ Examples_5_8)

TestUIElement. the main code of the cs file is expose public class TestUIElement: Panel {protected override Size MeasureOverride (Size availableSize) {Debug. writeLine ("enter sub-object" + this. name + "MeasureOverride method for measuring the size"); return availableSize;} protected override System. windows. size ArrangeOverride (System. windows. size finalSize) {Debug. writeLine ("enter sub-object" + this. name + "arrange ArrangeOverride methods"); return finalSize ;}}

TestPanel. the main code of the cs file is expose public class TestPanel: Panel {protected override Size MeasureOverride (Size availableSize) {Debug. writeLine ("Enter parent object" + this. name + "MeasureOverride method for measuring the size"); foreach (UIElement item in this. children) {item. measure (new Size (120,120); // here is the entry Debug. writeLine ("DesiredSize value of sub-object Width:" + item. desiredSize. width + "Height:" + item. desiredSize. height); Debug. writeLine ("The RenderSize value of the sub-object Width:" + item. renderSize. width + "Height:" + item. renderSize. height);} Debug. writeLine ("DesiredSize value of the parent object Width:" + this. desiredSize. width + "Height:" + this. desiredSize. height); Debug. writeLine ("The RenderSize value of the parent object Width:" + this. renderSize. width + "Height:" + this. renderSize. height); return availableSize;} protected override Size ArrangeOverride (Size finalSize) {Debug. writeLine ("Enter parent object" + this. name + "ArrangeOverride method to arrange"); double x = 0; foreach (UIElement item in this. children) {// arrange the sub-object item. arrange (new Rect (x, 0, item. desiredSize. width, item. desiredSize. height); x + = item. desiredSize. width; Debug. writeLine ("DesiredSize value of sub-object Width:" + item. desiredSize. width + "Height:" + item. desiredSize. height); Debug. writeLine ("The RenderSize value of the sub-object Width:" + item. renderSize. width + "Height:" + item. renderSize. height);} Debug. writeLine ("DesiredSize value of the parent object Width:" + this. desiredSize. width + "Height:" + this. desiredSize. height); Debug. writeLine ("The RenderSize value of the parent object Width:" + this. renderSize. width + "Height:" + this. renderSize. height); return finalSize ;}}

After the TestUIElement class and TestPanel class are created, we will use these two classes on the UI. We can use TestPanel as a layout panel control and TestPanel as a common control, then observe the printed running logs. To add these two controls, you need to introduce the space of the two spaces on the xaml page before calling them. The code below is as follows:

MainPage. xaml file main code example -----------------------------------------------------------------------------------------------------------------...... Omit some code and introduce the control space xmlns: local = "using: MeasureArrangeDemo "...... Call the control layout <StackPanel> <Button Content = "Change height" Click = "Button_Click_1"> </Button> <local: TestPanel x: name = "panel" Height = "400" Width = "400" Background = "White"> <local: TestUIElement x: name = "element1" Width = "60" Height = "60" Background = "Red" Margin = "10"/> <local: TestUIElement x: name = "element2" Width = "60" Height = "60" Background = "Red"/> </local: TestPanel> </StackPanel>

After the program runs in Debug state, you can view the printed logs in the output window of Visual Studio. The log details are as follows:

/* Log start */

Enter the MeasureOverride method of the parent object panel to measure the size.

Enter the MeasureOverride method of the sub-object element1 to measure the size.

DesiredSize value of sub-object Width: 80 Height: 80

The RenderSize value of the sub-object: Width: 0 Height: 0

Enter the MeasureOverride method of the sub-object element2 to measure the size.

DesiredSize value of sub-object Width: 60 Height: 60

The RenderSize value of the sub-object: Width: 0 Height: 0

DesiredSize value of the parent object Width: 0 Height: 0

RenderSize value of the parent object Width: 0 Height: 0

Enter the ArrangeOverride method of the parent object panel for Arrangement

Enter the ArrangeOverride method of the sub-object element1 to arrange

DesiredSize value of sub-object Width: 80 Height: 80

The RenderSize value of the sub-object: Width: 60 Height: 60

Enter the ArrangeOverride method of the sub-object element2 to arrange

DesiredSize value of sub-object Width: 60 Height: 60

The RenderSize value of the sub-object: Width: 60 Height: 60

DesiredSize value of the parent object Width: 400 Height: 400

RenderSize value of the parent object Width: 0 Height: 0

/* Log end */

The printed logs clearly show the steps of the entire layout process (as shown in Figure 5.25) and the changes of the DesiredSize and RenderSize values during the layout process.

The following conclusions can be summarized from the layout process:

1. The measurement process is to confirm the value of DesiredSize, and is finally provided to the arrangement process for use.

2. DesiredSize is determined by attributes such as Margin, Width, and Height.

3. The process of sorting determines the RenderSize and the space where the final sub-object is placed. RenderSize is the returned value of ArrangeOverride, and there are no cropped values.

4. Attributes such as Margin, Width, and Height are only the attributes on the control surface. What actually controls these effects is the measurement arrangement process of the layout.

5. Changing attributes such as Margin, Width, and Height will re-trigger the layout process.

 

This article comes from the introduction of Windows 10 universal application development

 

Source code download: http://vdisk.weibo.com/u/2186322691

 

Directory: http://www.cnblogs.com/linzheng/p/5021428.html

 

Welcome to my weibo @ WP Lin Zheng public account: wp Development (No.: wpkaifa)

 

Windows 10/WP technology exchange group: 284783431