Hello World
Spiga

WPF/E CTP Quick Start - 第五部分:公有图形属性(翻译)

2006-12-10 14:50 by 老赵, 3845 visits

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

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

 

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使用不同类型的画刷,不过LinearGradientBrushRadialGradientBrushImageBrush最为常用。

下面的示例将一个应用了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属性。其结果是:只有EllipseRectangleGeometry定义的区域内的部分才被显示出来,超出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元素的使用方式,以及您应该如何显示位图。

Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

23 条回复

  1. Dflying Chen
    *.*.*.*
    链接

    Dflying Chen 2006-12-10 15:05:00

    辛苦了!
    是“公有”还是“共有”呢?
    从你的第一句“一些属性能够被应用在所有的WPF/E的UIElement对象上”来看,应该是“共有”吧,“共同拥有XXX东西”,“公有”是“公开我有XXX东西”的意思。

  2. 老赵
    admin
    链接

    老赵 2006-12-10 15:17:00

    @Dflying Chen
    我在这两个词之中权衡了一会儿,我想“共有”的意思表示“共同拥有”,而“公有”的应该也不是“公开我有XXX的东西”的意思吧,我是想表示这些“属性”是“公共”的意思……

  3. sunlife
    *.*.*.*
    链接

    sunlife 2006-12-10 15:33:00

    HI,你写的很好,我很喜欢你的文章,很有条理,我想问一下,xmal文件中的代码,也就是你上面写的那些声明式代码都是自己手写的吗?有没有专门的工具来开发,就是说有提示功能.这样我们写起来方便,也不用去记这些属性,有吗?

  4. 老赵
    admin
    链接

    老赵 2006-12-10 15:38:00

    @sunlife
    在VS里只要设对了Namespace就会有提示,因为安装SDK时Schema已经被复制到特定文件夹下了。:)

  5. Dflying Chen
    *.*.*.*
    链接

    Dflying Chen 2006-12-10 15:39:00

    @Jeffrey Zhao
    原文是public还是shared还是common呢?
    你说“我是想表示这些“属性”是“公共”的意思”,这个“公共”是公开给外部使用者的么?如果是,那么“公有”没什么问题。如果这个“公共”是“所有组件都有这些属性”的意思,我觉得还是“共有”比较好一些。

  6. sunlife[匿名]
    *.*.*.*
    链接

    sunlife[匿名] 2006-12-10 16:30:00

    我不太明白,请问是在哪边设Namespace,是在xmal文件中?能举个例子吗?
    谢谢!

  7. 老赵
    admin
    链接

    老赵 2006-12-10 16:47:00

    @Dflying Chen
    原文是common。

  8. 老赵
    admin
    链接

    老赵 2006-12-10 16:48:00

    @sunlife[匿名]
    您试试看,创建一个XAML文件,然后输入:
    <Canvas
      xmlns="http://schemas.microsoft.com/client/2007"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    </Canvas>
    现在有代码提示了吗?

  9. Sheva
    *.*.*.*
    链接

    Sheva 2006-12-10 17:01:00

    我个人认为OpacityMask应该翻译成:通过用OpacityMask属性指定的画刷的alpha通道值来遮掩此元素的alpha通道值。因为OpacityMask其实就是用两个alpha通道值来进行&运算。

    Sheva

  10. sunlife[匿名]
    *.*.*.*
    链接

    sunlife[匿名] 2006-12-10 17:05:00

    我试了一下,不会提示,会不会和操作系统有关,我下载的自带的那些例子,我在里面修改,也不会有提示?这有可能是什么问题,还是我安装SDK有问题?

  11. sunlife[匿名]
    *.*.*.*
    链接

    sunlife[匿名] 2006-12-10 17:11:00

    好的,我又看了一下,实际上我的sdk没有安装上,在安装过程中提示:your system has not been modified ,to install this program at later time,请问在这安装wpfesdk.msi之前,还要安装其它的吗?

  12. wb[未注册用户]
    *.*.*.*
    链接

    wb[未注册用户] 2006-12-10 17:59:00

    好文,收藏!

  13. 老赵
    admin
    链接

    老赵 2006-12-10 19:05:00

    @Sheva
    这是Mask一贯的工作原理,不过似乎原文没有很“专业”地去描述它,我再推敲一下。:)

  14. 老赵
    admin
    链接

    老赵 2006-12-10 19:06:00

    @sunlife[匿名]
    其实安装完SDK就有了,是两个schema文件在起作用,我帮您找一下这两个文件。:)

  15. 老赵
    admin
    链接

    老赵 2006-12-10 19:07:00

    @wb
    多些支持。:)

  16. 老赵
    admin
    链接

    老赵 2006-12-10 19:07:00

    @sunlife[匿名]
    我最近刚重装了系统,所以应该不需要特殊的东西阿……

  17. 老赵
    admin
    链接

    老赵 2006-12-10 19:28:00

    @sunlife[匿名]
    您把“C:\Program Files\Microsoft SDKs\WPFE\Help\XSD”里的wpfe.xsd文件复制到“C:\Program Files\Microsoft Visual Studio 8\Xml\Schemas”就可以了。下面的文章里有更多的信息。:)
    Here

  18. sunlife[匿名]
    *.*.*.*
    链接

    sunlife[匿名] 2006-12-10 21:01:00

    好的,谢谢你,我现在用你的方法,可以了

  19. 老赵
    admin
    链接

    老赵 2006-12-10 22:02:00

    @sunlife[匿名]
    :)

  20. 航天奇侠
    *.*.*.*
    链接

    航天奇侠 2006-12-11 03:57:00


    在ff 2.0中浏览本文有问题。图片掩盖了正文。
    博主察看一下。

  21. 老赵
    admin
    链接

    老赵 2006-12-11 11:38:00

    @航天奇侠
    多谢提醒。:)

  22. 星宿.NET
    *.*.*.*
    链接

    星宿.NET 2007-01-08 09:56:00

    Clip属性那里的
    被修建(clipped)应该是被修剪(clipped)吧?

  23. 老赵
    admin
    链接

    老赵 2007-01-08 20:08:00

    @星宿.NET
    不好意思,我改过来了。:)

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我