WP7 WP8 Windows 8 tutorial public basics Article 2 Layout

ArticleDirectory

• Grid
• Canvas
• Border

Layout Grid

It is to design a table and place the controls in the cells of the table.

<! -- Grid table layout

Grid. rowdefinitions: defines rows in the grid.

Grid. columndefinitions: defines the columns of the grid.

-->

<Grid horizontalalignment = "center" Height = "210" verticalalignment = "center" width = "305">

<Grid. rowdefinitions>

<! -- Define three rows and the height of each row -->

<Rowdefinition Height = "30 *"/>

<Rowdefinition Height = "32 *"/>

<Rowdefinition Height = "43 *"/>

</Grid. rowdefinitions>

<Grid. columndefinitions>

<! -- Define four columns and the width of each column -->

<Columndefinition width = "58 *"/>

<Columndefinition width = "61 *"/>

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

<Columndefinition width = "63 *"/>

</Grid. columndefinitions>

<! -- First column of grid -->

<Rectangle fill = "# fff4f4f5"/>

<Rectangle fill = "# ff0b0bee" grid. Row = "1"/>

<Rectangle fill = "# ffeecf0b" grid. Row = "2"/>

<! -- Second column of grid -->

<Rectangle fill = "# ff34ee0b" grid. Row = "2" grid. Column = "1"/>

<Rectangle fill = "# ffff9a09" grid. Row = "0" grid. Column = "1"/>

<Rectangle fill = "# ff08b7d3" grid. Row = "1" grid. Column = "1"/>

<! -- Third column of grid -->

<Rectangle fill = "# ffd30889" grid. Row = "0" grid. Column = "2"/>

<Rectangle fill = "# ffb708d3" grid. Row = "1" grid. Column = "2"/>

<Rectangle fill = "# ff4b484b" grid. Row = "2" grid. Column = "2"/>

<! -- Grid column 4 -->

<Rectangle fill = "# ff661f4d" grid. Row = "0" grid. Column = "3"/>

<Rectangle fill = "# ff0df0bc" grid. Row = "1" grid. Column = "3"/>

<Rectangle fill = "# ff0faa4e" grid. Row = "2" grid. Column = "3"/>

</GRID>

Canvas

Coordinates are used for layout, and many games are used.

You can use setvalue () to set the margin or canvas.

Use setvalue () to obtain the dependency attribute of the control.

For example:

Mybutton. setvalue (canvas. leftproperty, mypoint. X );

Here, mybutton is a button control in XAML, and mypoint is a point type variable.

 

<Canvas horizontalalignment = "center" Height = "144" margin = "0" verticalignment = "center" width = "276" background = "# ffaa6c6c">

<! -- The child element in the canvas is located by adjusting the absolute position of the canvas area.

Canvas. Left-use the upper left corner as the origin and the X-axis distance of the canvas

Canvas. Top-the distance between the canvas Y axis and the upper left corner

-->

<Ellipse fill = "# ff0b0bc5" Height = "51" canvas. Left = "30" stroke = "black" canvas. Top = "52" width = "53"/>

<Rectangle fill = "# ff32fd12" Height = "56" canvas. Left = "119" stroke = "black" canvas. Top = "38" width = "84"/>

</Canvas>

Stackpanel Arrange layout controls

Arrange child elements in a row (horizontal or vertical)

<Stackpanel>

<Stackpanel orientation = "horizontal" X: Name = "stackpanel">

<Button> OK </button>

<Button> OK </button>

<Button> OK </button>

<Button> OK </button>

<Button> OK </button>

<Button> OK </button>

<Button> OK </button>

<Button> OK </button>

<Button> OK </button>

<Button> OK </button>

<Button> OK </button>

<Button> OK </button>

<Button> OK </button>

<Button> OK </button>

</Stackpanel>

Border

Border. Generally, border is used to control styles and create custom controls. Common attributes include padding, margin, and rounded corner settings.

Common Operations in Blend:

 

Right-click a control, click group into, and select grid, border, and other controls.

 

 

<Usercontrol X: class = "silverlightmediacontrol. Border"
Xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml">
<Stackpanel horizontalalignment = "Left">

<! --
Borderthickness-Border width (pixel value: top, bottom, left, top, right, bottom)
Borderbrush-border color
Cornerradius-border radius
-->
<Border borderthickness = "120," borderbrush = "red" cornerradius = "10" width = "" margin = "5">
<Textblock text = "red border" tooltipservice. tooltip = "red border" textalignment = "center"/>
</Border>

<! --
Border. borderbrush-inherits objects from system. Windows. Media. Brush
-->
<Border borderthickness = "3" cornerradius = "10" width = "120" margin = "5">
<Textblock text = "red border" tooltipservice. tooltip = "red border" textalignment = "center"/>
<Border. borderbrush>
<Imagebrush imagesource = "http://silverlight.net/Themes/silverlight/images/logo.jpg"/>
</Border. borderbrush>
</Border>

</Stackpanel>
</Usercontrol>