Self-adapting XAML layout experience Summary (i) Principles and page structure design

XAML Layout Review

Grids and StackPanel are core layouts, especially in grids.

Grid is a grid layout, and the designer of the XAML may have referenced the table in HTML to design the grid layout, but it has been improved. The table in HTML is TR set TD, it is very troublesome to change ranks. A grid in XAML uses a method that specifies the number of rows and columns, and how many spans across a row, and is flexible and convenient to modify.

The size of rows or columns in a grid is three ways, one is fixed size (double value), one way is determined by the content inside (Auto), one way is to split the remaining space proportionally (double value plus *, the remaining space is determined by the size of the outer container).

Specifies that a fixed double value represents a fixed size, its units default to PX (if no units are written), or to other units, see below.

PX (default) for device-independent units (1/96 inches per unit)

in represents inches; 1in==96px

cm = centimeters; 1cm== (96/2.54) px

pt = lb; 1pt== (96/72) px

The PX here is not a definite pixel value, but a device-independent unit, as explained in the following article.

Specifies that the size of auto is determined by the largest content, and the row or column is left open by the largest content inside.

The meaning of the star is proportional to the external to its remaining space, * is a shorthand for the 1*, the number of the front of the star together to do the denominator, each star in front of the number of molecules, as the scale of this row or column.

You also need to combine the maximum and minimum limits.

Grid.Row and Grid.column Specify the rows and columns, Grid.rowspan and Grid.columnspan are specified across several lines and across several columns, and the rows and columns start at 0.

The above is the main point of the grid layout, wherein the core is divided into fixed size, content decision and proportional division of the remaining space three cases, which is the basis of adaptive layout.

The linear layout in Android also supports fixed size, content determines and proportionally splits the remaining three cases, so Android can and should make an interface for adaptive layouts. But linear layouts only support layouts in one direction at a time, such as the need for multiple layers of nesting for complex mesh effects. The grid layout in Android does not allow you to split the remaining space proportionally and only supports partial adaptive scenarios. There is also a relative layout that requires these layouts to be used in conjunction with the actual interface design, with different techniques and XAML, but the principle of adaptive layout discussed below is also applicable to the Android platform.

StackPanel equivalent to all auto in the grid, but does not need to specify the serial number, also eliminates the grid definition part of the branch or the block. And if you add or remove elements from the middle, you don't need to change the ordinal. So it's simpler and easier to use stackpanel than grid when you just want to sort by the size of the content.

Canvas is the absolute positioning of the layout, by specifying the x and y coordinate layouts, the elements to be laid out should have a fixed width.

Border is a border, is decoration, strictly speaking can not be calculated layout, in the inside can only put an element, it to add a side, no margin and padding when the size has no effect. You can set a layer of border for the layout container and add a border to the entire area.

ScrollViewer Support content scrolling inside, the content will generally exceed the size of the container, only part of the display, scroll bar control scrolling.

Viewbox scale the content to fit the container size.

WrapPanel is a flow layout, row by row, row not enough to wrap to the next line. The things inside are fixed wide and high.

A uniformgrid is a fixed number of rows or columns, one row or column in the contents of a row.

The default z-direction up and down relationship is who is behind and who is on top. Specify PANEL.ZINDEX to specify the upper and lower position relationships.

Adaptive Dynamic Layout

Adaptive dynamic layout refers to the layout scheme where the control size and position of the interface are automatically adjusted as the contents of the control change and the window size changes to achieve a better display effect.

In contrast to the traditional fixed layout, fixed layout can not change with the content and window size, so generally only support fixed window size, display content can not be arbitrarily changed.

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

To create an adaptive dynamic layout interface, you need to use a UI platform that supports adaptive dynamic layouts. The XAML-based platform is one such platform, the Android platform is also, the previous WinForm platform cannot fully support the adaptive dynamic layout.

By using a platform that supports adaptive dynamic layouts, it is not always possible to create an interface that adapts to dynamic layouts. If you also use a method that directly specifies the size and position of the control, the fixed layout interface is created.

To create an adaptive dynamic layout interface, you need to use dynamic layout containers (Grid,stackpanel, etc.) and follow certain principles.

Self-adapting dynamic layout detailed

As mentioned above, the adaptive layout automatically adjusts the size and position of the control as the content and window sizes change, and the following is a detailed analysis.

