silverlight.2.0:Silverlight(10) - 2.0其它的Transform详解 以及UIElement和FrameworkElement的常用属性

　　本文源代码下载地址:

　　http://flashview.ddvip.com/2008_11/Silverlight.rar

　　介绍

　　Silverlight 2.0 其它:

　　RenderTransform - 呈现位置转换(.Windows.Media.Transform类型)

　　TranslateTransform - 平移转换

　　RotateTransform - 旋转转换(顺时针)

　　ScaleTransform - 缩放转换

　　SkewTransform - 扭曲转换

　　MatrixTransform - 仿射矩阵变换

　　TransformGroup - 多个 Transform 组成复合转换

　　RenderTransformOrigin - 位置转换中心点

　　Clip - 容器剪辑区域(.Windows.Media.Geometry类型)

　　IsHitTestVisible - 命中测试是否可见

　　Opacity - 不透明度0 - 1的间

　　OpacityMask - 不透明蒙版(遮罩)(.Windows.Media.Brush类型)

　　UseLayoutRounding - 是否使用完整像素布局

　　Cursor - 鼠标移动到 FrameworkElement 上面时鼠标指针样式

　　Margin - 容器边缘和边缘的外空白距离(像素值:上下左右；左右,上下；左,上,右,下)

　　Tag - 保存些额外信息(.Object类型)

　　在线DEMO

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

