Learn windows phone7 development together (container control 13. 1 ))

There are multiple container controls in Windows phone7. These controls are mainly used for layout settings on the interface and layout settings when multiple controls are contained.

1. Grid Control: it is mainly used for interface layout. This is similar to that in Web pages. It can be used through grid layout planning or nested layout.

 

 

<Grid X: Name = "contentgrid" grid. Row = "1">

<Grid. columndefinitions>

<Columndefinition width = "159 *" type = "codeph" text = "/codeph"/>

<Columndefinition width = "141 *" type = "codeph" text = "/codeph"/>

<Columndefinition width = "180 *" type = "codeph" text = "/codeph"/>

</Grid. columndefinitions>

<Grid. rowdefinitions>

<Rowdefinition Height = "134 *"/>

<Rowdefinition Height = "133 *"/>

<Rowdefinition Height = "220 *"/>

<Rowdefinition Height = "162 *"/>

</Grid. rowdefinitions>

<Image Height = "110" horizontalalignment = "Left" margin =, 131 "name =" image1 "stretch =" fill "verticalignment =" TOP "width =" "Source ="/myphonetest; component/images/chrysanthemum.jpg "/>

<Image grid. column = "1" grid. row = "1" Height = "105" horizontalalignment = "Left" margin =, 0, 0 "name =" image2 "stretch =" fill "verticalignment =" TOP "width =" 115 "Source ="/myphonetest; component/images/desert.jpg "/>

<Image grid. column = "2" grid. row = "2" Height = "150" horizontalalignment = "Left" margin =, 0, 0 "name =" image3 "stretch =" fill "verticalignment =" TOP "width =" 154 "Source ="/myphonetest; component/images/hydrangeas.jpg "/>

</GRID>

</GRID>

 

 

Ii. Canvas control: container and layout control. It mainly uses absolute coordinates to locate child controls. It is very useful for game development.

<Canvas X: Name = "C1" grid. Row = "2">

<Checkbox X: Name = "checkbox3" content = "checkbox3" canvas. Top = "50" canvas. Left = "100" canvas. zindex = "1"/>

</Canvas>

You can also use code to control:

Canvas. setleft ();

Canvas. settop ();

Canvas. setzindex (); // controls the subcontrol's order on the Z axis.

3. stackpanel controls: the container and layout controls are mainly used to control the vertical and horizontal layout of multiple child controls.

<Stackpanel orientation = "horizontal" width = "400" Height = "200">

<Image Source = "chrysanthemum.jpg" Height = "200" width = "200"/>

<Stackpanel orientation = "vertical" width = "200">

<Textblock text = "test1" fontsize = "30"/>

<Textblock text = "Test2" fontsize = "30"/>

<Textblock text = "test3" fontsize = "30"/>

</Stackpanel>

</Stackpanel>

 

 

4. Border Control: this control is used to accommodate a control and draw borders for it. Besides, you can set parameters to produce different border effects. (It should not be regarded as a container control, but it is not very suitable to put it in other classes .)

 

<Border X: Name = "B2" width = "200" Height = "200" borderbrush = "aquamarine" borderthickness = "10" margin = "150,103,130,346"/>

<Border X: Name = "B1" width = "200" Height = "200" background = "gold" borderbrush = "aquamarine" borderthickness = "10, 5, 20, 40 "margin =" 150,369,130, 80 "cornerradius =" 25,200, 10, 15 ">

<Textbox Height = "67" name = "textbox1" text = "test border" background = "gold" foreground = "white" borderbrush = "gold" width = "170" verticalignment = "bottom"/>

</Border>

Borderthickness: Border width. set different values to produce different widths for the four edges.

Cornerradius: Corner radius. set different values to four corners to generate different radians.

 

If you want to add Multiple widgets in a border control, you need to put multiple controls in a container control first, and then put the Container Control in the Border Control.

 

 

<Border X: Name = "B2" borderbrush = "aquamarine" borderthickness = "10" margin = "84,123, 80,220">

<Canvas Height = "279" name = "canvas1" width = "289">

<Image canvas. left = "140" canvas. top = "151" Height = "101" name = "image3" stretch = "fill" width = "123" Source = "/myphonetest; component/images/hydrangeas.jpg"/>

<Image canvas. left = "73" canvas. top = "74" Height = "101" name = "image2" stretch = "fill" width = "123" Source = "/myphonetest; component/images/desert.jpg"/>

<Image canvas. left = "21" canvas. top = "21" Height = "101" name = "image1" stretch = "fill" width = "123" Source = "/myphonetest; component/images/chrysanthemum.jpg"/>

</Canvas>

</Border>