Aspects of change, namely the areas that need to be adaptive include:

1. The window size will change, corresponding to the full screen interface is the display resolution changes, that is, the overall layout of the outer space will change.

2. Content size will change, including how much text will change, the size of the image will change, the list of items will change the situation.

3. The display DPI will change.

In the first case, we use the proportional division of the remaining space (star) to deal with, the second case we use the content to determine the size (Auto) to deal with, the third situation system to help us deal with. Let's talk about the third case in detail.

The above mentioned WPF default unit px is not a pixel, is device-independent, and the system handles the relationship between the unit and the pixel, based on DPI.

Windows systems believe that a non-high-resolution screen typically has a dpi of around 96DPI, so the ratio between device-independent units and pixels is 1:1. Encounter High-resolution screens (such as surface Pro 3), adjust Control Panel-appearance and personalization-display options to change the size of all items option, that is, change the system dpi, see,

When you change the system dpi, the ratio between device-independent units and pixels in WPF is no longer 1:1, but 1 is more than 1, which means that the system enlarges the interface proportionally. This DPI setting refers to the desktop DPI, which affects all desktop programs. That is, Windows wants the user to have a uniform setting for how the desktop program is displayed. If you want to display more content, do not choose to enlarge, if you want to display larger content, turn on zoom in. This control is global and users can get a unified user experience.

However, the previous desktop program UI system might not support this amplification mechanism very well and require the application to control itself. In WPF, the amplification mechanism can be well supported, vector content (text, gradient brush, path, etc.) will not be problematic, but the contents of the bitmap is problematic. Therefore, to use the vector content as much as possible, the bitmap content needs to be handled extra.

The Windows Store app should not use the desktop DPI of the above settings, but rather the DPI of the internal settings, but it will also be supported by a good interface-scale amplification.

The Android system also uses a similar mechanism to handle DPI changes, and the interface scales proportionally to the DPI, which is internal to the system, and does not allow users to modify it like the Windows Store app (root can be modified).

In short, the DPI problem system has helped us deal with it, and we only consider the first and second aspects of the problem. So the change of available space and content change is the core problem.

Here's a solution to the core problem, the core principle.

Self-adapting dynamic layout core principles

1. have a range, have the best.

There is an adaptive range that has one of the most suitable 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, the maximum resolution is supported to 2560*1440, and the aspect ratio can vary, not necessarily 16:9. However, less than the minimum resolution may cause the display is not complete, greater than the maximum resolution may result in poor display performance. The display works best at the most appropriate resolution and is acceptable in the supported range.

2. fixed dpi, fixed size.

Designed using the default 96DPI, the task of zooming in on DPI is given to the system. So generally do not add the ability to dynamically adjust the font size, the use of a fixed set of font sizes can be. We assume that everyone is designed with the default DPI, so the size standard is consistent. Users want to see the small non-open system magnification options, users want to see the big on the system magnification options, the choice of users, and the experience of each program is consistent.

Advanced software that enables dynamic resizing in certain areas, such as the code editing area of Visual Studio.

3. There is a definite change, the proportion of split fill surplus .

The meaning is that the area size is determined by the content or manually specified by a fixed size. When the content is determined, the size of the window changes, and the size of the block area is unchanged. The area size does not depend on the size of the window. Relative to the window size it is a definite part, determined by the content itself.

Manually specifying a fixed size is also the case, but the use of content decision is better than using a fixed size, can not write fixed width high not write fixed width, by margin and padding plus content to control the size. A piece of content it's not supposed to be the size I give him. Force a size, but it should be determined by itself, by the content (text or pictures, text refers to the number of font size), margin and padding to determine the size of this area. If you specify a fixed size, the content (text) changes, there may be extra white space or incomplete display.

Change means that the size of the area varies with the size of the window. As the window size changes, the remaining space outside of the above-mentioned portions changes, the remaining space is filled by the variable portion, and may be populated by a proportional split of the variable portions.

There are several cases of changing parts, including:

A. Auto-scaling scenario. The content itself can be automatically scaled, the image can be automatically scaled, but the effect may not be good, the video can be automatically scaled, viewbox the contents of the package can also be automatically scaled.

B. The case of the text. Text area, the display effect is generally acceptable if the size of the area changes. Words are less words is a line, more words it will fold a few lines, may also be truncated, out of ..., or out of the scroll bar, or scroll bar with the cursor control scrolling, to scroll to display all the text.

