Early version of snoop for silverlight 1.0 ...

  • Article

First 3 hours of troubleshooting the problem my last post, I was thinking "I need snoop" ... 

Next 5 hours, I wrote a very early rough version ...  It needs work,  I want to clean it up, but have not have a chance..  Sharing it in the mean time  and adding this to my very long "to clean up later" list ...   [email me if you want to be notified or think it would be useful]..

Here is what it does:
1 - Creates a VisualTree ...    [in a different Silverlight control, as not to bother your code]
2 - you can click on any item in the visual tree and it will adorn it in the control ..   [see known issues]
3 -- It can subscribe to either MouseMove or MouseEnter/MouseLeave in your code ... so you can get details on the items that the mouse hovers over..  of course for this, your item needs to be hitTestVisible...
I did both events cause i thought mouseMove would be too much.. but I ended up adding a cache and MouseMove seems OK.. Still MouseEnter is likely a better choice for very large project.. the one I tested had about 2000 visuals..
4-  I added a flag to skip paths...  this turned useful for me, but if you want paths, then change the flag in VisualTreeHelper.js

Here is a sample screenshot of the tree + details..  the LHS is the VisualTree,  the RHS is a Silverlight control with items..  the Adorned item is in yellow..

 

Here are the known issues:

1- My treeview control and its scrollbar sucks .. sorry .. would have taken me longer to write the tree than the snoop functionality..   
2 --  If you are clicking on the tree, it does its best to guess the position for the adorner, but currently it ignores transforms... so it is more accurate if you subscribe to mouse move... or Mouse Enter .. cause then it caches the position it should adorn so it is accurate..
3 -- tree 'ignores' changes once tree is built ... but you do have the ability to "refresh the tree" ...
4 -- in my machine I wired it in same window..   but for sample, to try to make it usable for people with lower resolutions, I hacked some very ugly  buttons for a new window..  the problem is if you close the window with out unplugging the event listeners you will get errors.. 

My current wishlist:

  1. I should make it so it can edit the values in the details tab... that should be easy and quite handy ...
  2. Gotta fix known issues.. specially UI..  
  3. Still debating the re-write in 1.1 .. I would benefit from perf, but I thought keeping it 1.0 to make sure any one is comfortable..  [instead of people thinking, well I am in 1.0 would this work if it is 1.1?]

Want to take it for a spin ???   It is "live" here ...   The source is here..  

The sample is no where representative of what this early snoop helped me troubleshoot... To see some of the intricacies, follow this sequence..

  1. Click on the "Create window" button ..  wait until it loads ( gray background appears )
  2. Click on the "Create visual tree" to get a tree...
    1. Click around in the tree.. to see it adorn some of the elements in the page..
    2. Good example, click on the "invisibleEllipse" element ..
  3. Subscribe to Mouse Move events..  (by clicking "3- subscribe to move"  in the controls page)
    1. Move the mouse around... to see the adorner and how the tree keeps track of element with mouse focus ..
    2. if you navigate around the bottom canvases, notice how some items are not hittestable cause there is an invisible rect in front.. very last item in the tree, called the "hog" ..
  4. Go back to visual tree and high light these not reachable items..   see how the adorner finds them

if you take this early sample and make it useful or good quality, please drop me an email so I can redirect ...  If you run into issues, let me know too ..  

PS -- apologies to Peter for calling it 'snoop' when it does 0.1 of what snoop does..  Peter, imitation is flattery ..