Surface project - part 15 (Major Demo - Rich Media Map - Drag&Drop)

For this major demo, the supervisors want to let user rearrange the index of the media in the push pin panel. Thus user can drag and drop the media on top of another media so that the position of the media changed. Although drag and drop is not a fancy stuff in today's programming world, there are still some notable aspects which make the implementation in Surface not that easy.

Problem 1

As I put the media in a list box, the touch down event would be fired by the list box at first, then the event will route up and down. However, if I implement to capture the touch down event to start a drag action then I will encounter an annoying but unavoidable problem, the user cannot scroll or touch any part inside each media component. There is an solution provided by MSDN, although it is not perfect, but still acceptable. The application will let user to start a drag action when user put at least 2 fingers on the element. After that they can user one finger instead.

Problem 2

The supervisors want the dragging element under finger will have the same appearance compare to the original element. As the media components are composited with mangy controls, thus it will cost a lot to duplicate the whole media component. WPF provides RenderTargetBitmap as an solution to achieve the same result by displaying an image which snaps the visual tree.

 public Image DragSourceCopy()
        {
            Size dpi = new Size(96, 96);
            RenderTargetBitmap bmp =
              new RenderTargetBitmap((int)(this.DesiredSize.Width), (int)(this.DesiredSize.Height),
                dpi.Width, dpi.Height, PixelFormats.Pbgra32);

            bmp.Render(this);
            JpegBitmapEncoder encoder = new JpegBitmapEncoder();
            encoder.Frames.Add(BitmapFrame.Create(bmp));
            Image image = new Image();
            image.Source = encoder.Frames[0];
            return image;
        }

By using the above piece of code, you can make a copy image of the whole component, no matter it is a video, image or text media. After tests, the DesiredSize records the correct width and height of the component shown on the screen.

Following snaps show the drag drop action to rearrange the media in push pin panel

After drop, the index of the element changed.