Opacity属性
Opacity属性能够让您控制一个
UIElement对象的alpha值或者透明的程度。您可以为
Opacity设置一个0到1之间的数,该值越接近0.0,该对象就越接近完全透明,当
Opacity属性为0时,对象就完全不可见了。默认的
Opactiy属性的值为1.0,意味着对象完全不透明。下面的例子创建了两个不同透明程度的形状。
<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Opacity="1.0" Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
<Rectangle Opacity="0.6" Height="100" Width="100" Canvas.Left="70" Canvas.Top="70"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>
OpacityMask属性
OpacityMask属性能够让您控制一个
UIElement不同部分的alpha值。例如,您可以使用
OpacityMask使一个元素从右往左淡入或淡出。
OpacityMask属性具有一个
Brush对象,这个画刷将元素和画刷的每一个像素的alpha通道进行映射,以确定元素上对应像素的透明结果。如果画刷的某一部分是透明的,那么元素的那一部分会变得透明。
您可以为
OpacityMask使用不同类型的画刷,不过
LinearGradientBrush,
RadialGradientBrush和
ImageBrush最为常用。
下面的示例将一个应用了
LinearGradientBrush的opacity mask作用在一个
Rectangle对象上。
<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
<Rectangle.OpacityMask>
<LinearGradientBrush>
<GradientStop Offset="0.25" Color="#00000000"/>
<GradientStop Offset="1" Color="#FF000000"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Canvas>
Clip属性
Clip属性能够使您有选择则绘制元素的一部分。使用
Clip属性时,您需要提供一个
Geometry对象用于描述绘制区域,任何超过绘制区域的部分都会被隐藏,或者说是“被修剪(clipped)”了。
下面的示例使用了一个
RectangleGeometry作为
Ellipse元素的
Clip属性。其结果是:只有
Ellipse在
RectangleGeometry定义的区域内的部分才被显示出来,超出
RectangleGeometry的部分则被切除了。
<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
<Ellipse.Clip>
<RectangleGeometry Rect="0, 0, 100, 100"/>
</Ellipse.Clip>
</Ellipse>
</Canvas>
RenderTransform属性
RenderTransform属性让您可以使用
Transform对象对一个元素进行旋转,倾斜,缩放或移动。下面的列表描述了您可以使用在
RenderTransform属性上的不同的
Transform对象
- RotateTransform:将一个对象旋转特定的角度。
- SkewTransform:将一个对象相对于X轴或Y轴进行倾斜
- ScaleTransform:将一个对象在水平或垂直方向进行放大或缩小。
- TranslateTransform:将一个对象在水平或垂直方向进行移动。
还有另外一种变换,
TransformGroup,您可以使用它将多种变换应用在单个对象上。
下面的示例将
Transform对象应用在
Rectangle元素上,展示了每个
Transform对象的不同效果。
<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10"
Fill="Black">
<Rectangle.RenderTransform>
<RotateTransform Angle="45"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Height="100" Width="100" Canvas.Left="130" Canvas.Top="10"
Fill="red">
<Rectangle.RenderTransform>
<SkewTransform AngleX="30"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Height="100" Width="100" Canvas.Left="10" Canvas.Top="190"
Fill="blue">
<Rectangle.RenderTransform>
<ScaleTransform ScaleX="1.3" ScaleY=".5"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130"
Fill="Green">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="45"/>
<ScaleTransform ScaleX=".5" ScaleY="1.2"/>
<SkewTransform AngleX="30"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
下面该做什么呢?
在下一部分“
图像”中,您会了解
Image元素的使用方式,以及您应该如何显示位图。
本文转自 jeffz 51CTO博客,原文链接:http://blog.51cto.com/jeffz/60397,如需转载请自行联系原作者