[Comprehensive unblocking! Real expression blend practical development skills] Chapter 11 comprehensive analysis layout (grid & canvas & stackpanel & wrappanel)

Write this articleArticlePreviously, I searched Baidu and found that there are not many articles about the layout on the Internet, and the quality is not very high. In terms of grid and canvas, there are still many small details about these two layout containers. If you don't understand them, you will often encounter some incredible things in development. The process of learning Silverlight XAML can be divided into several knowledge points, such as layout, style, template, resource, animation, behavior, and binding. I personally think that layout is the most difficult to master.

Layout is both the foundation and the difficulty:

1. Reusable: It is difficult to get started with templates and styles, but the basic structure of controls remains unchanged. After you learn to define styles for buttons, it will not worry about the button style in the future, but the layout is different. Almost no project has the same layout.

2. Different standards: The Layout looks the same on the surface, and the details may be completely different. In most cases, it is difficult for you to use a standard to regulate or define, when, and how to do it.

3. layout is not a stack of controls, but a reasonable organization. However, the experience of rational organization requires training from numerous projects.

4. The layout that is most likely to change as demand changes.

5. You cannot write comments for the layout. Therefore, the maintenance cost is extremely high for a very deep and complex layout. For example, if you want to modify a project you wrote a year ago and you want to completely change the layout structure, I can hardly understand it even if I wrote it myself.

6. The customer has a high expectation for Silverlight and hopes to innovate the interface without going through the ordinary path. In this way, you may encounter some unconventional la S. They are strange and wild. From the perspective of usage, it must also be robust and adaptive. For example, a special-shaped, hollow-out, semi-transparent, shadow form design must be able to correctly adapt to changes in the browser width and height, be able to completely display all information, the description information can be correctly wrapped, and so on. The most exaggerated requirement I 've ever encountered was that the customer had a projector that only supports 1024*768 resolution and a 4000: 1000 resolution (the numbers are unclear) this aspect ratio is super special led wall. He hopes that your software can be fully displayed under 1024*768, and full screen without deformation under the LED, the development distance from the led 10 meters also needs to be able to see every word on your interface.

7. Every time you modify the layout, it will have an impact on its surroundings and even the whole. You must observe and test the layout comprehensively.

8. animation design should be fully considered before layout design.

9. In some special cases, you cannot see the design view in blend. In this case, only one row can be used for viewing.Code, Restoring in mindProgram.

What is a good layout? Based on my personal experience, we also need to consider the following aspects to make a good layout while meeting the design requirements,

1. Simple Structure

2. Clear Layers

3. layers should not be too deep

3. Relatively independent

4. Low Coupling

5. strong adaptability

6. Easier animation implementation

The above points do not matter in sequence or in priority. You need to weigh their proportions based on the actual needs of the project and the design and development cycle.

Details about Grid

