Layout1:grid (Supplementary Assignment)

Layout1:grid

In this section we will explain a layout:gird.

First, the previous section of code:

<page

X:class= "Gridstudy.mainpage"

Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"

Xmlns:local= "Using:gridstudy"

Xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"

Xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006"

Mc:ignorable= "D"

Background= "{ThemeResource Applicationpagebackgroundthemebrush}" >

<grid name= "GridRoot" >

<Grid.RowDefinitions>

<rowdefinition height= "Auto"/>

<rowdefinition height= "*"/>

</Grid.RowDefinitions>

<rectangle height= "fill=" "Red" grid.row= "0"/>

<rectangle grid.row= "1" fill= "Black"/>

</Grid>

</Page>

First, the <grid Name = "GridRoot" > facilitates our subsequent calls to the Grid in C # code.

And then:

1, understand grid in the default state is a row by column, display the entire screen. The meaning of grid existence is to define rows and columns.

Then define the row

We can see that two lines are defined, the first line is height = "Auto", the second row is height = "*"

2, the meaning of Auto is: in the line to put how big things, my row will expand to how big, of course, it is impossible to exceed the size of the screen. So there is auto (auto).

3, * The definition is, as far as possible to use the rest of the place, make it available. I don't know much about this place, I hope you can criticize me.

4. In the definition of row, the width of the row is not defined, and the default width is full screen width.

5, if the auto is changed to 200, then the first column gives 200 of the range, and then see below to establish a high 100 rectangle, the effect is as follows:

If you change auto to$, it means that only the size of the place is given, and the rectangle is the effect of the following:

Show that the front is the given range, the given range if auto, you can achieve adaptive, if not auto, then the largest is just beginning to set so big.

6. Say, why use Grid.Row = "0" or 1?

This problem is a numbering problem, the first piece of land is 0 number, the second piece of course is 1 number, and then on the 0 number on the ground to build a rectangle, marked row = "0", the same thing on the ground of the 1th building things is labeled row = "1". And on number No. 0, you don't have to write, because it's the default.

7, some interesting realization (plagiarism) You can understand, you may play a play layout

<grid name= "GridRoot" >

<Grid.RowDefinitions>

<rowdefinition height= "*"/>

<rowdefinition height= "*"/>

<rowdefinition height= "*"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<columndefinition width= "*"/>

<columndefinition width= "*"/>

<columndefinition width= "*"/>

</Grid.ColumnDefinitions>

<textblock fontsize= ">1</TextBlock>"

<textblock grid.column= "1" fontsize= ">2</TextBlock>"

<textblock grid.column= "2" fontsize= ">3</TextBlock>"

<textblock grid.column= "0" grid.row= "1" fontsize= ">4</TextBlock>"

<textblock grid.column= "1" grid.row= "1" fontsize= ">5</TextBlock>"

<textblock grid.column= "2" grid.row= "1" fontsize= ">6</TextBlock>"

<textblock grid.column= "0" grid.row= "2" fontsize= ">7</TextBlock>"

<textblock grid.column= "1" grid.row= "2" fontsize= ">8</TextBlock>"

<textblock grid.column= "2" grid.row= "2" fontsize= ">9</TextBlock>"

</Grid>

<rectangle fill= "Blue"

height= "100"

Width= "100"

Horizontalalignment= "left"

verticalalignment= "Top"/>

<rectangle fill= "Red"

height= "100"

Width= "100"

Horizontalalignment= "Right"

verticalalignment= "Bottom"/>

<rectangle fill= "Green"

height= "100"

Width= "100"

Horizontalalignment= "Center"

verticalalignment= "Center"/>

<rectangle fill= "Yellow"

height= "100"

Width= "100"

Horizontalalignment= "left"

Verticalalignment= "Top"

margin= "100,100,0,0"/>

<rectangle fill= "White"

height= "100"

Width= "100"

Horizontalalignment= "left"

Verticalalignment= "Bottom"

margin= "50,0,0,50"/>

To illustrate: is thehorizontalalignment in the horizontal direction near the left or right, or in the middle of something ...

VerticalAlignment is in the vertical direction near the top or the middle of something ...

However, margin (edge) is refined from the left, how far from the top, how far from the right, how far from the bottom, if this is near the top left, then the distance from the left and the top of the two values are valid, the right and the bottom of the general set to 0 is good, I tried, It will work when it is big enough, because it will have an effect when it is larger than the value that is ignored. Push an object away from the edge. Near the top left to the left and the upper side of the push is small, however, if the right and the lower side of the push also reached the threshold, they will also produce effects, may not see a box ..., this understanding is good, in fact, set to 0 , after all, two o'clock can be determined a location ...

Layout1:grid (Supplementary Assignment)