备案控制台
开发者社区 云原生 文章 正文

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

2017-11-14 969
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
[索引页]
[源码下载]


稳扎稳打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://webabcd.blog.51cto.com/1787395/342779


示例
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>
 
 

     本文转自webabcd 51CTO博客，原文链接： http://blog.51cto.com/webabcd/343016 ，如需转载请自行联系原作者



文章标签：
容器
关键词：
silverlight属性
技术小胖子
目录
相关文章
科技小能手
Silverlight 5 beta新特性探索系列:7.结合上层元素属性绑定和Style Setter上的绑定
科技小能手
1114 0
橘子红了呐
|
存储 Web App开发 开发框架
Silverlight实用窍门系列：34.Silverlight中不得不了解使用的依赖属性【附带源码实例】
橘子红了呐
1133 0
橘子红了呐
Silverlight 5 RC新特性探索系列:15.Silverlight 5 RC 对OpenType字体属性的支持
橘子红了呐
1051 0
技术小甜
|
.NET 开发框架 C#
明晰Silverlight中的依赖属性
技术小甜
1063 0
科技小能手
|
Web App开发 .NET 开发框架
34.Silverlight中不得不了解使用的依赖属性
科技小能手
878 0
科技小能手
|
Windows Web App开发
11.Silverlight中为自定义控件添加鼠标双击属性，Silverlight模拟鼠标双击
科技小能手
1136 0
技术小牛人
|
设计模式 前端开发 容器
Silverlight实例教程 - Validation数据验证基础属性和事件
技术小牛人
1088 0
橘子红了呐
|
Web App开发 Windows
Silverlight实用窍门系列：11.Silverlight中为自定义控件添加鼠标双击属性，Silverlight模拟鼠标双击【附带源码实例】
橘子红了呐
1165 0
杰克.陈
|
C#
WPF/Silverlight深度解决方案：(一)解锁被Storyboard束缚的关联属性
原文 WPF/Silverlight深度解决方案：(一)解锁被Storyboard束缚的关联属性 如果您在使用WPF/Silverlight进行相关动画开发中使用了Storyboard，并对关联属性进行了动画修改，那么您是否有注意到这些关联属性常常无法再通过直接赋值的形式去修改，尽管它的值已经被更改，但却始终无法在界面上得以体现。
杰克.陈
1003 0
杰克.陈
|
Windows
Silverlight：Dependency Property(依赖属性)学习笔记
1.定义依赖属性：           #region Text        public static readonly DependencyProperty TextProperty = DependencyProperty.
杰克.陈
864 0

热门文章

最新文章

  • 1
    艾伟：Silverlight 3 Beta 新特性解析（2）-Graphics篇
  • 2
    Silverlight播放器（MediaElement）全屏问题
  • 3
    稳扎稳打Silverlight(16) - 2.0数据之独立存储(Isolated Storage)
  • 4
    一起谈.NET技术，Silverlight杂记-本地程序间的互通
  • 5
    介绍三个Silverlight 在线编辑器控件
  • 6
    Silverlight实用窍门系列：57.Silverlight中的Binding使用（二）-数据验证
  • 7
    Silverlight第三方控件专题
  • 8
    25.Silverlight多线程技术Timer的应用，模拟心电图、模拟CPU、内存状态图
  • 9
    Silverlight实用窍门系列：53.Silverlight中的5种基本变换RotateTransform、ScaleTransform……
  • 10
    Silverlight C# 游戏开发：草动系统（二）随风而动
  • 1
    Silverlight & Blend动画设计系列二：旋转动画（RotateTransform）
    982
  • 2
    silverlight，WPF动画终极攻略之白云飘，坐车去旅游篇（Blend 4开发）
    1190
  • 3
    silverlight，WPF动画终极攻略之迟来的第三章 动画整合篇（Blend 4开发）
    1079
  • 4
    Silverlight & Blend动画设计系列六：动画技巧（Animation Techniques）之对象与路径转化、波感特效
    1013
  • 5
    Silverlight & Blend动画设计系列五：故事板(StoryBoards)和动画(Animations)
    919
  • 6
    Silverlight & Blend动画设计系列四：倾斜动画（SkewTransform）
    807
  • 7
    Silverlight & Blend动画设计系列三：缩放动画（ScaleTransform）
    903
  • 8
    在Silverlight程序中使用Thread一个很容易被忽略的问题
    707
  • 9
    Silverlight Map 技术点总结
    933
  • 10
    silverlight起步（二）——第一个silverligth
    854

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）