　　举例

　　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 - 呈现位置转换(.Windows.Media.Transform类型)
　　　　RenderTransformOrigin - 位置转换中心点
　　　　-->
　　
　　　　<Grid Margin="20">
　　　　　　<Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" />
　　　　　　<Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
　　　　　　　　<Rectangle.RenderTransform>
　　
　　　　　　　　　　<!--TranslateTransform - 平移转换-->
　　　　　　　　　　<!--
　　　　　　　　　　X - 水平方向上移动距离默认值 0
　　　　　　　　　　Y - 垂直方向上移动距离默认值 0
　　　　　　　　　　-->
　　　　　　　　　　<TranslateTransform X="100" Y="10" />
　　
　　　　　　　　</Rectangle.RenderTransform>
　　　　　　</Rectangle>
　　　　</Grid>
　　
　　　　<Grid Margin="20">
　　　　　　<Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" />
　　　　　　<Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
　　　　　　　　<Rectangle.RenderTransform>
　　
　　　　　　　　　　<!--RotateTransform - 旋转转换(顺时针)-->
　　　　　　　　　　<!--
　　　　　　　　　　Angle - 旋转角度默认值 0
　　　　　　　　　　CenterX - 旋转中心点 X 轴坐标默认值 0
　　　　　　　　　　CenterY - 旋转中心点 Y 轴坐标默认值 0
　　　　　　　　　　-->
　　　　　　　　　　<RotateTransform Angle="15" CenterX="100" CenterY="50" />
　　
　　　　　　　　</Rectangle.RenderTransform>
　　　　　　</Rectangle>
　　　　</Grid>
　　
　　　　<Grid Margin="20">
　　　　　　<Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" />
　　　　　　<!--
　　　　　　RenderTransformOrigin - 位置转换中心点
　　　　　　-->
　　　　　　<Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
　　　　　　　　<Rectangle.RenderTransform>
　　　　　　　　　　<RotateTransform Angle="15" />
　　　　　　　　</Rectangle.RenderTransform>
　　　　　　</Rectangle>
　　　　</Grid>
　　
　　　　<Grid Margin="20">
　　　　　　<Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" />
　　　　　　<Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
　　　　　　　　<Rectangle.RenderTransform>
　　
　　　　　　　　　　<!--ScaleTransform - 缩放转换-->
　　　　　　　　　　<!--
　　　　　　　　　　ScaleX - X 轴方向上缩放倍数默认值 1
　　　　　　　　　　ScaleY - Y 轴方向上缩放倍数默认值 1
　　　　　　　　　　CenterX - 缩放中心点 X 轴坐标默认值 0
　　　　　　　　　　CenterY - 缩放中心点 Y 轴坐标默认值 0
　　　　　　　　　　-->
　　　　　　　　　　<ScaleTransform ScaleX="1.1" ScaleY="1.3" CenterX="100" CenterY="50" />
　　
　　　　　　　　</Rectangle.RenderTransform>
　　　　　　</Rectangle>
　　　　</Grid>
　　
　　　　<Grid Margin="20">
　　　　　　<Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" />
　　　　　　<Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
　　　　　　　　<Rectangle.RenderTransform>
　　
　　　　　　　　　　<!--SkewTransform - 扭曲转换(典型应用:在 2维 对象中模拟 3维 深度)-->
　　　　　　　　　　<!--
　　　　　　　　　　CenterX - 扭曲中心点 X 轴坐标默认值 0
　　　　　　　　　　CenterY - 扭曲中心点 Y 轴坐标默认值 0
　　　　　　　　　　AngleX - X 轴扭曲角度Y 轴绕原点旋转(逆时针)CenterX 对此值所产生呈现结果没有影响默认值 0
　　　　　　　　　　AngleY - Y 轴扭曲角度X 轴绕原点旋转(顺时针)CenterY 对此值所产生呈现结果没有影响默认值 0
　　　　　　　　　　-->
　　　　　　　　　　<SkewTransform AngleX="30" AngleY="5" CenterX="0" CenterY="0" />
　　
　　　　　　　　</Rectangle.RenderTransform>
　　　　　　</Rectangle>
　　　　</Grid>
　　
　　　　<Grid Margin="20">
　　　　　　<Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" />
　　　　　　<Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
　　　　　　　　<Rectangle.RenderTransform>
　　
　　　　　　　　　　<!--TransformGroup - 多个 Transform 组成复合转换-->
　　　　　　　　　　<TransformGroup>
　　　　　　　　　　　　<TranslateTransform X="100" Y="10" />
　　　　　　　　　　　　<RotateTransform Angle="15" CenterX="100" CenterY="50" />
　　　　　　　　　　</TransformGroup>
　　
　　　　　　　　</Rectangle.RenderTransform>
　　　　　　</Rectangle>
　　　　</Grid>
　　
　　　　<!--MatrixTransform - 仿射矩阵变换-->
　　　　<!--
　　　　|X|　　　　　　 |M11(默认值 1)　　　M21(默认值 0)　　　 0|
　　　　|Y| = |x y 1| * |M12(默认值 0)　　　M22(默认值 1)　　　 0|
　　　　|1|　　　　　　 |OffX(默认值 0)　OffY(默认值 0)　 1|
　　
　　　　X = x * M11 + y * M12 + OffX
　　　　Y = x * M21 + y * M22 + OffY
　　　　-->
　　　　<Grid Margin="20">
　　　　　　<Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" />
　　　　　　<Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
　　　　　　　　<Rectangle.RenderTransform>
　　　　　　　　　　<MatrixTransform>
　　　　　　　　　　　　<MatrixTransform.Matrix >
　　
　　　　　　　　　　　　　　<!--仿射矩阵中 平移转换-->
　　　　　　　　　　　　　　<!--
　　　　　　　　　　　　　　OffX - 水平位移
　　　　　　　　　　　　　　OffY - 垂直位移
　　　　　　　　　　　　　　-->
　　　　　　　　　　　　　　<Matrix OffX="100" OffY="10" />
　　
　　　　　　　　　　　　</MatrixTransform.Matrix>
　　　　　　　　　　</MatrixTransform>
　　　　　　　　</Rectangle.RenderTransform>
　　　　　　</Rectangle>
　　　　</Grid>
　　
　　　　<Grid Margin="20">
　　　　　　<Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" />
　　　　　　<Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
　　　　　　　　<Rectangle.RenderTransform>
　　　　　　　　　　<MatrixTransform>
　　　　　　　　　　　　<MatrixTransform.Matrix >
　　
　　　　　　　　　　　　　　<!--仿射矩阵中 缩放转换-->
　　　　　　　　　　　　　　<!--
　　　　　　　　　　　　　　M11 - 水平放大倍数
　　　　　　　　　　　　　　M22 - 垂直放大倍数
　　　　　　　　　　　　　　-->
　　　　　　　　　　　　　　<Matrix M11="1.1" M22="1.3" />
　　
　　　　　　　　　　　　</MatrixTransform.Matrix>
　　　　　　　　　　</MatrixTransform>
　　　　　　　　</Rectangle.RenderTransform>
　　　　　　</Rectangle>
　　　　</Grid>
　　
　　　　<Grid Margin="20">
　　　　　　<Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" />
　　　　　　<Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
　　　　　　　　<Rectangle.RenderTransform>
　　　　　　　　　　<MatrixTransform>
　　　　　　　　　　　　<MatrixTransform.Matrix >
　　
　　　　　　　　　　　　　　<!--仿射矩阵中 扭曲转换-->
　　　　　　　　　　　　　　<!--
　　　　　　　　　　　　　　M21 - X 轴扭曲角度Y 轴绕原点旋转(逆时针)tanθ(本例中θ等于30度)
　　　　　　　　　　　　　　M12 - Y 轴扭曲角度X 轴绕原点旋转(顺时针)tanθ(本例中θ等于5度)
　　　　　　　　　　　　　　-->
　　　　　　　　　　　　　　<Matrix M21="0.577350269189626" M12="0.087488663525924" />
　　
　　　　　　　　　　　　</MatrixTransform.Matrix>
　　　　　　　　　　</MatrixTransform>
　　　　　　　　</Rectangle.RenderTransform>
　　　　　　</Rectangle>
　　　　</Grid>
　　
　　　　<Grid Margin="20">
　　　　　　<Rectangle Width="200" Height="100" StrokeDashArray="3,1" Stroke="Blue" StrokeThickness="3" />
　　　　　　<Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
　　　　　　　　<Rectangle.RenderTransform>
　　　　　　　　　　<MatrixTransform>
　　　　　　　　　　　　<MatrixTransform.Matrix >
　　
　　　　　　　　　　　　　　<!--仿射矩阵中 旋转转换-->
　　　　　　　　　　　　　　<!--
　　　　　　　　　　　　　　|cosθ　　　sinθ　　　 0|
　　　　　　　　　　　　　　|-sinθ　　 cosθ　　　 0|
　　　　　　　　　　　　　　|0　　　　　0　　　　　 1|
　　　　　　　　　　　　　　注:本例中θ角等于15度
　　　　　　　　　　　　　　-->
　　　　　　　　　　　　　　<Matrix M11="0.965925826289068" M12="0.258819045102521" M21="-0.258819045102521" M22="0.965925826289068" />
　　
　　　　　　　　　　　　</MatrixTransform.Matrix>
　　　　　　　　　　</MatrixTransform>
　　　　　　　　</Rectangle.RenderTransform>
　　　　　　</Rectangle>
　　　　</Grid>
　　</StackPanel>
</UserControl>

