Photoviewer part 4 - Drag and drop

The photoviewer application is getting closer to a version 1.0 release and I'm anctious to get it all done. The list of TODO items is stable now and will soon start to drop towards zero. In this 4th part I want to show a little about the new drag and drop feature I added to the collage view.

Idea behind the feature

There are quite a few demos available on the net that show how to build a Microsoft surface like interface with pictures and they all look pretty cool. They aren't quite the real thing and aren't all that usable in applications. However the demos sparked an idea that lead to the development of the collage view, which until today wasn't too interactive. You can select photos and that's about it.

What I wanted to do with the view was to make it possible to move your pictures around on the screen and be able to select and view details about each photo in the pile. I just finished the last part of this process by adding a final touch to the drag and drop feature.

Implementation details

The collage view itself is pretty simple, the skin is completely done in XAML so the code is kept clean. Adding the drag and drop feature proofed to be really simple and was done in two basic steps.

First I added a MouseDown, MouseUp and MouseMove handler that take care of the actual drag and drop operation. I could have gone with a DragMove operation, but the drag operations in WPF cause mouse move events to stop firing. I need those events to do another cool trick, so I went with these.

The second step is actually quite complex, I created a DragAdorner control which draws a semi transparent version of the photo thumbnail on the adorner layer of the window. This is the layer that is on top of all the controls in the form. The adorner will move with the photo as it is dragged around.

To create the adorner I made a visual copy of the photo in the constructor using the following fragment:

VisualBrush brush = new VisualBrush(element);
_visual = new Rectangle();

_visual.Width = element.RenderSize.Width;
_visual.Height = element.RenderSize.Height;
_visual.Fill = brush;
_visual.Opacity = 0.6;

You can check out the code on codeplex and reuse it if you like. The DragAdorner is very generic and can be used in a wide range of drag and drop scenarios.

Other changes in the current drop

I haven't made a release for this drop, as the skin for the application is too mangled to call it beta worthy. However I did manage to put in a few other things that weren't there before.

1. I've Added a way to print a whole album and individual photos. It's pretty rough at this moment, but you will get a pretty good idea of where I'm heading with that. I will write a blogpost later on about printing in WPF. Printing can be tricky and I think it's good to see some solutions to common problems.
2. The application skin has been updated. I got rid of the other skin, because the color combination wasn't all that. The skin still isn't complete and I need to change a few things to be able to skin the various dialogboxes.
3. The custom window implementation contained a few things that were focusable that shouldn't be focusable. I changed this and the window should react more natural now.

Download

The changes that I talked about here can only be downloaded as source. You can contact me for questions about compiling the source as the source may not compile on every client right away.

The source code can be downloaded from: http://www.codeplex.com/photoviewer

Share this