Slow and steady Silverlight (10)

Slow-moving Silverlight (10)-2.0 other transform detailed, and UIElement and FrameworkElement Common properties

Introduced

Silverlight 2.0 Other:

RenderTransform-Conversion of render position (System.Windows.Media.Transform type)

TranslateTransform-Translation Conversion

RotateTransform-Rotation conversion (clockwise)

ScaleTransform-Scaling Conversion

SkewTransform-Distort conversions

MatrixTransform-Affine matrix transformation

Compound transformation of TransformGroup-Multiple Transform composition

Rendertransformorigin-center point of position conversion

Clip-clipping region of the container (System.Windows.Media.Geometry type)

IsHitTestVisible-hit test is visible

Opacity-Opacity. Between 0-1

OpacityMask-Opacity Mask (mask) (System.Windows.Media.Brush type)

UseLayoutRounding-Use full pixel layout

Cursor-the mouse pointer style when you move the mouse over the FrameworkElement

Margin-The space between the edge of the container and the edge (pixel value: up or down, up, down, left, up, right, bottom)

Tag-Save Some extra information (System.Object type)

Online Demo

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

Example

1, Transform.xaml

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

<!--
RenderTransform-Conversion of render position (System.Windows.Media.Transform type)
Rendertransformorigin-center point of position conversion
-->

<grid margin= ">"
<rectangle width= "height=" strokedasharray= "3,1" stroke= "Blue" strokethickness= "3"/>
<rectangle width= "height=" fill= "yellow" stroke= "Red" strokethickness= "3" opacity= "0.3" >
<Rectangle.RenderTransform>

<!--TranslateTransform-Translational Conversion-->
<!--
X-the distance moved horizontally. Default value 0
Y-The distance that is moved in the vertical direction. Default value 0
-->
<translatetransform x= "A" y= "ten"/>

</Rectangle.RenderTransform>
</Rectangle>
</Grid>

<grid margin= ">"
<rectangle width= "height=" strokedasharray= "3,1" stroke= "Blue" strokethickness= "3"/>
<rectangle width= "height=" fill= "yellow" stroke= "Red" strokethickness= "3" opacity= "0.3" >
<Rectangle.RenderTransform>

<!--RotateTransform-rotational conversion (clockwise)-->
<!--
Angle-Rotation angle. Default value 0
CenterX-The X-axis coordinates of the center point of the rotation. Default value 0
CenterY-the Y-coordinate of the center point of the rotation. Default value 0
-->
<rotatetransform angle= "centerx=" centery= "/>"

</Rectangle.RenderTransform>
</Rectangle>
</Grid>

<grid margin= ">"
<rectangle width= "height=" strokedasharray= "3,1" stroke= "Blue" strokethickness= "3"/>
<!--
Rendertransformorigin-center point of position conversion
-->
<rectangle width= "height=" fill= "yellow" stroke= "Red" strokethickness= "3" opacity= "0.3" rendertransformorigin= "0.5,0.5" >
<Rectangle.RenderTransform>
<rotatetransform angle= "/>"
</Rectangle.RenderTransform>
</Rectangle>
</Grid>

<grid margin= ">"
<rectangle width= "height=" strokedasharray= "3,1" stroke= "Blue" strokethickness= "3"/>
<rectangle width= "height=" fill= "yellow" stroke= "Red" strokethickness= "3" opacity= "0.3" >
<Rectangle.RenderTransform>

<!--scaletransform-Zoom conversion-->
<!--
A multiple of the scalex-x axis in the direction of the zoom. Default value 1
A multiple of the scaley-y axis in the direction of the zoom. Default value 1
CenterX-Scales The x-axis coordinates of the center point. Default value 0
CenterY-Scales the Y-coordinate of the center point. Default value 0
-->
<scaletransform scalex= "1.1" scaley= "1.3" centerx= "a" centery= "

</Rectangle.RenderTransform>
</Rectangle>
</Grid>

<grid margin= ">"
<rectangle width= "height=" strokedasharray= "3,1" stroke= "Blue" strokethickness= "3"/>
<rectangle width= "height=" fill= "yellow" stroke= "Red" strokethickness= "3" opacity= "0.3" >
<Rectangle.RenderTransform>

