1
Vote

Blurring of Images during Drag and Drop

description

Certain elements can become blurred during a drag and drop operation, see the thread:

Try dragging a picture card (J, Q or K) to see it more clearly though the blurring is on every card dragged. As soon as you start to drag a card or cards, the drag stack becomes slightly blurry. When you drop the card(s) go back to sharp. It appears to be an anti-aliasing thing. I've looked at the code and xaml and cannot figure out why. I thought that setting SnapsToDevicePixels to True on the view/grid/card stack control would work but it doesn't. Any ideas?

Brian

Hi Brian,

Blurriness is a pretty common bugbear for WPF or Silverlight applications.

Trying the SnapsToDevicePixels is a good approach for dealing with this - typically the blurring occurs when an image or text is rendered at a position that isn't an integer number of pixels (i.e. rendering at (1.001, 1.001) will be noticeably blurred, rendering at (1.000, 1.000) will not be.

I've been playing with the application again and you're indeed right. I think however that this issue will actually will need to be solved at a lower level, in the Apex library. The cards themselves aren't being rendered when you drag them - an image of them is being rendered on a canvas that is hosted internally in the Apex DragAndDropHost.

The DragAndDrop host will need to be updated to optionally force the placement of the drag and drop image at absolute pixel values. I'll create a work item on the Apex page (apex.codeplex.com) and look at it soon.

However, if you're low on time, then you could try downloading the Apex source code, going to the drag and drop host, handling the mouse move and rendering at an absolutely position.

However - this is a best guess at the moment - until I start debugging and check the source code, I can't be sure this is the issue - just a hunch

Dave,
I did download the Apex source and played around with it. There is a sample app for drag and drop and I added images to the sample each with various scaling. It appears to be related to images that are scaled. When the sample is run the images appear fine (i.e. scaled images are antialiased) when viewing them in the window. When I drag them the scaled images gets blurry. For the images that were not scaled (i.e. 100% zoom) they did not exhibit any blurriness when dragged. Still not sure if the Apex drag code or WPF is blurring the Apex adornerLayer but it appears to me that it has nothing to do with SnapsToDevicePixels or EdgeMode as changing those had no effect. My guess is the drag adorner is not rendered as an antialiased bitmap but still can't figure out how WPF renders images antialiased but Apex drag and drop does not.

Brian

comments