Silverlight_TransForm使用

最新推荐文章于 2022-10-19 20:17:27 发布
最新推荐文章于 2022-10-19 20:17:27 发布
阅读量1.2k 收藏
点赞数
分类专栏： Silverlight 文章标签： silverlight image matrix object 360 c

1.TransForm_按原点旋转45度

    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas Background="#CDFCAE">
            <Image Source="images/1.jpg" Canvas.Left="160" Canvas.Top="20" Opacity="0.5" Width="200" Height="200"
                   Stretch="Fill">
            </Image>
            <Image Source="images/1.jpg" Canvas.Left="160" Canvas.Top="20" Width="200" Height="200" Stretch="Fill">
                <Image.RenderTransform>
                    <RotateTransform Angle="45"></RotateTransform>
                </Image.RenderTransform>
            </Image>
        </Canvas>
    </Grid>
*******************************************************************************************************************
2.TransForm_按中心点旋转45度

使用CenterX和CenterY来控制，注意CenterX和CenterY的计算是按宽度的一半和高度的一半来计算的

    <Grid x:Name="LayoutRoot">
        <Canvas Background="#CDFCAE">
            <Image Source="images/1.jpg" Canvas.Left="160" Canvas.Top="80" Opacity="0.5"
                   Width="200" Height="200" Stretch="Fill">
            </Image>
            <Image Source="images/1.jpg" Canvas.Left="160" Canvas.Top="80"
                   Width="200" Height="200" Stretch="Fill">
                <Image.RenderTransform>
                    <RotateTransform Angle="45" CenterX="100" CenterY="100"></RotateTransform>
                </Image.RenderTransform>
            </Image>
        </Canvas>
    </Grid>

*******************************************************************************************************************
3.缩放变换ScaleTransform允许我们对元素进行缩放，通过属性ScaleX和ScaleY来分别指定在X轴和Y轴上的缩放比例，同样也可以使用属性CenterX和CenterY来指定缩放中心，注意CenterX和CenterY的计算是按宽度的一半和高度的一半来计算的

    <Grid x:Name="LayoutRoot">
        <Canvas Background="#CDFCAE">
  <!--按原点缩放一半-->
            <Image Source="images/1.jpg" Canvas.Left="40" Canvas.Top="80" Opacity="0.5" Width="100" Height="100" Stretch="Fill">
            </Image>
            <Image Source="images/1.jpg" Canvas.Left="40" Canvas.Top="80" Width="100" Height="100" Stretch="Fill">
                <Image.RenderTransform>
                    <ScaleTransform ScaleX="0.5" ScaleY="0.5"></ScaleTransform>
                </Image.RenderTransform>
            </Image>
 <!--按中心点点缩放一半-->
            <Image Source="images/1.jpg" Canvas.Left="320" Canvas.Top="80" Opacity="0.5" Width="100" Height="100" Stretch="Fill">
            </Image>
            <Image Source="images/1.jpg" Canvas.Left="320" Canvas.Top="80" Width="100" Height="100" Stretch="Fill">
                <Image.RenderTransform>
                    <ScaleTransform ScaleX="0.5" ScaleY="0.5"
                            CenterX="50" CenterY="50"></ScaleTransform>
                </Image.RenderTransform>
            </Image>
        </Canvas>
    </Grid>

*******************************************************************************************************************
4.倾斜变换SkewTransform允许我们对元素围绕一点进行一定角度的倾斜，可以通过属性AngleX和AngleY分别设置在X轴和Y轴上倾斜角度，以及CenterX和CenterY来指定一个变换中心点

    <Grid x:Name="LayoutRoot">
        <Canvas Background="#CDFCAE">
            <Image Source="images/1.jpg" Canvas.Left="80" Canvas.Top="20" Opacity="0.5" Width="200" Height="200" Stretch="Fill">
            </Image>
            <Image Source="images/1.jpg" Canvas.Left="80" Canvas.Top="20" Width="200" Height="200" Stretch="Fill">
                <Image.RenderTransform>
                    <SkewTransform AngleX="30" AngleY="30"></SkewTransform>
                </Image.RenderTransform>
            </Image>
        </Canvas>
    </Grid>

