Hello World
Spiga

WPF/E CTP Quick Start - 第三部分:Canvas对象(翻译)

2006-12-08 11:57 by 老赵, 3248 visits

Canvas对象是一个设计用来存放和定位各种图形和控件的对象。每一个WPF/E XAML文件都至少有一个Canvas。这篇文当介绍了Canvas对象,并且描述了应该如何添加,定位子对象以及改变其大小。这篇文档包含以下部分。

 

向您的Canvas里添加一个对象

一个Canvas包含和定位了其它的对象。如果您希望在Canvas对象内增加一个对象,请在<Canvas>标签内添加新的元素。下面的例子为Canvas添加了一个Ellipse对象。因为Canvas是根元素,因此它包含了一些命名空间的定义。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Ellipse
        Height="200" Width="200"
        Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

重新开始查看内容

一个Canvas能够包含任意数量的对象,甚至与其它的Canvas对象。一个Canvas的内部对象的前后顺序是由它们声明的顺序决定的。后声明的对象会显示在先声明的对象之前。

 

定位一个对象

您可以设置对象的Canvas.LeftCanvas.Top附加属性,以确定它在Canvas中的位置。Canvas.Left附加属性指定了对象与其父Canvas左边缘的距离,而Canvas.Top附加属性指定了子对象与它父Canvas上边缘的距离。下面的例子将之前的Ellipse进行了移动,使其与Canvas上边缘和左边缘都相差30像素。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Ellipse 
        Canvas.Left="30" Canvas.Top="30" 
        Height="200" Width="200"
        Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

重新开始查看内容

下面的示意图描述了Canvas的坐标系统,并且在前一个例子的基础上定位了Ellipse对象。

 

控制宽度和高度

Canvas, 形状,以及其它各种元素都有WidthHeight属性,使您能够指定它们的大小。下面的例子建立了一个200像素宽和200像素高的Ellipase对象。请注意,在这里不支持使用百分比来指定大小。

<Ellipse 
    Canvas.Left="30" Canvas.Top="30" 
    Height="200" Width="200"
    Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />

重新开始查看内容

下面的例子设置了父CanvasWidthHeight属性,并且将它的背景设为了绿色。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="200" Height="200"
    Background="LimeGreen">
    
    <Ellipse 
        Canvas.Left="30" Canvas.Top="30" 
        Height="200" Width="200"
        Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

重新开始查看内容

当您运行这个例子时,绿色的方形就是Canvas对象,而灰色的背景是ActiveX控件,它并不会受Canvas影响。请注意Ellipse并没有被切除,它超出了Canvas的边缘。

如果您不设置Width和Height属性,它们在默认情况下都是0。

 

嵌套的Canvas对象

Canvas能够含有其它的Canvas对象。下面的例子创建了一个包含其它两个Canvas对象的Canvas对象。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas Height="50" Width="50" Canvas.Left="30" Canvas.Top="30"
        Background="blue"/>
  
    <Canvas Height="50" Width="50" Canvas.Left="130" Canvas.Top="30"
        Background="red"/>
</Canvas>

重新开始查看内容

 

下面该做什么呢?

在下一个部分“绘图和填充”中,您会了解图形和使用画刷来绘制图形。

Creative Commons License

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

Add your comment

