稳扎稳打Silverlight(10) - 2.0其它之Transform详解，以及UIElement和FrameworkElement的常用属性

[索引页]
[源码下载]

稳扎稳打Silverlight(10) - 2.0其它之Transform详解，以及UIElement和FrameworkElement的常用属性

作者： webabcd


介绍
Silverlight 2.0 其它：
    RenderTransform - 呈现位置的转换（System.Windows.Media.Transform类型）
        TranslateTransform - 平移转换
        RotateTransform - 旋转转换（顺时针）
        ScaleTransform - 缩放转换
        SkewTransform - 扭曲转换
        MatrixTransform - 仿射矩阵变换
        TransformGroup - 多个 Transform 组成的复合转换
    RenderTransformOrigin - 位置转换的中心点
    Clip - 容器的剪辑区域（System.Windows.Media.Geometry类型）
    IsHitTestVisible - 命中测试是否可见
    Opacity - 不透明度。0 - 1之间
    OpacityMask - 不透明蒙版（遮罩）（System.Windows.Media.Brush类型）
    UseLayoutRounding - 是否使用完整像素布局
    Cursor - 鼠标移动到 FrameworkElement 上面时，鼠标指针的样式
    Margin - 容器边缘与边缘之外的空白距离（像素值：上下左右；左右,上下；左,上,右,下）
    Tag - 保存一些额外的信息（System.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 - 呈现位置的转换（System.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 - 扭曲转换（典型应用：在 二维 对象中模拟 三维 深度） -->
                     <!--
                    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|             |OffsetX（默认值 0）  OffsetY（默认值 0）   1|

        X = x * M11 + y * M12 + OffsetX
        Y = x * M21 + y * M22 + OffsetY
         -->
         < 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  >

                             <!-- 仿射矩阵中的 平移转换 -->
                             <!--
                            OffsetX - 水平位移
                            OffsetY - 垂直位移
                             -->
                             < Matrix  OffsetX ="100"  OffsetY ="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 - 容器的剪辑区域（System.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 - 不透明蒙版（遮罩）（System.Windows.Media.Brush类型）
                 -->
                 < Image.OpacityMask >
                     < RadialGradientBrush  Center ="0.5,0.5" >
                         < GradientStop  Color ="#FF000000"  Offset ="0"   />
                         < GradientStop  Color ="#44000000"  Offset ="0.8"   />
                         < GradientStop  Color ="#00000000"  Offset ="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 - 保存一些额外的信息（System.Object类型）
         -->
         < Rectangle  Width ="200"  Height ="100"  Fill ="Red"  Cursor ="IBeam"  Margin ="5"  Tag ="1234"   />

     </ StackPanel >
</ UserControl >

OK
[源码下载]