*******************************************************************************************************************
5.移动变换TranslateTransform允许我们对元素在X轴和Y轴上做一定位置的移动，通过属性X和Y两个属性来指定，如下面的例子，对图片和文字做一些移动变换，使其显示出阴影效果


    <Grid x:Name="LayoutRoot">
        <Canvas Background="#CDFCAE">
            <Image Source="images/1.jpg" Canvas.Left="80" Canvas.Top="80" Opacity="0.5" Width="100" Height="100" Stretch="Fill">
            </Image>
            <Image Source="images/1.jpg" Canvas.Left="80" Canvas.Top="80"
                   Width="100" Height="100" Stretch="Fill">
                <Image.RenderTransform>
                    <TranslateTransform X="-8" Y="-8"></TranslateTransform>
                </Image.RenderTransform>
            </Image>

            <TextBlock Canvas.Top="80" Canvas.Left="360" FontWeight="Bold"
               Text="博客园" FontSize="60" Foreground="#C1C1C1">
        <TextBlock.RenderTransform>
            <TranslateTransform X="5" Y="5"></TranslateTransform>
        </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Canvas.Top="80" Canvas.Left="360" FontWeight="Bold"
               Text="博客园" FontSize="60" Foreground="#FF0000"></TextBlock>
        </Canvas>
    </Grid>

*******************************************************************************************************************
6.变换组TransformGroup其实就把几种变换组合在一起，使用起来比较简单，最终实现的效果如何就看各人的审美观了:)，

   <Grid x:Name="LayoutRoot">
        <Canvas Background="#CDFCAE">
            <Image Source="images/1.jpg" Canvas.Left="120" Canvas.Top="50" Opacity="0.3" Width="200" Height="150" Stretch="Fill">
            </Image>
            <Image Source="images/1.jpg" Canvas.Left="120" Canvas.Top="50" Opacity="0.5" Width="200" Height="150" Stretch="Fill">
                <Image.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="5"></RotateTransform>
                        <SkewTransform AngleX="5" AngleY="5"></SkewTransform>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
            <Image Source="images/1.jpg" Canvas.Left="120" Canvas.Top="50" Width="200" Height="150" Stretch="Fill">
                <Image.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="10"></RotateTransform>
                        <SkewTransform AngleX="10" AngleY="10"></SkewTransform>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
        </Canvas>
    </Grid>

 

*******************************************************************************************************************
7.矩阵变换（MatrixTransform ）
矩阵变换MatrixTransform是所有变换中功能最强大最灵活也是最复杂的一种变换，如果前面讲解的几种基本变化不能满足我们在实际开发中的需求，可以使用矩阵变换进行自定义，它允许我们直接对变换矩阵进行操作。
在Silverlight中，变换是提供一个3*3的矩阵，我们通过修改矩阵中成员的值来实现变换，矩阵的定义如下所示：
 
如修改OffsetX，元素将会在X轴上进行移动；修改OffsetY，元素将在Y轴上移动；修改M22为2，元素的高度将会拉伸2倍，通过该矩阵，我们能实现前面提到的几种基本变换的所有功能。更详细的解释大家可以参考SDK。如下面的例子，我们使用矩阵变换，仍然能实现前面示例中的变换效果：


    <Grid x:Name="LayoutRoot">
        <Canvas Background="#CDFCAE">
            <Image Source="images/1.jpg" Canvas.Left="120" Canvas.Top="50" Opacity="0.3" Width="200" Height="150" Stretch="Fill">
            </Image>
            <Image Source="images/1.jpg" Canvas.Left="120" Canvas.Top="50" Opacity="0.5" Width="200" Height="150" Stretch="Fill">
                <Image.RenderTransform>
                    <MatrixTransform>
                        <MatrixTransform.Matrix>
                            <Matrix OffsetX="0" OffsetY="0" M12="0.2"></Matrix>
                        </MatrixTransform.Matrix>
                    </MatrixTransform>
                </Image.RenderTransform>
            </Image>

            <Image Source="images/1.jpg" Canvas.Left="120" Canvas.Top="50" Width="200" Height="150" Stretch="Fill">
                <Image.RenderTransform>
                    <MatrixTransform>
                        <MatrixTransform.Matrix>
                            <Matrix OffsetX="0" OffsetY="0" M12="0.4"></Matrix>
                        </MatrixTransform.Matrix>
                    </MatrixTransform>
                </Image.RenderTransform>
            </Image>
        </Canvas>
    </Grid>