26 条回复

  1. ocean2000[匿名][未注册用户]
    *.*.*.*
    链接

    ocean2000[匿名][未注册用户] 2006-12-08 12:28:00

    @一个Canvas的内部对象的前后顺序是由它们声明的顺序决定的。后声明的对象会出现在先声明的对象之前。
    这句话有点疑惑,“出现”是指的什么?客户端显示?还是dom树?

  2. 老赵
    admin
    链接

    老赵 2006-12-08 13:05:00

    @ocean2000[匿名]
    是指“显示”。
    // 多谢提醒,我改一下内容。:)

  3. 老赵
    admin
    链接

    老赵 2006-12-08 13:07:00

    @Jeffrey Zhao
    其实WPF/E在显示时似乎并没有所谓的DOM树。:)

  4. Go_Rush
    *.*.*.*
    链接

    Go_Rush 2006-12-08 13:31:00

    @Jeffrey Zhao
    ff,Opera,Safari 浏览器中都内置支持 Canvas标签,可以在网页上画图。
    http://developer.mozilla.org/en/docs/Canvas_tutorial

    ie不支持Canvas标签,但是可以通过js程序来模拟兼容。

    你文中的 Canvas 和我说的 Canvas 是不是一样的呢?
    没接触过 WPF/E, 请指教

  5. ocean2000[匿名][未注册用户]
    *.*.*.*
    链接

    ocean2000[匿名][未注册用户] 2006-12-08 15:14:00

    @Jeffrey Zhao
    因为我看了这篇文章介绍后http://blogs.msdn.com/wpfsdk/archive/2006/12/05/Introducing_5F00_WPFE.aspx

    里面这段话
    The tree structure determines the rendering ordering of WPF/E objects. The order of traversal starts with the root object, which is the top-most node in the tree structure. The root object's children are then traversed, left to right. If an object has children, its children are traversed before the object's siblings. This means the content of a child object is rendered in front of the object's own content. Here is the rendered output from the previous XAML example, showing the rendering order sequence

    所以才有那个疑问

  6. 老赵
    admin
    链接

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

    @Go_Rush
    完全不是一回事情。FireFox的那个是HTML元素,而这里说的是WPF/E的元素,不是HTML。两种使用的是不同的Render引擎和方式。

  7. 老赵
    admin
    链接

    老赵 2006-12-08 15:19:00

    @ocean2000[匿名]
    这段话的意思和我这里说的意思是一致的,不过它这话讲了更加General的情况,而我这里只是举了一个很小的例子。:)

  8. ocean2000[匿名][未注册用户]
    *.*.*.*
    链接

    ocean2000[匿名][未注册用户] 2006-12-08 15:20:00

    @Jeffrey Zhao
    而你的上下文也都是说内部对象顺序,所以我一下就想到了这篇文章的dom树

  9. 老赵
    admin
    链接

    老赵 2006-12-08 15:31:00

    @ocean2000[匿名]
    它说得XMAL的DOM树,我这里是指显示出来的顺序,刚才没有写清楚。:)

  10. sunlife
    *.*.*.*
    链接

    sunlife 2006-12-08 18:09:00

    HI,@Jeffrey Zhao
    在安装开发xmal文件的应用模板(WebApplicationProjectSetup.msi)之前应该要安装VS80-KB915364-X86-ENU.exe,但是我安装VS80-KB915364-X86-ENU.exe这个时,总是提示windwos installer 不能安装此升级修补程序,因为找不到要升级的程序
     请问这是什么原因?

  11. 老赵
    admin
    链接

    老赵 2006-12-09 01:07:00

    @sunlife
    我没有遇到过这个情况,不知道您的Windows是否已经更新到最新了呢?

  12. sunlife
    *.*.*.*
    链接

    sunlife 2006-12-09 15:01:00

    HI,请问是要在Vista操作系统下才能安装吗?我现在还是xp的

  13. 老赵
    admin
    链接

    老赵 2006-12-09 15:05:00

    @sunlife
    xp sp2也可以安装。:)

  14. sunlife
    *.*.*.*
    链接

    sunlife 2006-12-09 16:04:00

    我的是xp sp2的,也不知道为什么总早提示那个问题

  15. 老赵
    admin
    链接

    老赵 2006-12-09 16:17:00

    @sunlife
    还好这只是个模板。:)

  16. sunlife
    *.*.*.*
    链接

    sunlife 2006-12-09 17:05:00

    Hi,有空吗?我想问你一个问题,我在配置windows live writer时,到最后一步总是出现如下的错误,请问这个可能是什么原因,我配置了好长时间,每次都是这个错误(基础连接已经关闭,接收时发生错误)

    an error have occured while attempting to your weblog;
    network Connection Error at http://sunlife.cnblogs.com/services/metaweblog.aspx
    基础连接已经关闭,接收时发生错误

    请问这个可能是什么问题?
      

  17. sunlife
    *.*.*.*
    链接

    sunlife 2006-12-09 17:07:00

    不好意思,我知道在这里问不大合适,不过我已经配置了好多次,都是出现这个问题?很郁闷!(一直以来都想写一些文章,不过这个东西总是配置不好,就懒得写了)

  18. 老赵
    admin
    链接

    老赵 2006-12-09 17:21:00

    @sunlife
    我遇到过这个情况,但是重试几次就好了……

  19. sunlife
    *.*.*.*
    链接

    sunlife 2006-12-09 18:28:00

    不过,我已经试了无数次了,郁闷!

  20. sunlife
    *.*.*.*
    链接

    sunlife 2006-12-09 18:38:00

    能给我介绍一个吗?

  21. 老赵
    admin
    链接

    老赵 2006-12-09 18:38:00

    @sunlife
    不如换一个工具使用吧。:)

  22. sunlife
    *.*.*.*
    链接

    sunlife 2006-12-09 18:41:00

    能给我介绍一个吗? 我不知道还有什么其它的工具?

  23. 老赵
    admin
    链接

    老赵 2006-12-09 21:07:00

    要不试试看writely吧。:)

  24. sunlife
    *.*.*.*
    链接

    sunlife 2006-12-09 21:44:00

    谢谢你的帮忙,终于好了,原来是端口的问题,默认为8080,我把它改为80就可以了.原来没有注意这一点,郁闷了几天,以后做事情要认真!

  25. 老赵
    admin
    链接

    老赵 2006-12-09 21:59:00

    @sunlife
    没事就好。:)

  26. mxl[未注册用户]
    *.*.*.*
    链接

    mxl[未注册用户] 2007-01-29 18:56:00

    如何设定wpf/e的object的z-index?

    这个问题很棘手阿。要不然做UI时移动对象的时候,不都乱套了么

发表回复

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

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

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

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

使用Live Messenger联系我