　　2、UIElement.xaml

<UserControl x:Class="Silverlight20.Other.UIElement"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　<StackPanel HorizontalAlignment="Left">
　　
　　　　<Grid Margin="20">
　　　　　　<Rectangle Width="200" Height="100" Fill="Green" Stroke="Blue" StrokeThickness="3" />
　　　　　　<Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3">
　　
　　　　　　　　<!--
　　　　　　　　Clip - 容器剪辑区域(.Windows.Media.Geometry类型)
　　　　　　　　-->
　　　　　　　　<Rectangle.Clip>
　　　　　　　　　　<EllipseGeometry Center="200,100" RadiusX="100" RadiusY="50" />
　　　　　　　　</Rectangle.Clip>
　　　　　　</Rectangle>
　　　　</Grid>
　　
　　　　<Grid Margin="20">
　　
　　　　　　<!--
　　　　　　IsHitTestVisible - 命中测试是否可见如果设置为False则无法响应Click事件
　　　　　　-->
　　　　　　<Button x:Name="btnTest" Width="200" Content="关闭了HitTest按钮" Click="btnTest_Click" IsHitTestVisible="False" />
　　　　</Grid>
　　
　　　　<Grid Margin="20">
　　　　
　　　　　　<!--
　　　　　　Opacity - 不透明度0 - 1的间
　　　　　　-->
　　　　　　<Image Source="/Silverlight20;component/Images/Logo.jpg" Height="100" Opacity="0.3" />
　　　　</Grid>
　　
　　　　<Grid Margin="20">
　　　　　　<Image Source="/Silverlight20;component/Images/Logo.jpg" Height="100">
　　
　　　　　　　　<!--
　　　　　　　　OpacityMask - 不透明蒙版(遮罩)(.Windows.Media.Brush类型)
　　　　　　　　-->
　　　　　　　　<Image.OpacityMask>
　　　　　　　　　　<RadialGradientBrush Center="0.5,0.5">
　　　　　　　　　　　　<GradientStop Color="#FF000000" Off="0" />
　　　　　　　　　　　　<GradientStop Color="#44000000" Off="0.8" />
　　　　　　　　　　　　<GradientStop Color="#00000000" Off="1" />
　　　　　　　　　　</RadialGradientBrush>
　　　　　　　　</Image.OpacityMask>
　　　　　　</Image>
　　　　</Grid>
　　
　　　　<Grid Margin="20">
　　　　　　<StackPanel>
　　　　　　
　　　　　　　　<!--
　　　　　　　　UseLayoutRounding - 是否使用完整像素布局默认值为 true
　　　　　　　　　　举例:如果设置了Margin="1.6"(非完整像素)
　　　　　　　　　　那么UseLayoutRounding="true"时则容器外边距不相等；UseLayoutRounding="false"时则容器外边距相等
　　　　　　　　-->
　　　　　　　　<Grid Width="20" Height="20" Margin="5" UseLayoutRounding="True">
　　　　　　　　　　<Border BorderBrush="#FF884909" Background="#FFFBECA3" BorderThickness="1"></Border>
　　　　　　　　　　<Border BorderBrush="#FF884909" Background="#FFFBECA3" BorderThickness="1" Margin="1.6"></Border>
　　　　　　　　</Grid>
　　
　　　　　　　　<Grid Width="20" Height="20" Margin="5" UseLayoutRounding="False">
　　　　　　　　　　<Border BorderBrush="#FF884909" Background="#FFFBECA3" BorderThickness="1"></Border>
　　　　　　　　　　<Border BorderBrush="#FF884909" Background="#FFFBECA3" BorderThickness="1" Margin="1.6"></Border>
　　　　　　　　</Grid>
　　　　　　</StackPanel>
　　　　</Grid>
　　　　
　　</StackPanel>
</UserControl>



