Fish Eye for the Blend Guy


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 10×10.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 (15)

  1. CJ says:

    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.

  2. Alex says:

    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?

  3. billynew says:

    very tkx 4 your greatful guide~

  4. arumugam says:

    Hi,

    Thank U So Much.It is Useful for me.

  5. Martin Grayson has a fantastic post, along with code, on one of the best Fish Eye controls I've seen

  6. zac says:

    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

  7. martin.grayson says:

    Nope, you can put anything in (that inherits UIElement) – pictures, grids, videos, drawings – anything.

    I have just used buttons in my example.

    Martin

  8. Donta says:

    Has anyone updated this control to work with the latest release of Silverlight? If so, can you post the updated code.

    Thanks, Donta

  9. martin.grayson says:

    Hi Donta,

    I have asked the author, I will get back to you!

    Thanks,

    Martin

  10. martin.grayson says:

    Donta,

    Not that we know of. If you do, let us know!

    Martin

  11. WhoKnewVooDoo says:

    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

  12. Pallavi Gupta says:

    Thanks, for this wonderful post. However, can you please explain how can i deploy it on my sharepoint (MOSS 2007) site.

    Regards

    Pallavi

  13. Alex says:

    Thanks, saved me a lot of time.

  14. martin.grayson says:

    Hi there,

    There are numerous way to get silverlight onto Sharepoint, ranging from out of the box – hosting the XAPs / XBAPs in a document libary then using object tags / iframes to access to creating custom Silverlight / WPF web parts that render the content in active x controls.

    Best advice really is to ‘bing’ it!

    Thanks,

    Martin

  15. Daniel says:

    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.