Spiga

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

2006-12-10 14:50 by Jeffrey Zhao, 2365 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元素的使用方式,以及您应该如何显示位图。

Add your comment

25 条回复

  1. #1楼 Dflying Chen      2006-12-10 15:05
    辛苦了!
    是“公有”还是“共有”呢?
    从你的第一句“一些属性能够被应用在所有的WPF/E的UIElement对象上”来看,应该是“共有”吧,“共同拥有XXX东西”,“公有”是“公开我有XXX东西”的意思。
      回复  引用  查看    
  2. #2楼[楼主] Jeffrey Zhao      2006-12-10 15:17
    @Dflying Chen
    我在这两个词之中权衡了一会儿,我想“共有”的意思表示“共同拥有”,而“公有”的应该也不是“公开我有XXX的东西”的意思吧,我是想表示这些“属性”是“公共”的意思……
      回复  引用  查看    
  3. #3楼 sunlife      2006-12-10 15:33
    HI,你写的很好,我很喜欢你的文章,很有条理,我想问一下,xmal文件中的代码,也就是你上面写的那些声明式代码都是自己手写的吗?有没有专门的工具来开发,就是说有提示功能.这样我们写起来方便,也不用去记这些属性,有吗?
      回复  引用  查看    
  4. #4楼[楼主] Jeffrey Zhao      2006-12-10 15:38
    @sunlife
    在VS里只要设对了Namespace就会有提示,因为安装SDK时Schema已经被复制到特定文件夹下了。:)
      回复  引用  查看    
  5. #5楼 Dflying Chen      2006-12-10 15:39
    @Jeffrey Zhao
    原文是public还是shared还是common呢?
    你说“我是想表示这些“属性”是“公共”的意思”,这个“公共”是公开给外部使用者的么?如果是,那么“公有”没什么问题。如果这个“公共”是“所有组件都有这些属性”的意思,我觉得还是“共有”比较好一些。
      回复  引用  查看    
  6. #6楼 sunlife[匿名]2006-12-10 16:30
    我不太明白,请问是在哪边设Namespace,是在xmal文件中?能举个例子吗?
    谢谢!
      回复  引用    
  7. #7楼[楼主] Jeffrey Zhao      2006-12-10 16:47
    @Dflying Chen
    原文是common。
      回复  引用  查看    
  8. #8楼[楼主] Jeffrey Zhao      2006-12-10 16:48
    @sunlife[匿名]
    您试试看,创建一个XAML文件,然后输入:
    <Canvas
      xmlns="http://schemas.microsoft.com/client/2007"">http://schemas.microsoft.com/client/2007"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">">http://schemas.microsoft.com/winfx/2006/xaml">
    </Canvas>
    现在有代码提示了吗?
      回复  引用  查看    
  9. #9楼 Sheva      2006-12-10 17:01
    我个人认为OpacityMask应该翻译成:通过用OpacityMask属性指定的画刷的alpha通道值来遮掩此元素的alpha通道值。因为OpacityMask其实就是用两个alpha通道值来进行&运算。

    Sheva
      回复  引用  查看    
  10. #10楼 sunlife[匿名]2006-12-10 17:05
    我试了一下,不会提示,会不会和操作系统有关,我下载的自带的那些例子,我在里面修改,也不会有提示?这有可能是什么问题,还是我安装SDK有问题?
      回复  引用    
  11. #11楼 sunlife[匿名]2006-12-10 17:11
    好的,我又看了一下,实际上我的sdk没有安装上,在安装过程中提示:your system has not been modified ,to install this program at later time,请问在这安装wpfesdk.msi之前,还要安装其它的吗?
      回复  引用    
  12. #12楼 wb[未注册用户]2006-12-10 17:59
    好文,收藏!
      回复  引用    
  13. #13楼[楼主] Jeffrey Zhao      2006-12-10 19:05
    @Sheva
    这是Mask一贯的工作原理,不过似乎原文没有很“专业”地去描述它,我再推敲一下。:)
      回复  引用  查看    
  14. #14楼[楼主] Jeffrey Zhao      2006-12-10 19:06
    @sunlife[匿名]
    其实安装完SDK就有了,是两个schema文件在起作用,我帮您找一下这两个文件。:)
      回复  引用  查看    
  15. #15楼[楼主] Jeffrey Zhao      2006-12-10 19:07
    @sunlife[匿名]
    我最近刚重装了系统,所以应该不需要特殊的东西阿……
      回复  引用  查看    
  16. #16楼[楼主] Jeffrey Zhao      2006-12-10 19:07
    @wb
    多些支持。:)
      回复  引用  查看    
  17. #17楼[楼主] Jeffrey Zhao      2006-12-10 19:28
    @sunlife[匿名]
    您把“C:\Program Files\Microsoft SDKs\WPFE\Help\XSD”里的wpfe.xsd文件复制到“C:\Program Files\Microsoft Visual Studio 8\Xml\Schemas”就可以了。下面的文章里有更多的信息。:)
    http://blogs.conchango.com/johnrayner/archive/2006/12/08/WPF_2F00_E_3A00_-Running-side_2D00_by_2D00_side-with-WPF-Designer-_2800_a.k.a-_2200_Cider_22002900_.aspx">Here

      回复  引用  查看    
  18. #18楼 sunlife[匿名]2006-12-10 21:01
    好的,谢谢你,我现在用你的方法,可以了
      回复  引用    
  19. #19楼[楼主] Jeffrey Zhao      2006-12-10 22:02
    @sunlife[匿名]
    :)
      回复  引用  查看    
  20. #20楼 航天奇侠2006-12-11 03:57

    在ff 2.0中浏览本文有问题。图片掩盖了正文。
    博主察看一下。
      回复  引用    
  21. #21楼[楼主] Jeffrey Zhao      2006-12-11 11:38
    @航天奇侠
    多谢提醒。:)
      回复  引用  查看    
  22. #22楼 星宿.NET      2007-01-08 09:56
    Clip属性那里的
    被修建(clipped)应该是被修剪(clipped)吧?
      回复  引用  查看    
  23. #23楼[楼主] Jeffrey Zhao      2007-01-08 20:08
    @星宿.NET
    不好意思,我改过来了。:)
      回复  引用  查看    



发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 587899




相关文章:

相关链接: