Hello World
Spiga

WPF/E CTP Quick Start - 第十一部分:示例控件(翻译)

2006-12-21 13:27 by 老赵, 3729 visits

这片文档包含了几个例子,演示了如何使用WPF/E来创建交互式的控件。

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

 

“超级链接”示例

下面的示例使用一个TextBlock和一个Line创建了一个超级链接。

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
    <!-- Hyperlink -->
    <Canvas Width="90" Height="30" Canvas.Left="20" Canvas.Top="20"
        Background="transparent"
        MouseEnter="javascript:hyperlink_MouseEnter"
        MouseLeave="javascript:hyperlink_MouseLeave"
        MouseLeftButtonDown="javascript:hyperlink_MouseLeftButtonDown">
        <TextBlock Text="hyperlink" Foreground="Blue"/>
        <Line Stroke="blue" StrokeThickness="1" X1="0" Y1="20" X2="65" Y2="20"
            x:Name="hyperlink_line" Opacity="0"/>
    </Canvas>
</Canvas>
function hyperlink_MouseLeftButtonDown(sender, args) {
    window.location = "about-frames.html";
}

function hyperlink_MouseEnter(sender,args)
{
    sender.findName("hyperlink_line").opacity = 1;
}

function hyperlink_MouseLeave(sender,args)
{
    sender.findName("hyperlink_line").opacity = 0;
}

重新开始查看内容

 

“按钮”示例

下面的示例使用两个Rectangle元素和一个TextBlock创建了一个按钮。

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- Button -->
    <Canvas
            x:Name="button"
            Canvas.Top="10" Canvas.Left="20"
            MouseLeftButtonDown="javascript:button_MouseLeftButtonDown"
            MouseLeftButtonUp="javascript:button_MouseLeftButtonUp"
            MouseEnter="javascript:button_MouseEnter"
            MouseLeave="javascript:button_MouseLeave">
        <Canvas.RenderTransform>
            <TransformGroup>
                <TranslateTransform x:Name="button_transform" X="0" Y="0"/>
            </TransformGroup>
        </Canvas.RenderTransform>
        <Rectangle Width="128.8" Height="56" x:Name="button_rectangle"
            Stroke="#FF000000" Fill="sc#1, 0.8123474, 0.8123474, 0.8123474"/>
        <Rectangle Stroke="sc#1, 0.912730157, 0.37122494, 0.17111966"
            Width="126.8" Height="54" Canvas.Left="1" Canvas.Top="1"
            Opacity="0" StrokeThickness="5" x:Name="button_highlight"/>
        <TextBlock Text="Press me!" FontSize="20" Canvas.Left="22" Canvas.Top="12"/>
    </Canvas>
</Canvas>
var mouseOver = false;
var pressed = false;

function button_MouseLeftButtonDown(sender,args) {
    sender.captureMouse();
    mouseOver = true;
    pressed = true;
    updateVisuals(sender);
}

function button_MouseLeftButtonUp(sender,args) {
    sender.releaseMouseCapture();
    pressed = false;
    
    updateVisuals(sender);
    
    if (mouseOver) {
        alert("you pressed the button!");
    }
}

function button_MouseEnter(sender,args) {
    mouseOver = true;
    updateVisuals(sender);
}

function button_MouseLeave(sender,args) {
    mouseOver = false;
    updateVisuals(sender);
}

function updateVisuals(sender) {
    //background
    if (pressed && mouseOver) {
        sender.findName("button_rectangle").fill = "sc#1, 0.548430264, 0.5354195, 0.5354195";
        var transform = sender.findName("button_transform");
        transform.x = 2;
        transform.y = 2;
    } else {
        sender.findName("button_rectangle").fill = "sc#1, 0.8123474, 0.8123474, 0.8123474";
        var transform = sender.findName("button_transform");
        transform.x = 0;
        transform.y = 0;
    }
    
    // highlight
    if (mouseOver || pressed) {
        sender.findName("button_highlight").opacity = 1;
    } else {
        sender.findName("button_highlight").opacity = 0;
    }
}

重新开始查看内容

 

“滚动条”示例

下面的示例使用了一个LinePath创建了一个滚动条。

<Canvas Width="300" Height="300"
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Loaded="javascript:slider_loaded">
  <!-- Slider -->
  <Canvas Canvas.Top="50" Canvas.Left="20" Width="200" Height="45"
    Background="transparent" x:Name="slider"
    MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="slider_line" Stroke="black" 
      StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="slider_thumb"  Stroke="#FF000000" 
      Fill="sc#1, 0.548430264, 0.5354195, 0.5354195"
      Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z"
      MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
      MouseMove="javascript:slider_thumb_MouseMove"
      MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
  </Canvas>
</Canvas>
var mouseDownPosition = 0;
var mouseDownValue = -1;

function slider_Loaded(sender, args) {
    slider_SetValue(slider, 0);
}

function slider_MouseLeftButtonDown(sender, args) {
    var coordinate = args.x;
    coordinate -= sender["Canvas.Left"];
    slider_SetValue(sender, coordinate);
}

function slider_thumb_MouseLeftButtonDown(sender, args) {
    var slider = sender.findName("slider");
    sender.captureMouse();
    mouseDownValue = slider_GetValue(slider);
    mouseDownPosition = args.x;
}

function slider_thumb_MouseLeftButtonUp(sender, args) {
    var slider = sender.findName("slider");
    sender.releaseMouseCapture();
    mouseDownValue = -1;
}

function slider_thumb_MouseMove(sender, args) {
    var slider = sender.findName("slider");
    if (mouseDownValue != -1) {
        var newValue = mouseDownValue
        + (args.x - mouseDownPosition);
        
        slider_SetValue(slider, newValue);
    }
}

function slider_GetValue(sender) {
    var thumb = sender.findName("slider_thumb");
    return thumb["Canvas.Left"] + .5 * thumb.width;
}

function slider_SetValue(sender, newValue) {
    if (newValue > sender.width) {
        newValue = sender.width;
    }
    if (newValue < 0) {
        newValue = 0;
    }
    var thumb = sender.findName("slider_thumb");
    thumb["Canvas.Left"] = newValue - .5 * thumb.width;
}

重新开始查看内容

 

下面该做什么呢?

在下一部分“创建一个Visual Studio的WPF/E项目”中,您会了解如何在Visual Studio中创建一个WPF/E项目。

Creative Commons License

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

Add your comment

27 条回复

  1. 老赵
    admin
    链接

    老赵 2006-12-21 13:29:00

    这种做控件的方式……

  2. neuhawk
    *.*.*.*
    链接

    neuhawk 2006-12-21 14:05:00

    回到原始社会~

  3. 良[匿名][未注册用户]
    *.*.*.*
    链接

    良[匿名][未注册用户] 2006-12-21 14:10:00

    好久没发过话了.发过话先... 老赵.圣诞快乐..

  4. 老赵
    admin
    链接

    老赵 2006-12-21 15:00:00

    @neuhawk
    WPF/E的目的似乎不是为了构造一个“完整”的应用,依旧要配合传统的HTML。

  5. 老赵
    admin
    链接

    老赵 2006-12-21 15:00:00

    @良[匿名]
    好啊,同乐!:)

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

    kiven[匿名] 2006-12-21 16:39:00

    老赵,能不能告诉我它如何与数据库建立交互。能否下期推一部分出来介绍一下目前WPF/E是如何与数据建立连接,实现最基本的增、删,改的。
    急切想知道。

  7. neuhawk
    *.*.*.*
    链接

    neuhawk 2006-12-21 16:49:00

    如果看过flex app,才知道wpf/e差太远了!

  8. 老赵
    admin
    链接

    老赵 2006-12-21 16:54:00

    @kiven[匿名]
    它不能和数据库交互。您可以使用别的方式实现,例如使用ASP.NET AJAX与后台进行数据交换,然后使用JavaScript修改WPF/E。

  9. 老赵
    admin
    链接

    老赵 2006-12-21 16:55:00

    @neuhawk
    呵呵
    为什么会这样呢?不知道它们的出发点相同吗?

  10. neuhawk
    *.*.*.*
    链接

    neuhawk 2006-12-21 17:04:00

    目前.没有必要用wpf/e实现增、删,改,因为,没有控件,几乎做不了.

  11. 老赵
    admin
    链接

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

    @neuhawk
    我认为WPF做的再强,还是离不开JavaScript,因为有些逻辑和操作完全是在客户端实现的,如果一定要避开JavaScirpt,只能:
    1、将服务器端代码转换成客户端代码,但是这样的话JavaScript的灵活性就消失殆尽了。
    2、将逻辑放入XAML,这样的话相当于使用XML表示逻辑,很多情况下会不方便。
    3、WPF/E需要和DOM元素交互

    所以我还是觉得,WPF/E无法脱离JavaScript,也就是说,无法替代AJAX技术……

  12. neuhawk
    *.*.*.*
    链接

    neuhawk 2006-12-21 17:27:00

    http://www.flickr.com/photos/flexapps/

    看看flex吧,而且开发速度比ajax快N倍,N>10.
    还是那句话,如果wpf/e不能实现flex类似的功能,那么就没有什么优势.
    flex可以替代ajax,wpf也可以,只不过wpf不普及.
    ajax毕竟很多地方实现不了,这也是为什么sap用flex而不是ajax实现erp.
    台湾也有好几个厂商用flex做erp了,ajax能吗?

    按目前wpf/e ctp的现状,我实在找不出用它的理由.

  13. Dah
    *.*.*.*
    链接

    Dah 2006-12-21 20:24:00

    毕竟是第一个CTP版本, 还不包括任何的Control..
    但WPF/E还是有潜力的

    这个app挺不错的: http://notstatic.com/archives/65

  14. neuhawk
    *.*.*.*
    链接

    neuhawk 2006-12-21 20:42:00

    问题是,wpf/e团队对wpf/e的内容还不明朗~

  15. 老赵
    admin
    链接

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

    @neuhawk
    wpf也能替代AJAX?目前的WPF/E像是个toy。

  16. 老赵
    admin
    链接

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

    @Dah
    开发人员的创造力是无穷的,AJAX的出现和应用就是证明……

  17. 老赵
    admin
    链接

    老赵 2006-12-21 21:02:00

    @neuhawk
    再看看吧,毕竟WPF/E不能像WPF一样自由地设计。

  18. neuhawk
    *.*.*.*
    链接

    neuhawk 2006-12-21 21:08:00

    wpf最大的问题是系统要求
    1,硬件
    2,os

    别的功能都不错,我用Microsoft Expression Blend Beta 1
    做了一些动画和3d,很不错.

  19. 老赵
    admin
    链接

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

    @neuhawk
    是啊,关键就在于WPF不适合Web。
    WPF的话需要一个庞大的.NET Framework 3.0和DirectX做底,那么别的OS下又该怎么办呢?像Java一样为每个平台抽象一个虚拟机出来吗?相信微软不会这么做的……

  20. neuhawk
    *.*.*.*
    链接

    neuhawk 2006-12-21 21:25:00

    如果vista普及后,还是可以用wpf开发的,毕竟很多时候,不一定要支持所有系统,
    比如现在很多erp只能在win跑.
    尽管现在满街都是web2.0的广告,但是,还有太多别的应用.

  21. 老赵
    admin
    链接

    老赵 2006-12-21 21:31:00

    @neuhawk
    嗯,ERP的话其实也不一定非要Web平台上的应用。WPF的效果的确很不错,而且开发效率高,对于一些应用……或者骗骗客户,很有效果,呵呵……

  22. neuhawk
    *.*.*.*
    链接

    neuhawk 2006-12-21 21:36:00

    i have a dream,那就是wpf/e能达到wpf的效果(3D除外).
    现在我用智能客户端,还是不怎么爽啊.

  23. 老赵
    admin
    链接

    老赵 2006-12-21 21:48:00

    @neuhawk
    哎,再看吧……现在WPF/E和WPF的目标似乎差了太多(不过也没错阿),所以WPF/E Team的人踌躇不定。

  24. neuhawk
    *.*.*.*
    链接

    neuhawk 2006-12-21 22:28:00

    WPF/E做为WPF的子集.想尽办法实现wpf的功能,不要搞太多不兼容的东西啊

  25. 老赵
    admin
    链接

    老赵 2006-12-22 09:12:00

    @neuhawk
    你是说不兼容WPF吗?其实它们考虑的往往都是“这个功能要不要搬过来”之类的……

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

    soulmachine[未注册用户] 2006-12-24 09:41:00

    我想画一个圆,再在圆里面显示几个字,这个在WPF和WPF/e 里面好像都智能这样实现:
    <Canvas ...>
    <Ellipse ...>
    <TextBlock ...>
    </Canvas>
    在WPF 里面控件可以把另外一个控件作为自己的内容,比如可以这样写:
    <Button ...>
    <TextBlock ...>
    </Button ....>
    那我可不可以这样写:
    <Ellipse ...>
    <TextBlock ...>
    </Ellipse>
    来实现在圆中显示字呢?

    在WPF 中,controls 和graphics 有什么区别呢?

  27. 大漠独行[未注册用户]
    *.*.*.*
    链接

    大漠独行[未注册用户] 2007-10-21 10:43:00

    乍看起来,有点像Yahoo Widget的运作方式,
    不就是xml + Javascript么? 和HTML+JavaScript + VML的一个翻版嘛!
    JavaScript的效率是个问题!不过MS大概会用编译代码来替代JS吧!
    初步了解WPF ing......

发表回复

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

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

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

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

使用Live Messenger联系我