稳扎稳打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,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
[源码下载]