[翻译] 用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