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

2016-08-20 11:00:31来源:http://webabcd.blog.51cto.com/1787395/343016作者:webabcd人点击


[索引页][源码下载]
稳扎稳打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类型)在线DEMOhttp://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| |00 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[源码下载]

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台