The biggest feature of grid is that it can fill usercontrol in four directions (horizontalalignment, verticalignment. At the same time, his sub-element can also fill themselves in four directions. All the child elements in the grid are relatively located with margin (this is relative to the parent container grid ).

Pay special attention to the following situations:

1. When we do not have horizontalalignment and verticalignment, the default value is "stretch". In other words, if we write <rectangle fill = "# ff701313"/> like this, although we did not mention specifying verticalign, however, by default, the horizontal and vertical filling modes of rectangle are stretch.

2. Do not ignore the nuances of margin. For example, in the following two images, the width and alignment of the rectangle are left alignment and top and bottom alignment. The only difference is that the value of margin. Right is 88, and the value of the other is 0.

If you change the size of the parent container of the rectangle at this time, you can see the difference between the two. The first one always has a 88 gap with the right side of its parent container.

 

 Another feature of grid is like its name. You can define multiple rows and columns in grid to form the grid you need.

 

<Grid X: Name ="Layoutroot"Background =" white ">
<Grid. columndefinitions>
 <Columndefinition width = "*"/>
<Columndefinition width = "210" type = "codeph" text = "/codeph"/>
<Columndefinition width = "Auto" minwidth = "244"/>
</Grid. columndefinitions>
</GRID>

The figure above is a basic grid, which is divided into three columns. The width of each column is different. Note that the three icons in the figure represent three ways to define the column width.

Called "Star", corresponding to the first line of green code, <Columndefinition width ="*"/>, The width of the first column * In this example isLayoutrootThe actual width minus 210 and then minus 244. At the same time, because layoutroot changes with the browser size by default, the width of * In the first column is always not fixed. In addition, you can also obtain that star has the lowest priority in "Star-pixel-auto", which is always calculated at the end.

   Called "pixel", corresponding to the second line of green code, <columndefinition width ="210"/>, It is best to understand that the width of the second column is always 210 pixels. Never changed.

Called "Auto", corresponding to the green code of the third line, <columndefinition width ="Auto"Minwidth = "244"/>, The width of the third column is automatic, and because we specify another attribute, the minimum widthMinwidth = "244"As shown in. If we deleteMinwidth = "244 ",This line of code, in the current situation, we do not put any controls in the third column, then the width of the third column is 0. When we put one or more elements in the third column, the width of the columnWhich of the following elements is the maximum sum of the width of the child element contained in this column plus margin. Left and margin. Right?.

As shown in

  

  

The width of the third column is affected by the gray rectangle instead of the red circle, because the width of the gray rectangle is 100 + 40 (Margin. Left) + 40 (Margin. RightSo the width of the third column is 180 at this time, while the Red Circle is centered and aligned, and its width is only 60, far smaller than the rectangle, so it will not affect the width of the third column. However, if we set its margin. Right to 200 at this time, the width of the third column will change to 200 due to 60 + 100> 260 + 40 + 40.

 

Below we will make a few simple arithmetic questions to consolidate the knowledge we just learned:

First, what is the width of each column defined by the Code below?

Answer: The width is 100, which is divided into five columns. The width of each column is 20.

Question 2: What is the width of each column defined by the Code below?

The width of the first column is 2 *. In other words, we must divide the grid with a width of 100 into 6 points, and the first column occupies 2 points, in this case, the widths of the Five columns are 33,17, 17,17, and 16, respectively.(Note: The grid will automatically round the number of distinct columns according to certain rules, so the width of the last column is 16)

 

Question 3: What is the width of each column defined by the Code below?

The answer is a gird with a width of 100. The width of the third column is pixel = 50, and the other is star ", therefore, all columns for "star" are evenly divided into 50/4-50 and the remaining width is. Therefore, the width of the Five columns is 13, 12, 50, 13, and 12 in sequence.

Question 4: What is the width of each column defined by the Code below?

Answer: when there are three types of tag mixing, first differentiate their priorities, pixel> auto> star, so we can know that, the total width of all columns defined as star is 100-30-auto, that is, 70-auto. suppose that we do not place any elements in the second column (width = auto), then the width of the second column is 0, so the total width of all columns defined as star is 70. Then let's calculate the number of times "star" appears in the code above. The 1 * method is different from the * method, but the effect is exactly the same. Remember to make a "Star ", so we can get a total of 13 stars in 1 + 2 + 3 + 4 + 1 + 1 + 1. Then the width of each "star" is 70/13 to 384 .... Therefore, if the width is 100, the width of the nine columns is 5, 0, 11, 30, 16, 22, 5, or 5.

About location animation in Grid: All element positioning in gird uses the margin attribute, which is of the object type, and objectanimation in Silverlight does not automatically interpolation, if you move margin to the left to change the position of the child element, an unexpected animation will be generated (the child element jumps directly from point A to point B ). Of course, there are also solutions. If you must shift an element in gird, you can use the compositetransform attribute for animation. The compositetransform attribute is not of the object type, so animation supports automatic interpolation.

However, if you want to make an animation for margin and display it smoothly, you need to define a dependency attribute of the double type, and then write an animation specifically for this attribute. When this attribute changes, in his attribute change event, associate it with the sub-element's margin. left join. This can also achieve smooth animation. However, this approach is very inefficient and is not recommended to be used in large quantities.

Canvas details:

Canvas is a canvas. Its biggest feature is that all sub-elements in the canvas are positioned using canvas. left and canvas. top (we can use canvas. left is interpreted as X and canvas. top is understood as Y) so the child element in the canvas is always relative to the canvas's starting point, that is, the absolute position. No matter whether the width or height of a canvas changes to infinity or zero, its child element will never change its position.

Another feature of canvas is that specifying alignment (horizontalalignment, verticalignment) for all sub-elements in the canvas does not play any role.

In addition, you can also use margin in the canvas (thanks to the kklldog user for correcting ).

 

Stackpanel details:

Stackpanel has two features: first, the arrangement of sub-elements is always stream (from left to right, or from top to bottom), which I will not introduce much.

The second characteristic is that stackpanel hasTruncationFeatures:

How to Understand the truncation feature:

We can understand truncation as a bool variable in stackpanel. The default value is false. If a condition is met, the value is automatically set to true;

When truncation = false, we can makeAs shown in:

In the figure, the background color of stackpanel is black. A canvas is added to the canvas and a red rectangle is placed in the canvas. In this case, you only need to set the canvas. left attribute to move the red rectangle out of the black stackpanel. When performing special effects animation, you may need to see the effect of moving child elements out of the parent container. In this case, you can use this feature of canvas.

In addition,In stackpanel"Truncation = false,In fact, directly changing the compositetransform of the stackpanel neutron element can also achieve this effect, without having to wrap a canvas on the outside of each element. As shown in:

The two methods have their own advantages and disadvantages and have distinct characteristics. You can determine which method to use based on the actual situation in development.

 When Will truncation occur? What are the effects of truncation?

When the stackpanel horizontal arrangement of child elements, when the total width of all child elements is greater than the stackpanel width, truncation occurs.

When a stackpanel vertically arranges child elements, the total height of all child elements is greater than the stackpanel height.

See:

 

In the figure, although we specify the compositetransform translatex = 176 of the stackpanel neutron element. However, because stackpanel is vertically arranged, the total height of the three rectangles exceeds the height of stackpanel, so a truncation occurs. As you can see, it is never possible to remove child elements from the parent container.

 

Wrappanel details:

Wrappanel is similar to stackpanel, And the truncation time is the same. In addition, when orientation = horizonta of wrappanel, child elements are first arranged from left to right by default. When the sum of width of child elements is greater than the width of wrappanel, child elements are automatically wrapped down. When orientation = vertical, child elements are first arranged from top to bottom by default. When the sum of height of child elements is greater than the height of wrappanel, child elements are automatically wrapped to the right.

 

 

 Air-making right details:

Sub-elements in all containers involve the issue of empty permission, as shown in:

In the same container, the three rectangles of the same size overlap with each other. Why is the highest empty permission green? SlaveThe Code shows that the rectangle named Green is the last one declared. Therefore, we can conclude that, in the same container without the canvas. zindex specified, the priority of all element empty weights is determined by the order they declare in the XAML code. Since the compiler parses the XAML code in the top-down order, the instantiated object will always get higher empty permission.

In the red box in the lower-left corner of the figure, the button is named "arrange by Z order", which indicates that all elements in the current object and time line window areDescending OrderSort. After clicking this button, all the elements are sorted in descending order of the empty permission.AscendingSort,However, this does not change any code or interface effect. It only changes the display sequence of elements in the object and time line window..

In any container (whether grid, canvas, stackpanel, wrappanel, etc.), you can use canvas. zindex to re-customize the empty permission. For example:

After you redefine the empty permission according to the code above, the red rectangle will obtain the highest empty permission, with the lowest green permission. Canvas. zindex is of the int32 type, so its value can be a negative number.

 <  Grid  X: Name  = "Layoutroot"  Background  = "White"  >  
  <  Rectangle  X: Name  = "Red"  Canvas. zindex  = "3" Fill  = "# Ff701313"  Stroke  = "Black"  Margin  = "55,83, 0, 81"  Width  = "417"  Horizontalalignment  = "Left"  />  
  <  Rectangle  X: Name  = "Blue" Canvas. zindex  = "2"  Fill  = "# Ff1f93ff"  Stroke  = "Black"  Margin  ="  Width  = "417"  Horizontalalignment  = "Left"  />  
  <  Rectangle X: Name  = "Green"  Canvas. zindex  = "1"  Fill  = "# Ff00a37a"  Stroke  = "Black"  Margin  ="  Width  = "417"  Horizontalalignment  = "Left"  />  
 </  Grid  > 

Next, let's make a question to check your learning situation.

As shown in, we have five rectangles, respectively blue (zindex50), yellow (zindex80), Green (zindex120), Black (zindex20), red (zindex-100 ), what is their priority?

The answer is: Black> green> Yello> blue> Red. The basis for this result is that the first child element of layoutroot is firstgird, secondgrid, and red. The relationship between them is secondgrid> firstgrid> Red (because Red's zindex =-100), so secondgrid has the highest permission to create air. On this basis, although the zindex of green is 120 much greater than the zindex of black, the Black still overwrites blue Yello green because secondgrid's empty permission is higher than firstgird.

The result is shown in:

In addition, no matter what kind of containers, such as grid, canvas, stackpanel, and wrappanel, the relationship between them and their sub-elements is the same as that described above, there is no difference.

 

Summary

There is no layout method, and a few simple la s can have thousands of combinations, just like seven notes can combine countless music, I hope everyone can learn and use it, summarize your layout genre and style.

 

My own layout habits

Someone may ask this question. First, I declare that my practice is not a standard, but a habit of use. Grid is the most commonly used layout, followed by stackpanel (I personally prefer the stackpanel nested stackpanel method when building forms, rather than using grid to draw tables, because I think the previous layers are very clear in the object and timeline views.) in a project, canvas and wrappanel are rarely used, only for specific purposes, make sure that the canvas is used only when it is used. In another case, I will use canvas, that is, when directly importing some vector images from the aifile, I will usually first group these vector images and block them. Each group is enclosed by canvas. The advantage is that canvas will not cause vector deformation even if it changes the size or shape.

In addition, I will not name the grid, canvas, or other static elements unless they need to be animated, acted, or controlled in the background code. (Static elements usually refer to logo, Lace, decoration, and some grid and canvas are also static elements in most cases.) This can make the syntax prompt tree look very clean in, after compilation, the xap file will be smaller.

In addition, when you drag a control from the blend to the grid, you will find that the width of the control is usually relative. In this case, I will change the width and height to the absolute height, then, remove all the automatically generated margin attributes. Only when it is clear that the control must be relatively wide can I use margin. Although this is a little tiring, it is a good habit to make sure that your interface is always displayed in strict accordance with your expectations, from this point, you can easily tell whether a interface is made by programmers or by artists.