微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：Silverlight作者：编程之家AI导航网
[索引页]
[源码下载]


稳扎稳打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.voidcn.com/article/p-ounmxjds-tq.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>
 
 

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

c# – 如何在Silverlight 4中绑定ContextMenu的IsEnabled属性？
如何在Silverlight4(XAML)中绑定IsEnabled属性？我试过简单的IsEnabled=“{BindingABC}”,但这不起作用–MenuItem总是启用.提前感谢您的线索！干杯编辑：有趣的是,当设置Mode=TwoWay时,绑定似乎有效.但是,在菜单项上移动鼠标后,将更新上下文菜单的外观.这是异步工作吗？右键
c# – 使用Silverlight / windows手机式控件设置我的.Net桌面应用程序GUI
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,因为我确信即使是一个c#人也可以使用类似的.net实现来回答这个问题).我申请的简短说明：我的桌面应用程序将仅在win平台上运行,使用vb.net,它是一个简单的网吧管理软件,在服务器上运行服务器gui,在工作站上运行客户端gui,
c# – Silverlight：将服务调用和文件处理移动到后台线程
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如果它在UIThread上,如何将文件请求和ProcessFile()移动到单独的线程？varxClient=newServiceReference1.Service1SoapClient();xClient.Retrieve_File_Completed+=newEventHandler<ServiceReference1.Retrieve_Fi
c# – 如何从ASP.NET / Silverlight开发人员成为sharepoint开发人员？
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不在办公室使用sharepoint.所以不知道如何开始.这些是我的新手问题>学习共享点值得努力吗？>学习sharepoint的资源在哪里？>我是否应该考虑开发哪些参考项目？感谢您的意见.解决方法:SharePoint以如此积极的方式改变了我的职业
c# – Windows Phone 8 – 将列表保存到IsolatedStorage
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明：Thecollectiondatacontracttype‘System.Collections.Generic.Listcannotbedeserializedbecauseitdoesnothaveapublicparameterlessconstructor.Addingapublicparameterlessconstructorwillf
c# – 在XAML中使用绑定设置样式
我需要根据Silverlight中的某些配置值设置给定控件的Style.我想有可能从两种可用的样式(静态资源)中选择一个控件样式.我试图做一些像：<TextBoxStyle="{BindingABC}"/>哪里publicstringABC{get{return"{StaticResourceMyStyle}";}}不幸的是,这不起作用.你有
Android设备上的Silverlight / Moonlight
我刚买了第一台Android设备,我喜欢它…我也很喜欢你可以创建自己的应用程序并随意分发它们.我已经阅读了一些关于Monodroid的内容,而且显然微软希望将Silverlight放在这些设备上,尽管没有太多关于它们的信息……但是Moonlight呢？如果Monodroid就像Mono……为什么我们需要它呢？相反
c# – 从silverlight应用程序访问SQL Server数据库
我们的ASP.NET网站允许用户执行各种查询,并根据从数据库查询的结果显示网络图(如UML图).目前,我们正在生成一个位图并显示它.但由于我们需要支持允许用户以交互方式显示/隐藏某些块的功能,因此我们计划使用Silverlight来渲染图形.我们还计划在未来添加更多互动.我有两个问题：>ASP
c# – 自定义Silverlight启动画面导致白屏死机
我正在开发一个Silverlight4应用程序,我已经创建了一个自定义的启动画面.乍一看,自定义启动画面运行良好–非常好.几天后,我开始注意到闪屏不再显示,屏幕仍然是空白.这似乎只发生在我打开多个指向同一个应用程序的IE选项卡/窗口时.前几个将加载正常,而以下选项卡/窗口将保持“白
c# – 使用带偏移的RotateTransform问题旋转图像
这是我的XAML：<ImageVerticalAlignment="Center"HorizontalAlignment="Center"Source="{BindingInput,Converter={StaticResourceByteArrayToBitmapConverter}}"><Image.Rend
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native