*******************************************************************************************************************
8.Transform与Silverlight中的Storyboard结合，可以很容易的实现出动画变换的效果，如下面的例子，当鼠标放在上去的时候，图片开始旋转；鼠标离开时停止旋转
    <Grid x:Name="LayoutRoot">
        <Canvas Background="#CDFCAE">
            <Canvas.Resources>
                <Storyboard x:Name="myStoryboard">
                    <DoubleAnimation
          Storyboard.TargetName="myTransform"
          Storyboard.TargetProperty="Angle"
          From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" />
                </Storyboard>
            </Canvas.Resources>
            <Image x:Name="imgTarget" Source="images/1.jpg" Canvas.Left="180" Canvas.Top="80" Width="300"
                   Height="200" Stretch="Fill"
           MouseEnter="imgTarget_MouseEnter" MouseLeave="imgTarget_MouseLeave">
                <Image.RenderTransform>
                    <RotateTransform x:Name="myTransform" Angle="15" CenterX="150" CenterY="100" />
                </Image.RenderTransform>
            </Image>
        </Canvas>
    </Grid>


        private void imgTarget_MouseEnter(object sender, MouseEventArgs e)
        {
            myStoryboard.Begin();
        }
        private void imgTarget_MouseLeave(object sender, MouseEventArgs e)
        {
            myStoryboard.Stop();
        }

