通用图像属性

Opacity 属性

Opacity 属性允许你控制 UIElement 的 alpha 和透明度值。 你可以为 Opacity 属性设置 0-1 的值。 越靠近零的值，对象变得越透明，对象完全不可见。 默认 Opacity 值是 1.0，即完全不透明。 下面的示例创建了两个使用不同 opacity 值的形状。

[隐藏 XAML]

<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 通道，这用于决定元素适当像素的 opacity 值。 如果让遮罩笔刷的一部分透明，该部分遮罩的元素就变得透明。

你可以使用像 OpacityMask 任意类型的笔刷， 但 LinearGradientBrush、RadialGradientBrush 和 ImageBrush 最为常用。

下面的示例使用了一个 LinearGradientBrush opacity 遮罩了一个 Rectangle 对象。

[隐藏 XAML]

<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 对象用以描述要画的区域。 落在 geometry 外面的任何东西都被隐藏起来，或者“剪切了”。

下面的示例为 Ellipse 元素使用了一个 RectangleGeometry 作为 Clip。 结果，只有位于 RectangleGeometry 区域的 Ellipse 部分才显示出来； RectangleGeometry 之外的部分被剪切掉。

[隐藏 XAML]

<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 元素进行转换。

[隐藏 XAML]

<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 元素来显示位图。