none
[引用之]Silverlight 右键菜单制作教程-WPF之家 RRS feed

  • 常规讨论

  • 引用之:http://www.wpfhome.com/help/wpfhelp27.ASPX

     

    Silverlight 右键菜单制作教程

    日期: 2008-3-31  作者:由灵 版本:1.0
    本篇主要讲述了Silverlight中右键菜单的实现方法,希望对您有所帮助!

      由灵(作者)使用的是Expression Blend 2.5 March 2008 Preview版本开发,其中使用的“Silverlight 1 Site”项目。并没有涉及到2.0技术,本实例使用JavaScript作为交互语言!其中主要使用HTML中控件的oncontextmenu事件屏蔽Silverlight插件的右键菜单,并且调用XAML中的菜单显示(动画)或隐藏。

        效果:
           

      打开Silverlight 1 Site项目的默认添加文件“Page.xaml”文件。在可视化视图中<a href="http://www.wpfhome.com/help/default.aspx?id=8">创建一个动画</a>,并且命名为“animation”,这个动画是由您随意设的,菜单将会控制这个animation的播放与暂停。

      最后设计菜单项,其中包括“播放”、“暂停”两个按扭,这些MouseEnter和MouseLeave和MouseLeftButtonDown等事件您可以随意设定!并助把这两个按扭进行自定义,并且合组后命名为“menu”。然后为这个Menu组合设计弹出和隐藏时的运画,显示是命名为“show_menu”,“hidden_menu”,最后把context的Opacity(透明度)设为零(请注意:在显示菜单的动画中请把Opacity值显示出来)!

      如图:
           

        现在我们要用动画的组件都制作好了,然后由脚本代码联起来!

        这一步是必须的,在createSilverlight的初始化参数isWindowless为'true'。这样就可以使用Silverlight插件的oncontextmenu事件了!如果您不明白这步,请下载实例后打开default.html查找“isWindowless”就可以找到。

       主要脚本(page.xaml.js)片段:

       control.oncontextmenu=Silverlight.createDelegate(this,function(s,e){
     this.showMenu(event);
     return false;
       });

       这是在Silverlight插件的加载事件中绑定的oncontextmenu事件,使用return false取消的Silverlight默认菜单,并且使用this.showMenu显示菜单:

        showMenu:function(e)
     {
      var p=mousePosition(e);
      p.x-=this.control.offsetLeft;
      p.y-=this.control.offsetTop;
      if(p.x+this.control.content.findName("menu").width>this.control.content.root.width)
      {
       p.x=this.control.content.root.width-this.control.content.findName("menu").width;
      }
      if(p.y+this.control.content.findName("menu").height>this.control.content.root.height)
      {
       p.y=this.control.content.root.height-this.control.content.findName("menu").height;
      }
      this.control.content.findName("menu")["Canvas.Left"]=p.x;
      this.control.content.findName("menu")["Canvas.Top"]=p.y;
      this.control.content.findName("show_menu").begin();
      this.isMenu=true;
     }

        function mousePosition(ev){
         if(ev.pageX || ev.pageY){
         return {x:ev.pageX, y:ev.pageY};
      }
      return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop  - document.body.clientTop};
    }

      其中mousePosition获取的页面中鼠标的坐标位置,并且计算为Silverlight插件中的坐标位置。并把菜单的位置赋给menu的坐标,并显示出来!

    2008年3月31日 8:17

全部回复