　　3、FrameworkElement.xaml

<UserControl x:Class="Silverlight20.Other.FrameworkElement"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　<StackPanel HorizontalAlignment="Left" >
　　
　　　　<!--
　　　　Cursor - 鼠标移动到 FrameworkElement 上面时鼠标指针样式
　　　　　　Arrow - 箭头
　　　　　　Hand - 手形
　　　　　　Wait - 沙漏
　　　　　　IBeam - “I”字形
　　　　　　Stylus - 点
　　　　　　Eraser - 橡皮
　　　　　　None - 无
　　　　Margin - 容器边缘和边缘的外空白距离(像素值:上下左右；左右,上下；左,上,右,下)
　　　　Tag - 保存些额外信息(.Object类型)
　　　　-->
　　　　<Rectangle Width="200" Height="100" Fill="Red" Cursor="IBeam" Margin="5" Tag="1234" />
　　
　　</StackPanel>
</UserControl>

　　OK

延伸阅读

• 2009-1-23-- silverlight:学Silverlight 2系列(8):使用样式封装Control控件观感
• 2009-1-23-- silverlight:学Silverlight 2系列(10):使用用户Control控件
• 2009-1-23-- silverlight:使用Silverlight 2 和 VS 2008创建 Hello World 程序
• 2009-1-23-- 微软silverlight:Silverlight 微软平台的再度膨胀
• 2009-1-23-- silverlight:Silverlight 2 手把手(的 4) 创建 Silverlight 2 Control控件
• 2009-1-23-- silverlight:Silverlight 2 (beta1)数据操作(3)——使用ADO.NET Data Service (Astoria)进行数据CRUD操作
• 2009-1-23-- silverlight应用:使用Silverlight构建插件式应用程序( 4)
• 2009-1-23-- silverlight:学Silverlight 2系列(26):基本图形
• 2009-1-23-- silverlight:在Silverlight中做单元测试
• 2009-1-23-- silverlight:学Silverlight 2系列(32):图形图像综合例子— 功夫的王 剧照播放