Silverlight: DragSelect component

This all started as a requirement for zooming in a chart, then later I decided to make a component out of it – drag select an area.
For the end-user it is really simple: click… select an area by dragging… release!

You can use this anywhere in your application (not only restricted to charts).

It is simple to learn what it does only by playing with my demo.
In seconds you’ll know how to use it: drag-select an area inside the orange rectangle.
All the controls and output are on your left side.

Take a look at the source code to understand more.

Questions and comments are most welcomed.

Demo is here
Source is here

Advertisements

12 Responses to Silverlight: DragSelect component

  1. Justin Angel says:

    Woo, awesome demo.
    Loved the Selection modes you’ve implemented there (horizontal, vertical or both). It shows a lot of real-world insight.

    Excellent work on this one, keep it up!

    — Justin Angel
    Microsoft Silverlight Program Manager

  2. Steve Crane says:

    Nice control. It will come in handy for something I’m working on. As I will be selecting a date & time range I didn’t want the dimension indicators so I’ve added a property to allow them to be hidden. I’m considering adding a callback mechanism that the hosting app could use to convert those indicators into something more suitable to the application context.

  3. Leakybagel says:

    Excellent! I was just trying to do the same thing yesterday and couldn’t figure out the rectangle scaling.

  4. Pingback: linkfeedr » Blog Archive » Silverlight: DragSelect component - RSS Indexer (beta)

  5. Do you have any examples of using your control in a Silverlight 2 graph (with many lineseries for example) ?

    Thanks !

  6. shemesh says:

    Thomas hi,
    this will depend on which chart you’re working with.
    in my case we are using Visifire (which is far from being a preferred choice of mine).
    basically what you have to do is after you get the pixels of the selected region you need to convert them to data values and manipulate the chart data.
    (in case of Visifire things are not so obvious, i pushed my DragSelect inside the chart template)

  7. Hi Shemesh,

    I’ve managed to achieve what want: thanks a lot !

    BTW, I’m using the “standards” SL 2 Charts 🙂

  8. Hi Shemesh,

    Any idea on how the Drag&Drop feature could be implemented on your control ? (eg: the ability to drag & drop the Selected area :))

    Thanks !

    • shemesh says:

      Thomas,
      you want to drag the whole area inside?
      but what do you have inside? image? chart? else?

  9. shemesh,

    I want to be able to drag the area (the control/rectangle named selectedArea) inside the control to allow the user to define the area he want and then allow him to move this area.

    I’m using your control with an image as a background and I want to give my users the possibility to select an area, on the image (this part works fine) and then, to move this selected area.

    Thanks !

    • shemesh says:

      as i understand you want to be able to move the already selected area to some other X/Y coordinates.
      wouldn’t be to hard (i’ll do it if i’ll find some time).

      listen to a mouse-down event on the selected area, upon mouse-down add a mouse-move listener. on mouse-down note the X/Y mouse coordinates, on mouse-move calculate the delta between the current mouse X/Y and the initial coordinates.
      now apply the same delta to the selected area.
      hope this help.

      • I’ve managed to achieve my result but I’ve a strange behavior: when I’m on the bound of the area, my selectedArea seems to be block…

        It could be cool if you could get some time to improve your sample 🙂

        Thanks !

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: