Adaptive XAML layout experience summary (I) Principles and page structure design, and xaml Experience Summary

Adaptive XAML layout experience summary (I) Principles and page structure design, and xaml Experience Summary
XAML layout Review

Grid and StackPanel are the core layout, especially Grid.

Grid is a Grid layout. The XAML designer may have designed a Grid layout based on the Table in Html, but made improvements. Tables in Html are tr sets of td, which is very troublesome to change the columns. The Grid in XAML uses the method of specifying the row and column numbers and cross-row cross-column numbers, which is flexible and convenient to modify.

There are three methods for the size of rows or columns in the Grid, one is fixed size (Double value), and the other is determined by the content in the Grid (Auto ), one way is to divide the remaining space proportionally (Double value plus *, the remaining space is determined by the size of the external container ).

Specify a fixed Double value to indicate a fixed size. The default unit is px (if no unit is written). It can also be another unit, as shown in the following figure.

Px (default) is a device-independent unit (1/96 inch)

In indicates inch; 1in = 96px

Cm indicates centimeter; 1 cm = (96/2. 54) px

Pt indicates lbs; 1pt = (96/72) px

Here, px is not a definite pixel value, but a unit unrelated to the device. For more information, see the following document.

Auto indicates that the size is determined by the maximum content, and the row or column is opened by the maximum content.

The meaning of a star is to divide the space left by the outside in proportion. * is the abbreviation of 1 *. The number in front of the star is combined into a denominator, and the number in front of each star is used as a molecule, as the proportion of this row or column.

You also need to combine the maximum and minimum limits.

Grid. row and Grid. column specifies the row number and Column number, Grid. rowSpan and Grid. columnSpan specifies the number of rows and columns that span. Both rows and columns start from 0.

The preceding figure shows the main points of Grid layout.The core is divided into three situations: fixed size, content decision, and proportional split of the remaining space, which is the basis of Adaptive Layout.

The linear layout in Android also supports fixed size, Content Determination and proportional split of the remaining space. Therefore, Android can also create an Adaptive Layout interface. However, linear layout only supports layout in one direction at a time. To achieve complex grid effects, it requires multi-layer nesting, Which is troublesome. The Grid layout in Android cannot split the remaining space proportionally. It can only be partially adaptive. There is also a relative layout, which needs to be used in combination in actual interface design. The usage skills are different from those in XAML. However, the adaptive layout principles discussed below are also applicable to the Android platform.

StackPanel is equivalent to a Grid with full Auto, but no sequence number needs to be specified. It also eliminates the need for Grid to define some branches or columns. In addition, if you want to add or remove elements in the middle part, you do not need to change the sequence number. Therefore, StackPanel is simpler and more convenient than Grid when you only need to sort by content size.

Canvas is the absolute positioning layout. by specifying the X and Y coordinates, the elements to be laid out should have a fixed width and height.

Border is a Border and decoration. Strictly speaking, it cannot be regarded as a layout. Only one element can be placed in it. It adds an edge and has no effect on the size when there is no Margin or Padding. You can set a Border for the layout container to add a Border for the entire area.

ScrollViewer supports content scrolling. The content in ScrollViewer is generally larger than the container size and only a part is displayed. the scroll bar controls the scrolling.

ViewBox scales the content to fit the container size.

WrapPanel is a stream layout with one row and one row not folded to the next. The things inside are fixed in width and height.

UniformGrid is a fixed number of rows or columns, with a row or column in the content.

By default, the upper and lower links in the Z direction are followed by those in the upper and lower directions. Specify Panel. ZIndex to specify the upper and lower positions.

Adaptive Dynamic Layout

Adaptive Dynamic Layout refers to a layout scheme in which the size and position of the control on the interface are automatically adjusted as the content and window size of the control change to achieve better display effect.

In contrast to the traditional fixed layout, the fixed layout cannot change with the content and window size. Therefore, only the fixed window size is supported, and the displayed content cannot be changed at will.

When creating a fixed layout interface, you can specify the size and position of the control directly.

To create an Adaptive Dynamic Layout interface, you must use a UI platform that supports adaptive dynamic layout. The XAML-based platform is such a platform, and the Android platform is also. The previous Winform platform cannot fully support adaptive dynamic layout.

Using a platform that supports adaptive dynamic layout does not mean that an Adaptive Dynamic Layout interface can be created. If you also use the method of directly specifying the size and position of the control, the layout is fixed.

To create an Adaptive Dynamic Layout interface, you must use a Dynamic Layout container (such as Grid and StackPanel) and follow certain principles.

Adaptive Dynamic Layout details

As mentioned above, the adaptive layout will automatically adjust the widget size and position as the content and window size change. The following is a detailed analysis.

The changes include:

1. The window size will change. For a full screen interface, the display resolution will change, that is, the total layout space for the outer layer will change.

2. The content size will change, including the size of the text, the size of the image, and the number of list entries.

3. the DPI of the display will change.

In the first case, we split the remaining space (stars) in proportion. In the second case, we used the content to determine the size (Auto). In the third case, the system helped us deal with the problem. The third case is detailed below.

As mentioned above, the default unit px of WPF is not a pixel and is a device-independent unit. The system processes the relationship between the Unit and the pixel Based on DPI.

In Windows, the DPI of a non-high-resolution screen is generally about 96 DPI, so the ratio between units and pixels unrelated to the device is 1 to 1. When you encounter a high-resolution screen (such as Surface Pro 3), adjust the size options of all items in Control Panel-appearance and personalization-display options, that is, change the system DPI, as shown in,

After the system DPI is changed, the ratio of devices irrelevant to the pixel in WPF is no longer 1-to-1, but 1-to-1, that is, the system will enlarge the ratio of the interface. This DPI setting refers to the desktop DPI, which affects all desktop programs. That is to say, Windows wants users to set the display mode of the desktop program in a unified manner. If you want to display more content, do not select zoom in. If you want to display more content, enable zoom in. This type of control is global and users can enjoy a unified user experience.

However, the previous desktop program UI system may not support this amplification mechanism well and requires the application to control it by itself. In WPF, the amplification mechanism can be well supported by the system. The vector content (text, gradient Paint Brush, path, etc.) will not be faulty, but the bitmap content will be faulty. Therefore, use vector content as much as possible. Bitmap content must be processed.

The Windows Store App should not use the desktop DPI set above, but the DPI set internally, but can also be well scaled up on the interface.

The Android system uses a similar mechanism to handle DPI changes. The interface scales proportionally according to DPI changes. DPI is set internally, like Windows Store App, users are not allowed to modify it (which can be modified after Root ).

In short, the DPI system helps us solve the problem. We only consider the first and second problems. SoChanges in available space and content are core issues.

The following is a solution to the core problem, that is, the core principle.

Core Principles of Adaptive Dynamic Layout

1.Range and optimum.

There is an adaptive range with the most appropriate resolution or window size, not infinite adaptation.

For example, a full-screen program with a minimum resolution of 1366*768 is supported, the most suitable resolution is 1920*1080, and the maximum resolution is 2560*1440. the aspect ratio can be changed, not necessarily. However, smaller than the minimum resolution may cause incomplete display, and greater than the maximum resolution may cause poor display performance. The display effect is the best when the resolution is the most suitable, and the display effect is acceptable within the supported range.

2.Set DPI and size.

The default 96 DPI is used for design, and tasks that are amplified based on DPI are handed over to the system. Therefore, you do not need to add the function of dynamically adjusting the font size. You can use a set of fixed font sizes. We assume that all of you use the default DPI design, so the size standards are consistent. If you want to see a small one, you do not need to turn on the system zoom-in option. If you want to see a large one, you need to turn on the system zoom-in option. In addition, the user experience of each program is consistent.

Advanced software supports dynamic font size adjustment in certain areas, such as the code editing area of Visual Studio.

3.There are fixed changes, and the ratio is left blank.

It means that the area size is determined by the content or you can manually specify a fixed size. When the content is determined, the size of the window changes while the content remains unchanged. The area size does not depend on the window size. Relative to the window size, it is a fixed part, determined by the content itself.

Manually specifying a fixed size is also the case, but the use of content determines that it is better than using a fixed size, can not write a fixed width and height without writing a fixed width and height, by the Margin and Padding plus content to control the size. The size of a piece of content should not be determined by the content (text or image, text refers to the font size of the text), Margin and Padding to determine the size of this area. If a fixed size is specified and the content (text) changes, there may be extra space or incomplete display.

The change means that the area size changes with the window size. As the window size changes, the remaining space except for the preceding settings changes, and the remaining space is filled by the changed part, in addition, it may be filled by multiple variable parts in proportion.

The changes include:

A. Auto scaling. The content itself can be scaled automatically, and the image can be scaled automatically, but the effect may be poor. The video can be scaled automatically, and the content wrapped in ViewBox can also be scaled automatically.

B. Text Information. Text area. If the size of this area changes, the display effect is generally acceptable. If there is less text, it will be a line. If there is more text, it will be folded a few more lines, it may also be truncated, out ..., you can also use the cursor to control the scroll by scrolling out of the scroll bar to display all the text.

C. Scroll area. This is the case for data presentation areas such as ListView and DataGrid.

Here we can see that the core issue of Adaptive Dynamic Layout is the fixed part and the changed part. Next, let's share our experience.

The title, toolbar, and other parts are generally set, and the label part of the form is also set.

If the space is large, the part to be supported, or the part to be crowded when the space is small, this area is generally changed.

Displays text blocks of images, videos, uncertain content, text boxes of input content, and scrolling areas of a large amount of content.

Advantages of Adaptive Dynamic Layout

Fixed layout and dynamic layout, fixed layout, fixed size and position, dynamic layout uses the Layout System for layout. Dynamic Layout can adapt to window size changes. If there is no need for adaptive window size changes, dynamic layout should also be used, because the design may change and the fixed layout has no maintainability.

Dynamic Layout is in line with the designer's ideas. A fixed layout is equivalent to rasterizing the design idea. The Rasterization process should be dynamically completed by the layout system when the interface is displayed, rather than static by developers.

PS text and vector graphics raster into PNG bitmap, give people, can you change, can not change or it is difficult to change. If you give the PSD source image to someone else, you can change it,

A Dynamic Layout System like Grid is used to express the layout idea. The actual size and position are calculated by the layout system dynamically and instantly. Specify the layout basis and parameters for the layout system, so that the layout system can automatically calculate the size and location. Do not manually specify the size and location.

Specify the layout basis and parameters for the layout system, so that the layout system can automatically calculate the size and location. Do not manually specify the size and location.

Similar to the parameter specified by the vector graph tool, pixels are computed in real time during rendering, rather than directly storing pixel information like bitmap.

The XAML rendering engine, such as WPF, is a vector system. More recently, it is a vector animation system (such as Flash, JavaFx, and Android). It uses two layers of rendering. 1. layout the System Computing size position, 2. Rendering Engine raster into pixel display.

Other principles

1. Margin indicates that the Margin is not a coordinate. If you need to use coordinates, use Canvas.

2. To use Auto for Grid, the size is determined by the content. Do not set the size manually.

3. nested Grid should be used to replace cross-row and cross-column data. However, a trade-off is required. The nested Grid has a better structure, clear logic, and good maintenance. However, performance loss and cross-row and cross-column data also lead to better performance.

4. StackPanel should be used first when the content is automatically arranged by size. Instead of Auto Grid, StackPanel is easy to maintain.

5. When the proportion is used to divide the remaining space, some rows or columns can be additionally controlled with the minimum or maximum width and height to achieve better results.

Page Structure Design

The following lists some common Page Structure Design ideas.

1. The page structure is layered and generally divided into two to three layers.

2. each layer can have titles and content areas. The outermost layer can contain page titles and content areas. The content areas can be divided into several subareas, each subarea can be divided into the title area and content area.

3. If Layer 3 nesting exists, similar to layer 2nd, the content of level 2 areas can be further divided into several subareas, And the subareas can have titles.

4. The title area may be changed to a toolbar area or a toolbar function.

5. The division between regions should be obvious.

6. Different layers should be easy to differentiate.

7. You can use TabControl to switch the content area in the outermost or second layer.

8. The main view and Details View or function switching area and the actual content area are arranged either left or right.

9. If there is a two-layer function switch, you can arrange the first layer left and right, and the second layer up and down. You can also arrange the upper and lower layers on the first layer, and arrange the upper and lower layers on the left and right sides of the second layer. Or the same as the upper and lower layout, the first layer of the function switching area is above, and the second layer is below to avoid duplication.

10. One or more core content areas on the page are generally a rolling area or a scalable area. to occupy the largest space on the page, you must be able to clearly identify it. The core content area should not be too large to avoid clutter.

Layout Design Mode

According to the actual work experience, several layout design modes are summarized. Similar to the GoF design mode, the mode refers to the design methods that can be applied in a specific scenario.

The layout design mode can also be applied in similar page scenarios to achieve better results. Including,

Local layout design mode:

1. toolbar Mode

2. Empty compression mode

3. Form Mode

4. Table mode

5. toolbox Mode

6. multiple-choice question Mode

Regional layout design mode:

7. Head/end Mode

8. Sidebar Mode

9. Variable equi Mode

10. Document Mode

11. Image Mode

These models are described in detail from the next article.