<!--SkewTransform-skew conversion (typical application: Simulate three-dimensional depth in two-dimensional objects)-->
<!--
CenterX-Distorts the x-coordinate of the center point. Default value 0
CenterY-distorts the Y-coordinate of the center point. Default value 0
Anglex-x axis distortion angle, Y axis rotates (counterclockwise) around the origin. CenterX has no effect on the rendering results produced by this value. Default value 0
Angley-y Axis twist angle, X axis rotates around origin (clockwise). CenterY has no effect on the rendering results produced by this value. Default value 0
-->
<skewtransform anglex= "angley=" 5 "centerx=" 0 "centery=" 0 "/>

</Rectangle.RenderTransform>
</Rectangle>
</Grid>

<grid margin= ">"
<rectangle width= "height=" strokedasharray= "3,1" stroke= "Blue" strokethickness= "3"/>
<rectangle width= "height=" fill= "yellow" stroke= "Red" strokethickness= "3" opacity= "0.3" >
<Rectangle.RenderTransform>

<!--composite conversion--> of TransformGroup-Multiple Transform compositions
<TransformGroup>
<translatetransform x= "A" y= "ten"/>
<rotatetransform angle= "centerx=" centery= "/>"
</TransformGroup>

</Rectangle.RenderTransform>
</Rectangle>
</Grid>

<!--MatrixTransform-affine matrix transform-->
<!--
|　　　　　　 X| | M11 (default value 1) M21 (default value 0) 0|
| y| = |x y 1| * | M12 (default value 0) M22 (default value 1) 0|
|1| | OffsetX (default value 0) OffsetY (default value 0) 1|

x = x * M11 + y * M12 + OffsetX
y = x * M21 + y * M22 + OffsetY
-->
<grid margin= ">"
<rectangle width= "height=" strokedasharray= "3,1" stroke= "Blue" strokethickness= "3"/>
<rectangle width= "height=" fill= "yellow" stroke= "Red" strokethickness= "3" opacity= "0.3" >
<Rectangle.RenderTransform>
<MatrixTransform>
<matrixtransform.matrix >

Translation Transformation--> in the affine matrix of <!--
<!--
OffsetX-Horizontal displacement
OffsetY-Vertical displacement
-->
<matrix offsetx= "A" offsety= "ten"/>

</MatrixTransform.Matrix>
</MatrixTransform>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>

<grid margin= ">"
<rectangle width= "height=" strokedasharray= "3,1" stroke= "Blue" strokethickness= "3"/>
<rectangle width= "height=" fill= "yellow" stroke= "Red" strokethickness= "3" opacity= "0.3" rendertransformorigin= "0.5,0.5" >
<Rectangle.RenderTransform>
<MatrixTransform>
<matrixtransform.matrix >

<!--scaling conversion in affine matrices-->
<!--
M11-Horizontal amplification Multiples
M22-Vertical magnification
-->
<matrix m11= "1.1" m22= "1.3"/>

</MatrixTransform.Matrix>
</MatrixTransform>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>

<grid margin= ">"
<rectangle width= "height=" strokedasharray= "3,1" stroke= "Blue" strokethickness= "3"/>
<rectangle width= "height=" fill= "yellow" stroke= "Red" strokethickness= "3" opacity= "0.3" >
<Rectangle.RenderTransform>
<MatrixTransform>
<matrixtransform.matrix >

Distortion conversion in the affine matrix of <!---->
<!--
M21-x axis distortion angle, Y axis rotates (counterclockwise) around the origin. tanθ (theta equals 30 degrees in this case)
M12-y Axis twist angle, X axis rotates around origin (clockwise). tanθ (theta equals 5 degrees in this case)
-->
<matrix m21= "0.577350269189626" m12= "0.087488663525924"/>

</MatrixTransform.Matrix>
</MatrixTransform>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>

<grid margin= ">"
<rectangle width= "height=" strokedasharray= "3,1" stroke= "Blue" strokethickness= "3"/>
<rectangle width= "height=" fill= "yellow" stroke= "Red" strokethickness= "3" opacity= "0.3" rendertransformorigin= "0.5,0.5" >
<Rectangle.RenderTransform>
<MatrixTransform>
<matrixtransform.matrix >

Rotation transformation--> in affine matrix of <!--
<!--
|cosθsinθ0|
|-sinθcosθ0|
| 0 1|
Note: The theta angle in this example is equal to 15 degrees
-->
<matrix m11= "0.965925826289068" m12= "0.258819045102521" m21= " -0.258819045102521" m22= "0.965925826289068"/>

</MatrixTransform.Matrix>
</MatrixTransform>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</StackPanel>
</UserControl>