Windows Phone Development (5): Interior decoration

Why is it called interior decoration? Oh, actually said is the layout, specifically, is in a page, you how to put your control, how to manage them, you say, like we just moved into a new home, to "decorate" some? Buy a set of what kind of coffee table and cups (I said "cup with" refers to the original intention, do not understand the wrong), or the sofa or something, how to put, where good-looking, in fact, we do interface design is almost this truth.

Believe that we have played chess on the board there are horizontal, vertical many of the grid lines, and pieces are referred to these grid lines to place, right, in the WP page LAYOUT we call this layout of the grid layout, the corresponding control grid.

Do not underestimate this grid control, it is very useful, but also more flexible, right, when we create a new page, vs for our life in the XAML, is the use of the grid control layout.

Since it is a grid, there will definitely be rows and columns, and our controls are placed in the cells that are generated by these rows and columns as needed, and that is, the table tag we use when we do the page layout should be very similar.

Let's do a little exercise together, and through this exercise, we can understand the use of the grid control from a more intuitive perspective.

1, start vs, create a new WP application, do not need me to say more, will.

2. Delete the root grid in the page and delete the whole. As shown in.

3, then, replace with the following XAML code.

1. <grid x:name= "Root" >
2. <Grid.ColumnDefinitions>
3. <columndefinition width= "*"/>
4. <columndefinition width= "*"/>
5. </Grid.ColumnDefinitions>
6. <Grid.RowDefinitions>
7. <rowdefinition height= "*"/>
8. <rowdefinition height= "*"/>
9. </Grid.RowDefinitions>
10. </Grid>

This allows us to define a grid layout of two rows and two columns, i.e. the entire page is divided into 4 blocks.
Let's just say the high, wide representation of the column, if you've ever used WPF, you should be very clear.
(1) can be used value, double type, such as 120.667, this number is independent of the screen resolution, run the runtime will adjust itself;

(2) *: What does this asterisk mean? Like the example above, I use *, so to speak is not clear, let me give an example.
For example, I divide a grid into 3 rows, and each row has a height of *, which means that the height of the three rows is evenly distributed, which accounts for 1/3 of the height of the grid.
If my first line of high is the height of the second row is *, the third row of the high is the zero, then how to allocate it?
Don't worry, change the code above, we can see the effect visually. For ease of observation, I changed the value of Showgridlines to true so that the grid lines would be displayed.

1. <grid x:name= "Root" showgridlines= "True" >
2. <Grid.RowDefinitions>
3. <rowdefinition height= "/>"
4. <rowdefinition height= "*"/>
5. <rowdefinition height= "/>"
6. </Grid.RowDefinitions>
7. </Grid>

OK, now let's look at the results shown above in the Design view.

In fact, the above three lines of high respectively for 2*,1* and 3*,1 can be omitted, it means the entire grid height is divided into 2 + 1 + 3 = 6 parts, and the 1* accounted for 2 parts, which accounted for 1 of them, which means that they accounted for the total height of the 2/6,1/6,3/6.
What, did you find the rules?
One more example.

1. <grid x:name= "Root" showgridlines= "True" >
2. <Grid.RowDefinitions>
3. <rowdefinition height= "/>"
4. <rowdefinition height= "7*"/>
5. </Grid.RowDefinitions>
6. </Grid>

At this point, let's see what the Design view has changed.

The above example divides the height of the entire container into 3 + 7 = 10 parts, while the height of the first row occupies 3/10 of the total height and the second row is 7/10 of the total height.
Do you understand something now?
Take a look at the following example:

1. <grid x:name= "Root" showgridlines= "True" >
2. <Grid.RowDefinitions>
3. <rowdefinition height= "/>"
4. <rowdefinition height= "5*"/>
5. <rowdefinition height= "/>"
6. </Grid.RowDefinitions>
7. </Grid>

Similarly, the first line fixed 86, which is an absolute value, and then, the remaining height, except 86, the average is divided into 5 + 3 = 8 parts, the second row accounted for the remaining height of 5/8, the third row accounted for the remaining height of 3/8.

