Windows Phone development (5): Interior Decoration

Why is it interior decoration? Well, what we are talking about is layout. Specifically, how do you place your controls and manage them on a page? You said, like we just moved into a new residence, do you want to "renovate? What kind of coffee tables and cups should I buy? (I mean "Cup" refers to the original intention, so don't get it wrong.) or sofa or something. How should I put it and where should I look? In fact, the same is true for our interface design.

I believe we will know after playing chess that there are many horizontal and vertical gridlines on the board, and the pawns are placed by referring to these gridlines, in the WP page layout, we call this layout a grid layout, and the corresponding control is a grid.

Don't underestimate this grid control. It is very useful and flexible. Right, when we create a new page, VS is a new XAML, the grid control is used for layout.

Since it is a grid, there will certainly be rows and columns, and our control is put into cells generated by these rows and columns as needed, it is the table label we use when making web page formatting. It should be said that it is very similar.

Next, let's start with a small exercise. Through this exercise, we can learn more about grid control usage from a more intuitive perspective.

1. Start Vs and create a WP application.ProgramI don't need to talk about it anymore.

2. Delete the root grid on the page. As shown in.

 

3. replace it with the following XAMLCode.

<Grid X: Name = "root"> <grid. columndefinitions> <columndefinition width = "*"/> <columndefinition width = "*"/> </grid. columndefinitions> <grid. rowdefinitions> <rowdefinition Height = "*"/> <rowdefinition Height = "*"/> </grid. rowdefinitions> </GRID>
 

 

In this way, we define a grid layout with two rows and two columns, that is, the entire page is divided into four squares.
Let's briefly describe the Row Height and column width representation. If you have used WPF, you should be clear.
(1) The value or double type can be used, for example, 120.667. This number is irrelevant to the screen resolution and will be adjusted by the running database;

(2) *: What does this asterisk mean? As in the above example, I used *. It is unclear. Let me give an example.
For example, if I divide a grid into three rows and the height of each row is *, the height of the three rows is evenly allocated, accounting for 1/3 of the height of the entire grid.
If the height of the first row is 2 *, the height of the second row is *, and the height of the third row is 3 *, how should I allocate it?
Don't worry. Let's change the code above so that we can see the effect intuitively. To facilitate observation, I changed the value of showgridlines to true, so that the gridlines will be displayed.

<Grid X: Name = "root" showgridlines = "true"> <grid. rowdefinitions> <rowdefinition Height = "2 *"/> <rowdefinition Height = "*"/> <rowdefinition Height = "3 *"/> </grid. rowdefinitions> </GRID>
 

Okay. Now let's take a look at the results shown above the design view.

In fact, the height of the above three rows is 2 *, 1 * and 3 *, and 1 can be omitted. It means that the height of the entire grid is divided into 2 + 1 + 3 = 6 parts, 2 * accounts for two of them, 1 * accounts for one of them, and 3 * accounts for three of them, that is, they account for 2/6, 1/6, and 3/6 respectively.
How did you find the rule?
Another example.

 
<Grid X: Name = "root" showgridlines = "true"> <grid. rowdefinitions> <rowdefinition Height = "3 *"/> <rowdefinition Height = "7 *"/> </grid. rowdefinitions> </GRID>
 

At this time, let's look at the changes in the design view?

 

In the preceding example, the height of the entire container is evenly divided into 3 + 7 = 10 parts, the height of the first line is 3/10 of the total height, and the height of the second line is 7/10 of the total height.
Do you understand?
Let's take a look at the following example:

<Grid X: Name = "root" showgridlines = "true"> <grid. rowdefinitions> <rowdefinition Height = "86"/> <rowdefinition Height = "5 *"/> <rowdefinition Height = "3 *"/> </grid. rowdefinitions> </GRID>
 

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

(3) Auto. You don't need to explain more. You can understand the meaning of the word, that is, the root content is automatically adjusted.

The column definition is similar to the row definition, except that the column definition width and the row definition height.
What if the above three values appear at the same time? The principle is the same. Think for yourself. If you don't understand it, write more code and observe it.

So, how do we put the content in the corresponding cell? The row and column numbers of the grid start from 0. For example, the first column is 0, and the second row is 1. How can this problem be solved?
When declaring its content, you can use additional attributes to determine which cell the content should be placed in, as shown in the following example.

<Grid X: Name = "root" showgridlines = "true"> <grid. rowdefinitions> <rowdefinition Height = "*"/> <rowdefinition Height = "*"/> </grid. rowdefinitions> <grid. columndefinitions> <columndefinition width = "*"/> <columndefinition width = "*"/> </grid. columndefinitions> <! -- Content --> <textblock grid. column = "0" grid. row = "0" text = "1st rows, 1st columns" fontsize = "35"/> <rectangle fill = "yellow" grid. column = "1" grid. row = "0" margin = "68"/> <button grid. column = "0" grid. row = "1" content = "2nd rows and 1st columns" fontsize = "32"/> <ellipse fill = "blue" Height = "95" width = "180" grid. column = "1" grid. row = "1"/> </GRID>
 

The running effect is as follows:

 

 

Well, the grid layout is blowing here. Next we will look at another simple layout-stackpanel. Well, it is a panel and its sub-content layout is very simple, there are two ways: horizontal and vertical, which are distributed along a straight line, either horizontally or vertically, or linearly, similar to the stack queue in our data structure, advanced and later.
Example 1: horizontal layout.

 
<Stackpanel orientation = "horizontal" Height = "100"> <button content = "button 1"/> <button content = "button 2"/> <button content = "button 3 "/> </stackpanel>
 

The effect is as follows:

 

Example 2: vertical layout.

 
<Stackpanel orientation = "vertical" width = "300"> <textblock text = "text 1" fontsize = "80"/> <textblock text = "text 2" fontsize = "80 "/> <textblock text =" Text 3 "fontsize =" 80 "/> </stackpanel>
 

The running effect is as follows:
(Figure 6) the running effect is as follows:

 

Finally, let's take a look at a layout control-canvas, which is absolutely positioned.
It is like our two-dimensional coordinate system, but what is different from our plane ry is that the canvas origin is in the upper left corner. I believe all the friends who have written visualization programs know it.
Note that canvas does not know which sub-content to set coordinates for. Therefore, the top and left values of canvas depend on the actual situation. Therefore, both attributes are additional attributes, that is, it is used to attach the child element to the local position to be set in the canvas. Therefore, the positioning of each child element is based on the attached canvas. top and canvas. left.

 
<Canvas> <rectangle fill = "orange" canvas. left = "37" canvas. top = "116" Height = "165" width = "220"/> <path data = "M0, 0 l0, 8 L12, 8 Z" fill = "Silver" canvas. left = "127" canvas. top = "204" width = "260" Height = "235" stretch = "fill"/> </canvas>
 

 

In addition, zindex is used to set the sequence of sub-elements. Starting from 0, the default value is 0. The larger the value is, the more it is on the top layer. For example, in the above example, we found that, the triangle added later blocks the previous rectangle. How can we keep the rectangle above other shapes? Yes. Set zindex to a large value, for example:

<Canvas> <rectangle fill = "orange" canvas. left = "37" canvas. top = "116" Height = "165" width = "220" canvas. zindex = "1"/> <path data = "M0, 0 l0, 8 L12, 8 Z" fill = "Silver" canvas. left = "127" canvas. top = "204" width = "260" Height = "235" stretch = "fill"/> </canvas>