Oct 10

WP7 – Quick Jump Grid Sample Code

[Download Sample]

With the recent release of the windows phone 7 toolkit, most of the controls in the native apps are present except the quick jump grid and the list picker. For those of you that don’t know the quick jump grid is described in the official design template.


QuickJumpGrid_PSD2 QuickJumpGrid_PSD3

My co-worker Erik Klimczak blogged about one awhile back but never released the code so I thought I’d post an update. Here are some screenshots:





The sample control handles both the alphanumeric tiles and full text ones. There are a variety of properties to change any of the colors used, but it will default to the appropriate phone theme colors. The animations and styles should be fairly close to the native quick jump grid.

Couple of notes:

  • This is just a sample so the code could definitely be improved but it’s worked pretty well in the testing I’ve done. Feel free to take the code and make it better for your own use. This is also an older version that doesn’t support observable collections. I have updated an one that does support them but I don’t have it packaged as code I can share at the moment. It’s really not that hard to implement though. You just need a listener on the datasource and update the internal collection appropriately. I’ll release a cleaned up one as soon as I finish some other projects.
  • If you run it in the emulator, the animation is slightly lagged. This is an odd instance where the animation on the phone is actually faster than in my emulator. It’s almost always the opposite case for me even with the GPU acceleration on the phone. It’s actually pretty smooth on the phone I think despite the code for the animation looking like a mess.
  • I used some classes from the Silverlight Toolkit, but you could drop those and just use the ones in the toolkit if you already referenced that in your project. I just pulled out the stuff i needed to make it more compact
  • I tried a variety of options for setting the filtering and ordering properties like using some sort of collectionviewsource or dynamically creating linq expressions from some bindable fields, but I ended up using a method similar to one of David Anson’s blog posts which seemed to be the most flexible.
  • The overlay will close on back key press and cancel the page navigation, but if you are handling the back key press in the page to do animation you will have to check to see if the overlay is open since the page will handle that event before the quick jump grid has a chance to handle it.
  • I recently saw this other version on codeplex – so you may want to try that out also and see what works best in your app
210 comments , permalink