17、Silverlight 中的变换、动画与自定义控件开发
9q8w7e6r5的博客
08-04 5
本文详细介绍了 Silverlight 中的动画与变换功能，以及如何通过 Expression Blend 和编程方式实现丰富的视觉效果。同时，文章还探讨了 Silverlight 自定义控件的开发方法，包括使用用户控件和从头构建自定义控件，并介绍了关键概念如 Parts 和 States 模型以及依赖属性。通过具体示例展示了如何创建一个具有交互效果的自定义按钮控件，并总结了开发自定义控件的最佳实践和注意事项。
6、Silverlight开发：XAML与用户界面创建
最新发布
desk3的博客
07-09 3
本文详细介绍了Silverlight开发中XAML与用户界面创建的相关知识。内容涵盖Silverlight应用的启动设置、事件处理机制、用户界面控件的类层次结构，以及如何通过布局控件对屏幕上的对象进行定位。重点包括应用启动时RootVisual属性的设置、输入事件与应用事件的处理机制、路由事件的冒泡过程、DependencyObject、UIElement和FrameworkElement类的功能与特性，以及Canvas、Grid、StackPanel、DockPanel、WrapPanel等布局控件的使用
Silverlight获取控件绝对位置
liancs的专栏
04-18 2013
GeneralTransform generalTransform =ctlName.TransformToVisual(null); Point point = generalTransform.Transform(new Point());  说明:ctlName换成控件名即可。
Transform变换
hp0524chl的博客
10-19 613
而且它还可以使用方便的RenderTransformOrigin属性值，从而可以为特定的变换（如旋转）使用相对坐标。包括属性ScaleX、ScaleY、CenterX、CenterY，其中ScaleX、ScaleY属性表示对象在。包含X、Y 两种属性，以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。X、Y轴进行缩放的倍数，使用CenterX 和 CenterY属性指定一个中心点。变形元素包括平移变形、旋转变形、缩放变形、扭曲变形、矩阵变形和组合变形元素，
稳扎稳打 Silverlight 2.0 系列文章索引
zhengxiuchen86的博客
08-09 266
[源码下载] 稳扎稳打 Silverlight 2.0 系列文章索引 作者： webabcd 在线DEMO http://www.cnblogs.com/webabcd/archi
Silverlight 中MatrixTransform和其他Transform的数值转换
dizhifu2954的博客
03-03 153
对各种transform的讲解已经很多了，但是有时MatrixTransform和其他transform变换效果之间需要转换时，变换量的转换又如何呢？下面的类就完成了Matrix和其他transform的转换方法。 public static ScaleTransform GetScaleByMatrix(Matrix matrix) ...
使用Blend开发Silverlight VSM
weixin_34293246的博客
11-08 98
Visual State Manager (VSM-视觉状态管理器) 之支持 Silverlight 和 WPF中的控件模板支持对控件的“look（外观）”，以及控件的“feel（感觉）”的定制。“feel”之谓，我指的是改变它交互的响应性。例如，在按下时，得到焦点时，失去焦点时，处于按下的状态时，处于不可用（disabled）状态时，内中有东西被选...
c#爬取Silverlight网页 2
李瑞远-时空数据
04-14 3621
此前的一篇文章：C#爬取Silverlight网页，描述了如何爬取加密的Silverlight网页，并以北京空气质量官网的破解进行了说明。 按此办法，我想继续破解由中山大学先进技术研究院开发的一系列的Silverlight网站，譬如福建省空气质量实时发布系统，却一无所获。关键在于找到密钥和盐值非常难。有时候reflector并不能工作。 其实我犯了一个错误，被此前的破解思路给羁绊了。下
一步一步学Silverlight 2系列（30）：使用Transform实现更炫的效果（下）_转载
diehuang2868的博客
04-20 103
概述 Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基...
一步一步学Silverlight_2系列
08-17
Silverlight 2系列（30）：使用Transform实现更炫的效果（下） Silverlight 2系列（29）：使用Transform实现更炫的效果（上） Silverlight 2系列（28）：图片处理 Silverlight 2系列（27）：使用Brush进行填充 ...
ComponentOne Studio for Silverlight 2013 v1 2/3
03-28
Easily transform GIS data into business intelligence with Maps powered by Esri®. With Studio for Silverlight you get free access to to the Esri controls, online map tiles and the ArcGIS API for ...
ComponentOne 2012 V2 Studio for Silverlight 2/3
08-11
Easily transform GIS data into business intelligence with Maps powered by Esri®. With Studio for Silverlight you get free access to to the Esri controls, online map tiles and the ArcGIS API for ...
Silverlight
02-05
此外，Silverlight还支持Transform变换，如ScaleTransform、RotateTransform和TranslateTransform，用于创建动态视觉效果，如旋转、缩放和移动。图形图像处理也是其强项，可以实现如水中倒影等复杂效果。 通过样式...
Silverlight入门指南
06-29
**Silverlight入门指南** Silverlight是由微软开发的一种富互联网应用程序（RIA）平台，主要用于...尽管现在它的使用已经逐渐减少，但在学习Web开发的过程中，理解Silverlight的基本概念和技术仍能带来宝贵的经验。
K8s 很难么？带你从头到尾捋一遍，不信你学不会
民工哥的博客
02-23 9842
点击关注公众号，回复“1024”获取2TB学习资源！为什么要学习 Kubernetes?虽然 Docker 已经很强大了，但是在实际使用上还是有诸多不便，比如集群管理、资源调度、文件管理等...
10天智能锁项目实战第1天（了解单片机STM32F401RET6和C语言基础）
北豼不太皮的博客
02-21 4024
10天智能锁项目实战第1天（了解单片机STM32F401RET6和C语言基础）一、学习目标二、了解单片机STM32F401RET6三、C语言基础 一、学习目标 二、了解单片机STM32F401RET6 4、STM32F401RE特征 三、C语言基础 1.数据类型 常用2的次方： 2^7 = 128 2^8 = 256 2^15 = 32768 2^16= 65536 51单片机常见的数据类型： char: 占内存1字节 取值范围：-128~127 -2^7 ~ 2
Android开发（1） | Fragment 的应用——新闻应用
Jormungand_V的博客
02-21 7414
文章目录 news_item.xml： <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/news_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:lines="1" android:ellipsize="
系统学习 TypeScript（四）——变量声明的初步学习
编程三昧
02-25 1954
认识了 TypeScript 中的基础类型，接下来当然是变量声明的相关学习了，我在这里记录一下我学习过程中的一些总结。
清除浮动的五种方法
weixin_52212950的博客
02-22 3017
为什么要清除浮动？因为往往浮动后的子元素因为脱离了标准流，不能自动撑起父元素的高度，所以会对后续布局产生影响，对此清除浮动不如理解为清除浮动产生的影响更为合理。 例如：我们设置了两个盒子如图所示，粉色为父盒子，只有宽度没有高度，蓝色盒子有宽有高，粉色盒子的高由蓝盒子的高度撑开。 但是给蓝色的子盒子设置了左浮动后，脱离了标准流，无法再撑开粉盒子，可以看到粉盒子高度变成了0； 清除浮动有五种方法： 直接设置父元素的高度 额外标签法 单伪元素法 双伪元素法 ove.
Silverlight实现旋转门效果教程
3. **变换和矩阵**：在实现旋转门效果时，需要深入理解XAML中的变换（Transform）功能，尤其是旋转变换（RotateTransform）和矩阵变换（MatrixTransform）。通过调整变换的参数，可以控制图形和动画的旋转方式和速度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值