Slow and steady Silverlight (8)

Introduced

Silverlight 2.0 Graphics: base class System.Windows.Shapes.Shape (Ellipse, line, Path, Polygon, Polyline, Rectangle are inherited from the abstract class System.Windows.Shapes.Shape).

Fill-padding (System.Windows.Media.Brush type)

Stroke-Strokes (System.Windows.Media.Brush type)

StrokeThickness-Stroke size

Stretch-Stretched value [System.Windows.Media.Stretch enum]

Strokedasharray-A collection of values for dashes and clearances [System.Windows.Media.Stretch enumerations]

Strokedashcap-type of dashed ends (line caps) [System.Windows.Media.PenLineCap enum]

StrokeStartLineCap-type of dashed start (line cap) [System.Windows.Media.PenLineCap enum]

Strokeendlinecap-type of dashed end (line cap) [System.Windows.Media.PenLineCap enum]

Strokedashoffset-The starting position of the dashed line. Draw a dashed line from the strokedashoffset distance from the starting end of the dotted line

Strokelinejoin-Connection type at the graphics connection point [System.Windows.Media.PenLineJoin enum]

Strokemiterlimit-the ratio of miter length to STROKETHICKNESS/2. Default value 10, Minimum value 1

Online Demo

Http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

Example

Shape.xaml

<usercontrol x:class= "Silverlight20.Shape.Shape"
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" >
<stackpanel horizontalalignment= "Left" >

<grid margin= "Ten" horizontalalignment= "left" >

<!--
Fill-padding (System.Windows.Media.Brush type)
Stroke-Strokes (border) (System.Windows.Media.Brush type)
StrokeThickness-Stroke (border) dimensions
-->
<rectangle width= "height=" fill= "Red" stroke= "Yellow" strokethickness= "3"/>

</Grid>

<grid width= "height=" "margin=" horizontalalignment= "left" showgridlines= "True" >
<Grid.RowDefinitions>
<rowdefinition height= "/>"
<rowdefinition height= "/>"
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<columndefinition width= "/>"
<columndefinition width= "/>"
</Grid.ColumnDefinitions>

<!--Stretch Property-Stretched value [System.Windows.Media.Stretch enum]-->

<!--
Stretch.none-No processing
Do not do any stretching processing, fill the content to keep the original size
-->
<rectangle grid.row= "0" grid.column= "0"
Width= "height=" fill= "Red" stroke= "Yellow" strokethickness= "6"
Stretch= "None"/>

<!--
Stretch.fill-Full
Adjusts the contents of the fill to fill the entire container, filling the proportions of the content into the container proportions. Default value
-->
<rectangle grid.row= "0" grid.column= "1"
Width= "180" height= "fill=" "Red" stroke= "Yellow" strokethickness= "6"
Stretch= "Fill"/>

<!--
Stretch.uniform-equal-ratio adaptation
Adjust the fill content to fit the container size, and fill the contents with proportional adjustments
If the fill content is not the same as the container proportions, the result of the padding adjustment is:
The padding content is equal to the width of the container, or the padding content is higher than the container's height. Fill content will be fully displayed
-->
<rectangle grid.row= "1" grid.column= "0"
Width= "height=" fill= "Red" stroke= "Yellow" strokethickness= "6"
Stretch= "Uniform"/>

<!--
Stretch.uniformtofill-More than full of
Adjust the fill content to fit the container size, and fill the contents with proportional adjustments
If the fill content is not the same as the container proportions, the result of the padding adjustment is:
The padding is equal to the width of the container, and the padding content is as high as the container. The padding will be trimmed accordingly.
-->
<rectangle grid.row= "1" grid.column= "1"
Width= "height=" fill= "Red" stroke= "Yellow" strokethickness= "6"
Stretch= "UniformToFill"/>

</Grid>

<grid margin= "Ten" horizontalalignment= "left" >
<Grid.RowDefinitions>
<rowdefinition height= "/>"
<rowdefinition height= "/>"
<rowdefinition height= "/>"
<rowdefinition height= "/>"
<rowdefinition height= "/>"
<rowdefinition height= "/>"
<rowdefinition height= "/>"
</Grid.RowDefinitions>

<!--
Strokedasharray-A collection of values for dashes and clearances [System.Windows.Media.Stretch enumerations]
Odd-numbered items are dotted lengths; even-numbered items are gap lengths; if there is only one value, the dash length and clearance length are the values
-->
<line grid.row= "0" x1= "0" y1= "0" x2= "-" y2= "0" stroke= "Red" strokethickness= "10"
strokedasharray= "2"/>

<!--
Strokedashcap-type of dashed ends (line caps) [System.Windows.Media.PenLineCap enum]
Penlinecap.flat-None. Default value
Penlinecap.round-diameter equals strokethickness
Penlinecap.square-height equals strokethickness and width equals STROKETHICKNESS/2
Penlinecap.triangle-bottom length equal to strokethickness isosceles right-angled triangle
-->
<line grid.row= "1" x1= "0" y1= "0" x2= "-" y2= "0" stroke= "Red" strokethickness= "10"
Strokedasharray= "2,4,6" strokedashcap= "Flat"/>

<line grid.row= "2" x1= "0" y1= "0" x2= "-" y2= "0" stroke= "Red" strokethickness= "10"
Strokedasharray= "2,4,6" strokedashcap= "Round"/>
<line grid.row= "2" x1= "0" y1= "0" x2= "-" y2= "0" stroke= "Black" strokethickness= "10"
Strokedasharray= "2,4,6" strokedashcap= "Flat"/>

<line grid.row= "3" x1= "0" y1= "0" x2= "-" y2= "0" stroke= "Red" strokethickness= "10"
Strokedasharray= "2,4,6" strokedashcap= "Square"/>
<line grid.row= "3" x1= "0" y1= "0" x2= "-" y2= "0" stroke= "Black" strokethickness= "10"
Strokedasharray= "2,4,6" strokedashcap= "Flat"/>

<line grid.row= "4" x1= "0" y1= "0" x2= "-" y2= "0" stroke= "Red" strokethickness= "10"
Strokedasharray= "2,4,6" strokedashcap= "triangle"/>
<line grid.row= "4" x1= "0" y1= "0" x2= "-" y2= "0" stroke= "Black" strokethickness= "10"
Strokedasharray= "2,4,6" strokedashcap= "Flat"/>

<!--
StrokeStartLineCap-type of dashed start (line cap) [System.Windows.Media.PenLineCap enum]
Strokeendlinecap-type of dashed end (line cap) [System.Windows.Media.PenLineCap enum]
-->
<line grid.row= "5" x1= "0" y1= "0" x2= "-" y2= "0" stroke= "Red" strokethickness= "10"
Strokedasharray= "2,4,6" strokestartlinecap= "Square" strokeendlinecap= "triangle"/>
<line grid.row= "5" x1= "0" y1= "0" x2= "-" y2= "0" stroke= "Black" strokethickness= "10"
Strokedasharray= "2,4,6" strokedashcap= "Flat"/>

<!--
Strokedashoffset-The starting position of the dashed line. Draw a dashed line from the strokedashoffset distance from the starting end of the dotted line
-->
<line grid.row= "6" x1= "0" y1= "0" x2= "-" y2= "0" stroke= "Red" strokethickness= "10"
Strokedasharray= "2,4,6" strokedashoffset= "1"/>

</Grid>

<grid margin= "Ten" horizontalalignment= "left" showgridlines= "True" >
<Grid.ColumnDefinitions>
<columndefinition width= "/>"
<columndefinition width= "/>"
<columndefinition width= "/>"
</Grid.ColumnDefinitions>

<!--strokelinejoin Properties-Connection type at the graphics connection point [System.Windows.Media.PenLineJoin enum]-->

<!--
Strokelinejoin.bevel-Linear connection
-->
<polyline grid.column= "0"
points= "10,100 50,10 100,100" stroke= "Red" strokethickness= "Center"
strokelinejoin= "Bevel"/>

<!--
Strokelinejoin.miter-Angular connection. Default value
-->
<polyline grid.column= "1"
points= "10,100 50,10 100,100" stroke= "Red" strokethickness= "Center"
strokelinejoin= "Miter"/>

<!--
Strokelinejoin.round-Arc Connection
-->
<polyline grid.column= "2"
points= "10,100 50,10 100,100" stroke= "Red" strokethickness= "Center"
strokelinejoin= "Round"/>

</Grid>

<grid margin= "Ten" horizontalalignment= "left" showgridlines= "True" >
<Grid.ColumnDefinitions>
<columndefinition width= "/>"
<columndefinition width= "/>"
<columndefinition width= "/>"
</Grid.ColumnDefinitions>

<!--Strokemiterlimit Property-the ratio of miter length (blue Line portion) to STROKETHICKNESS/2. Default value 10, Minimum 1-->

<polyline grid.column= "0"
points= "0,100 50,10 100,100" stroke= "Red" strokethickness= "20"
strokemiterlimit= "1"/>
<line grid.column= "0" x1= "0" y1= "a" x2= "", "y2=" stroke= "Yellow"/>
<line grid.column= "0" "x1=" y1= "x2=" y2= "stroke=" Yellow
<line grid.column= "0" x1= "y1=" x2= "0" y2= "Blue" stroke=

<polyline grid.column= "1"
points= "0,100 50,10 100,100" stroke= "Red" strokethickness= "20"
strokemiterlimit= "2.0"/>
<line grid.column= "1" x1= "0" y1= "a" x2= "", "y2=" stroke= "Yellow"/>
<line grid.column= "1" "x1=" y1= "x2=" y2= "stroke=" Yellow
<line grid.column= "1" x1= "y1=" x2= " -10" y2= "Blue" stroke=

<polyline grid.column= "2"
points= "0,100 50,10 100,100" stroke= "Red" strokethickness= "20"
/>
<line grid.column= "2" x1= "0" y1= "a" x2= "", "y2=" stroke= "Yellow"/>
<line grid.column= "2" "x1=" y1= "x2=" y2= "stroke=" Yellow
<line grid.column= "2" x1= "y1=" x2= " -10" y2= "Blue" stroke=

</Grid>

</StackPanel>
</UserControl>

Ok

SOURCE Download Address: Http://files.cnblogs.com/webabcd/Silverlight.rar

Return to the "Steady Silverlight 2.0 Series tutorial" Directory page