再别康桥

月亮装饰了你的窗子,你装饰了别人的梦

博客园 首页 新随笔 联系 订阅 管理
  5 Posts :: 0 Stories :: 0 Comments :: 0 Trackbacks

2008年3月16日 #

[翻译] 用Blend实现鱼眼效果(Fish Eye for the Blend Guy)
本书翻译目的为个人学习和知识共享,其版权属原作者所有,如有侵权,请告知本人,本人将立即对发帖采取处理。
允许转载,但转载时请注明引用来源和本版权声明信息,禁止用于商业用途!

来自mgrayson的博客 
Adventures with WPF
原帖地址:
http://blogs.msdn.com/mgrayson/archive/2007/02/26/fish-eye-for-the-blend-guy.aspx

     尽管之前我已经分享过我和一个程序员朋友 Paul Tallet 开发的鱼眼效果面板控件,但在这里,我还是希望能讲解一下在blend中,我们如何使用鱼眼面板控件

 

     前段时间,我们想创建一个当鼠标移近时能自动缩放内容的面板--然而--我们并不希望面板自己增加宽度。这个漂亮的效果跟金鱼的眼睛有点相似,可以参考一下 10x10.org 里的单词列表,就是这个效果。唯一的不同是,我们会缩减离鼠标较远项的大小,从而保证了整个面板不需要增加宽度。

     Paul按照这种特性编制了一个自定义面板(完整的开发过程,可以参见这里),然后他给我一个名为FishEyePanel.cs的文件,有了这个文件,我们就可以很方便的在自己的Blend项目中使用鱼眼效果。我把FishEyePanel.Cs文件和一个简单的例子放在了一个zip压缩包中。你们可以按照下面的步骤在自己的Blend项目中使用该自定义面板。

1.  首先打开你自己的Blend项目,然后点击顶部的Project(项目)菜单,点击“Add existing item ”(添加已存在的项)。

2.  打开FishEyePanel.cs所在文件夹,选中该文件,点击“Open”(打开);现在可以在Blend右侧的Project(项目)页中看到添加的FishEyepanel.cs文件。

3.  点击顶部的Project(项目)菜单按钮,选择“Rebuild Project ”(重建项目)。

现在就可以使用鱼眼面板了--只需要点击左边工具栏最下方的按钮“Asset Library”(控件库),然后点击选中“CustomControls”页--现在你就可以看到FishEyePanel在里面 。选择你的项目界面,将该控件放入,可以使用了。

     需要提醒记住的是,FishEyePanel对大小敏感,会根据整个面板的大小缩放里面内容项的大小。我们可以在 Miscellenous 属性面板中,看到许多能够设置的属性。

     AnimationMilliseconds  用来改变控件面板的响应时间, magnification  用来设定内容项(如一个按钮)放大多少倍。

     你们可以尽情享用这个面板控件,不过如果你创建了什么比较奇特的自定义面板,希望能告诉我--如果能跟其他人分享,那就更好了。

     Martin Grayson

     附件:  FishEye-Example.zip  

     翻译 by candylight,自己根据内容测试了一下,果然很不错。效果如下图:www.silverlightbbs.com

 

posted @ 2008-03-16 22:56 candylight 阅读(156) | 评论 (0)编辑

     摘要: [翻译]《Essential Silverlight》第五章 交互和事件句柄 翻译 by candylight本书翻译目的为个人学习和知识共享,其版权属原作者所有,如有侵权,请告知本人,本人将立即对发帖采取处理。允许转载,但转载时请注明本版权声明信息,禁止用于商业用途!Silverlight 交互 XAML 提供了很多可能,包括创建所有类型的形状(见第 4 章),动画元素(见第 6 章),播放声音... 阅读全文
posted @ 2008-03-16 21:07 candylight 阅读(138) | 评论 (0)编辑