silverlight   发布时间:2022-05-04  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了稳扎稳打Silverlight(10) - 2.0其它之Transform详解,以及UIElement和FrameworkElement的常用属性大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

[索引页] [源码下载] 稳扎稳打Silverlight(10) - 2.0其它之Transform详解,以及UIElement和FrameworkElement的常用属性 作者: webabcd 介绍 Silverlight 2.0 其它:     RenderTransform - 呈现位置的转换(System.Windows.Media.Transform类型)         Transl
[索引页]
[源码下载]


稳扎稳打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://scheR_989_11845@as.microsoft.com/winfx/2006/xaml/presentation"    
        xmlns:x="http://scheR_989_11845@as.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 >

                                                        <!--仿射矩阵中的 缩放转换-->
                                                        <!--
                                                        R_989_11845@11 - 水平放大倍数
                                                        R_989_11845@22 - 垂直放大倍数
                                                        -->
                                                        <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 >

                                                        <!--仿射矩阵中的 扭曲转换-->
                                                        <!--
                                                        R_989_11845@21 - X 轴扭曲角度,Y 轴绕原点旋转(逆时针)。tanθ(本例中θ等于30度)
                                                        R_989_11845@12 - 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://scheR_989_11845@as.microsoft.com/winfx/2006/xaml/presentation"    
        xmlns:x="http://scheR_989_11845@as.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://scheR_989_11845@as.microsoft.com/winfx/2006/xaml/presentation"    
        xmlns:x="http://scheR_989_11845@as.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>
 
 
@H_301_389@

大佬总结

以上是大佬教程为你收集整理的稳扎稳打Silverlight(10) - 2.0其它之Transform详解,以及UIElement和FrameworkElement的常用属性全部内容,希望文章能够帮你解决稳扎稳打Silverlight(10) - 2.0其它之Transform详解,以及UIElement和FrameworkElement的常用属性所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。