Share via

Snipping Pictures with Silverlight

  • Article

One of my favorite tools on the Tablet PC is the 'Snipping Tool'. I have been using it frequently since the early XP days (back then we shipped it seperately as a Power Toy). Now in Vista, it's part of the main OS and I find myself using it quite often event on my desktop PC.

When I was using the tool recently, I got this idea for a new Silverlight sample app: wouldn't it be cool to snip pieces from various images and put them together as a collage in Silverlight - and then annotate the result with text, drawings and/or handwriting?

Silverlight's imaging and ink APIs make this fairly easy. Here are my results of this effort using Silverlight v1.0 - the sample demonstrates these features:

  • Select an image from an animated collection of pictures
  • Snip a piece of the selected image (free-form, rectangle or entire picture) and arrange it on the canvas
  • Use 'Image Tools' to control zoom, rotation and opacity of individual snippets
  • Use 'Text Tools' to add/change text annotations
  • Use 'Ink Tools' to add/change drawings and handwritten annotations
  • Full screen and embedded mode

Couple of notes and caveats:

  • The pictures are currently hardcoded (appropriate for the holiday season :-) ), but you can easily change that in the attached source code to use your own pictures or to pull images from the web.
  • When you launch the app from this blog, it opens up in full screen mode (since this is the best mode to view and use it). You can press the 'Esc' key or use the 'Miscellaneous' menu to go back to embedded mode.
  • In full screen mode Silverlight disables keyboard input (for security reasons). So if you want to enter some text annotations, please switch to embedded mode.
  • The 'Create Bitmap' button doesn't do anything in this version. The idea is to invoke some server-side code here to generate a bitmap of your collage. If there is interest in the community, this might be a good topic for a seperate blog post. But then again: if you are on Windows Vista, you can just use the Snipping Tool in the OS, to grab your collage and save it as bitmap :-)

The sample's complete source code is attached to this post. A live version, hosted via Silverlight Streaming, is included below for you try out. Click the button to launch the app:

ImageSnipperSource.zip

Comments

  • Anonymous
    March 19, 2008
    ProgrammaticdrawingwithSilverlight Silverlight动态绘制图形. http://rozengain.com/?sectionid=2...

  • Anonymous
    August 22, 2008
    I need the way to save the image... can you help me the pseduo code for the implementation of the image...

  • Anonymous
    June 04, 2009
    yes, how can we save the drawing? it seem no way to save

  • Anonymous
    February 15, 2010
    Hi, can anyone tell me how to same image?