(3) Auto, without much explanation, from the meaning of the word to know, is the root content of automatic adjustment.

The definition of a column is similar to a row, except that the column defines the width and the row defines the height.
What if the above three values occur at the same time? The principle is the same, think about it yourself, do not understand the more code to observe.

So, how do we put the content in the corresponding cell? Grid row and column ordinal is starting from 0, such as the first column is 0, the second row is 1, etc., how to do?
When declaring its content, use attached properties to determine which cell the content should be placed in, as in the following example.

2. <grid x:name= "Root" showgridlines= "True" >
4. <Grid.RowDefinitions>
6. <rowdefinition height= "*"/>
8. <rowdefinition height= "*"/>
10. </Grid.RowDefinitions>
12. <Grid.ColumnDefinitions>
14. <columndefinition width= "*"/>
16. <columndefinition width= "*"/>
18. </Grid.ColumnDefinitions>
20. <!--Content--
22. <textblock grid.column= "0" grid.row= "0" text= "1th row 1th column" fontsize= "/>"
24. <rectangle fill= "Yellow" grid.column= "1" grid.row= "0" margin= "" "/>
26. <button grid.column= "0" grid.row= "1" content= "2nd row 1th column" fontsize= "/>"
28. <ellipse fill= "Blue" height= "width=" grid.column= "1" grid.row= "1"/>
30. </Grid>

The results are as follows:

Well, the grid layout is going to blow down here, and then look at another simpler layout--stackpanel, well, it's a panel, and the layout of its sub-content is very simple, in two ways: horizontal and vertical, it's distributed along a straight line, either horizontally or vertically, or, anyway, linearly distributed, Just like we said in the data structure of the stack queue, advanced back out.
Example one, horizontal layout.

1. <stackpanel orientation= "Horizontal" height= ">"
2. <button content= "button 1"/>
3. <button content= "button 2"/>
4. <button content= "button 3"/>
5. </StackPanel>

The effect is as follows:

Example two: Vertical layout.

1. <stackpanel orientation= "Vertical" width= ">"
2. <textblock text= "text one" fontsize= "/>"
3. <textblock text= "text two" fontsize= "/>"
4. <textblock text= "text three" fontsize= "/>"
5. </StackPanel>

The results are as follows:
(Fig. 6) The effect of the operation is as follows:

Finally, let's look at a layout control--canvas with absolute positioning.
It's like our two-dimensional coordinate system, but unlike what we do in plane geometry, the origin of the canvas is in the upper-left corner, and the friends who have written the visualizer know that.
It is important to note that the canvas does not know exactly which child content to set coordinates for, so its top and left values are dependent on the case, so both of these properties are attached properties, that is, it is attached to the place where the child elements placed in the canvas are to be set and used, So the positioning of each child element is set by additional canvas.top and Canvas.Left.

1. <Canvas>
2. <rectangle fill= "Orange" canvas.left= "Notoginseng" canvas.top= "" height= "165" width=
3. <path data= "m0,0 l0,8 l12,8 Z" fill= "Silver"
4. canvas.left= "127"
5. canvas.top= "204"
6. Width= "260"
7. Height= "235" stretch= "Fill"/>
8. </Canvas>

Also, ZIndex is used to set the order of child elements, starting from 0, the default is 0, the higher the value, the more it is on the top layer, such as the above example, we found that the next Triangle added to block the previous rectangle, how to let the rectangle above the other graphics? Yes, set the zindex to a larger value on the line, such as:

2. <Canvas>
4. <rectangle fill= "Orange" canvas.left= "Notoginseng" canvas.top= "116"
6. height= "165" width= "220"
8. canvas.zindex= "1"/>
10. <path data= "m0,0 l0,8 l12,8 Z" fill= "Silver"
12. canvas.left= "127"
14. canvas.top= "204"
16. Width= "260"
18. Height= "235" stretch= "Fill"/>
20. </Canvas>

Windows Phone Development (5): Interior decoration