Silverlight Learning Series (III)

1) Memories

Last timeSilverlightLearning bit by bit series (2)The two layout panels are described as follows:Canavs, stackpanel. Today, let's take a look at the third layout panel, which is also the most flexible layout panel:Grid.

2)GridAndHtmlTable comparison in

Next, we will basically use the Grid Control for layout. This control is similarHtmlInHtmlSet the style of the table. For example, set a style for rows in a table:

here we set a table with a row and three columns. The Border width of the style is 5px the background color is blue. We also found that the controls in the table must be included in or medium, here we embed a button in . This is what is different from grid .

GridYou do not need to embed controls into rows./Column element,Define<Grid. rowdefinitions>And<Grid. columndefinitions>To define rows and columns, you can directly define the control inGridWhich row and column in. For exampleGrid. Row = "0" grid. Column = "1 ",Indicates thatGridThe0Row, the first column. That is, the first and second columns we usually talk about.

3) UseGridLayout

 

We useGridTo define the layout of three rows and three columns, and embed three buttons in the middle, respectively0Line0Column, column1Line1Column, column2Line2Column.

As shown in the red box. Let's take a look at the running effect:

 

4) PassGridTo achieve general layout

In general, our websites are all in the upper and lower layout. There is basically an input box on the top, and a search button is used to search the content of this Site. Then there will be a bunch of things below. Haha. Let's take a look at Zhuo Yue's network as an example.Window liveAnd so on:

 

We can see that there is an input box and a button in the above figure. below isWindows LiveIn the same way, use an input box and a button.

 

Let's implement the following layout:

FirstGridIt defines two rows. One row is used to store the items in the search box mentioned above, and the other row is used to store the following items, such as products or other information. Of course, we store a fixed60The pixel width. If the remaining values come down to another line, we can use"*. To display the effect, we setGridTable Line visibility, as long as the settingsShowgridlines = "true"You can.

Running effect:

Next we will layout the line in the header. We still useGridTo layout.GridNext, define anotherGrid, Do not set itGrid. Row = "0"In this way, the firstGridIn the first line. We set thisGridThree columns are used to place the title of the "Product Search" keyword on the excellent online,Windows LiveAnd a search button.
 

The running result is as follows:

Let's get here today ...... Good night ......
Continue to take a look at the next Silverlight Learning Series (4 ).