C. Scrollable area. This is the case with data rendering areas such as Listview,datagrid.

As can be seen here, in fact, the core problem of adaptive dynamic layout is to determine the part and the variable part. Share your experience below.

headings, toolbars, etc. are generally fixed sections, and the label portion of the form is also part of the set.

If the space is large, which part to support, or small space to squeeze which part, this area is generally a variable part.

Display with pictures, videos, text blocks of indeterminate content, text boxes for input content, and a large number of content-rendered scrollable areas are generally variable parts.

Advantages of adaptive dynamic layouts

Fixed layout and dynamic layout, fixed layout fixed size and position, dynamic layout using layout system for layout. Dynamic layouts can be adapted to the size of the window, and dynamic layouts should be used if there is no adaptive window size change, because the design is likely to change and the fixed layout is not maintainable.

The dynamic layout is in line with the designer's ideas. The fixed layout is equivalent to rasterize the design idea, and the process of rasterization should be done dynamically by the layout system when the interface is rendered, rather than by the developer statically.

PS made of text and vector graphics raster into a PNG bitmap, to others, can change it, can not be changed or difficult to change. If you give others PSD original, it is good to change,

The layout of this dynamic layout system with grid is actually an expression of layout ideas. The actual size and position is calculated by the layout system by the dynamic calculation, the real-time operation out. Specify the layout basis and parameters for the layout system, let the layout system automatically calculate the size and position, try not to manually specify the size and position.

Specify the layout basis and parameters for the layout system, let the layout system automatically calculate the size and position, try not to manually specify the size and position.

Similar to the vector diagram tool specifies the parameters of the graph, rendering pixels are instantly calculated, rather than storing pixel information directly like bitmaps.

The XAML rendering engine, such as WPF, is a vector system, more recently a vector animation system (similar to a system with flash,javafx,android, etc.), which is rendered using a two-layer approach. 1. The layout system calculates the size position, 2. The rendering engine is rasterized into a pixel display.

Other principles

1. Margin is not a coordinate, if you need to use a coordinate with canvas.

2. Grid to use auto, the content determines the size, do not manually set the size.

3. To use nested grids instead of cross-row cross-columns, it is better to make a tradeoff between nested grid structures, clear thinking and logic, good maintenance, but loss of performance, cross-row across rows, and better performance.

4. It is necessary to use StackPanel when the content is automatically arranged, do not use auto grid, easy to maintain.

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

Page structure Design

The following is a list of some common page structure design ideas.

1. The structure of the page is layered and can generally be divided into two to three layers.

2. Each layer may have a title and content area, the outermost layer can include the page title and content area, the content area can be divided into several sub-areas, each sub-region can be divided into the title area and the content area two parts.

3. If there is a third layer of nesting, similar to the 2nd layer, you can also divide the content area of the 2-level area into several sub-regions, the sub-region can have headings.

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

5. The Division between regions should be obvious.

6. Different levels are easy to distinguish.

7. The outermost or second layer of the area can use TabControl to provide the content area switch function.

8. The front and detail view or function switch area and the actual content area are generally arranged around or up and down.

9. If there is a two-layer function switching situation, the first layer can be arranged around the second layer up and down arrangement. can also be arranged on the first layer, the second layer around the arrangement. Or the same as the upper and lower arrangement, functional switching zone, the first layer on the top, the second layer below, to avoid the sense of repetition.

10. One or more of the core content areas on the page are generally scrollable or scalable, and can be clearly identified to occupy the maximum space on the page. The core content area should not be too much to avoid clutter.

Layout Design Patterns

From the actual work experience, summed up several layout design patterns, similar to the GOF design pattern, the pattern refers to a particular scene can be applied in the design method.

Layout design patterns can also be applied in similar page scenes, which can achieve better results. Including

Local Layout design pattern:

1. Toolbar mode

2. Compress blank mode

3. Form mode

4. Tabular mode

5. Toolbox mode

6. Select a problem mode

Area Layout design pattern:

7. Kinsoku Mode

8. Sidebar mode

9. Variable bisection mode

10. Document Mode

11. Picture mode

Explain these patterns in detail from the next chapter.

Self-adapting XAML layout experience Summary (i) Principles and page structure design