WPF/E CTP Quick Start - 第五部分：公有图形属性（翻译）

一些属性能够被应用在所有的WPF/E的UIElement对象上：Canvas，shapes和TextBlock。这篇文档描述了这些对象所具有的公有图形属性。

这篇文档包含了以下部分：

• Opacity属性
• OpacityMask属性
• Clip属性
• RenderTransform属性
• 下面该做什么呢？

 

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元素的使用方式，以及您应该如何显示位图。