Silverlight 右键菜单制作教程
2008-11-07 11:59:30| 分类：
SilverLight
| 标签：
|字号大中小 订阅
|
|
本篇主要讲述了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};
} |
评论这张
转发至微博
转发至微博
0人 |
分享到：
阅读(129)|
评论()|
引用 (0)
|举报
<#--最新日志，群博日志-->
<#--推荐日志-->
<#--引用记录-->
<#--博主推荐-->
<#--随机阅读-->
<#--首页推荐-->
<#--相关文章-->
<#--历史上的今天-->
<#--右边模块结构-->
<#--评论模块结构-->
<#--引用模块结构-->
<#--博主发起的投票-->
评论