Partilhar via

Fish Eye for the Blend Guy

  • Artigo

Picture of fish eye in action 

Thought I would share a panel that I and one of my dev friends, Paul Tallett created a while back. I also wanted o show you how you can use it in Blend.

A while back, we wanted to create a panel that would scale up its contents depending how close the mouse pointer was - however - we didn't want the panel to take up anymore width - tricky. This neat effect is similar to the Fish Eye effect, similar to the list of words on 10x10.org. The only difference was, we actually scale down the items furthest away from the mouse, ensuring the panel doesn't require any extra width.

Paul took this spec and created the code for the custom panel (you can read the full development article here) and then handed me a file called FishEyePanel.cs. From here, it was really easy to use in my Blend project. I have attached a .zip file to this post containing an example project and the FishEyePanel.cs file - and so, here are the steps to use a custom panel in your Blend project...

  1. With your Blend project open, go to the Project menu at the top, and click 'Add existing item...'
  2. Now, browse to FishEyePanel.cs, and click 'Open' (you will see in your Project tab that the panel has been added
  3. Go back to the Project menu, and select 'Rebuild Project'
  4. The panel is now ready to use - simply open up the Asset Library from the bottom of the tool box, click on the CustomControls tab and hey presto - you will see the FishEyePanel in there, and ready to use.
  5. Select it and then pop one onto your UI, then put stuff in.

Thing to remember, is that the FishEyePanel is very size aware, and will always scale its contents to fit its space. There are also a couple of properties you can play with found in the Miscellenous properties panel...

FishEye panel properties

AnimationMilliseconds will change the responsiveness of the panel, and magnification will change how large the items scale up by.

Please have a play with the panel, feedback, and let me know if you have created any wack custom panels - would be great to start sharing these with everyone!

Martin

FishEye-Example.zip

Comments

  • Anonymous
    April 06, 2007
    This is brilliant! Works beautifully. I actually needed a vertical one. So i just rotated the thing and placed the child items inside it. I think resizing the child items causes some sort of a problem in blend. But the smoothness of the code is par excellence! Thanks much.

  • Anonymous
    November 13, 2007
    Very cool control, thank you! I have a question. If I wrap the panel into ViewBox - it does not scale. Any ideas how to fix that?

  • Anonymous
    February 03, 2008
    very tkx 4 your greatful guide~

  • Anonymous
    February 04, 2008
    Hi, Thank U So Much.It is Useful for me.

  • Anonymous
    June 24, 2008
    Martin Grayson has a fantastic post, along with code, on one of the best Fish Eye controls I've seen

  • Anonymous
    November 18, 2008
    Do you have to use button controls?  What if you wanted a bit of title text to appear under the button image as its being rolled over?  It looks like a button control will not allow this.  What is preferred instead? Do you ever answer questions put forth in the comment section? :) zac@wetinkpro.com

  • Anonymous
    November 18, 2008
    Nope, you can put anything in (that inherits UIElement) - pictures, grids, videos, drawings - anything. I have just used buttons in my example. Martin

  • Anonymous
    February 25, 2009
    Has anyone updated this control to work with the latest release of Silverlight? If so, can you post the updated code. Thanks, Donta

  • Anonymous
    February 26, 2009
    Hi Donta, I have asked the author, I will get back to you! Thanks, Martin

  • Anonymous
    February 26, 2009
    Donta, Not that we know of. If you do, let us know! Martin

  • Anonymous
    May 28, 2009
    I ported this to silverlight 2 with minimal coding - find the entire class on my new blog; http://devoodoo.blogspot.com/2009/05/wpf-fisheyepanel-port-to-silverlight-2.html Enjoy; -Josh

  • Anonymous
    July 22, 2009
    Thanks, for this wonderful post. However, can you please explain how can i deploy it on my sharepoint (MOSS 2007) site. Regards Pallavi

  • Anonymous
    August 06, 2009
    Thanks, saved me a lot of time.

  • Anonymous
    August 13, 2009
    The comment has been removed

  • Anonymous
    October 14, 2010
    Nice control. Found one small bug though. If a child control is collapsed/hidden and the control gets to the foreach loop in the AnimateAll method, it'll crash. Adding a small check in the beginning of the loop to skip invisible children fixes the bug.