How do I style the DragAndDrop adorner for Windows Universal Apps

Windows 10 adds support for dragging and dropping content into Universal Windows Apps. This is a feature that was previously only available to Classic Windows Apps (think WPF or WinForms). To get started with Drag/Drop support on your universal app, take a look at this excellent video: https://channel9.msdn.com/Series/A-Developers-Guide-to-Windows-10/22?wt.mc_id=player. Andy talks about drag/drop about 30 minutes in.

Drag/drop is great, but a question came up recently thanks to Lance McCarthy. How does one control the icon and text that shows up as a user is dragging an item into a universal app? Well, I reached out to some folks on the team with that question and the answer proved useful for Lance. That got me thinking. Maybe it would be useful to have that information up here as well 🙂 So here goes.

The icon (named “glyph” in the API) part of the Drag and Drop feedback cannot be customized:
• when the cursor is not over a drop target, the glyph indicates that no operation will take place if the user releases the pointer
• when the cursor is above a drop target, the drop target can hide the glyph by setting IsGlyphVisible=False on the DragUIOverride member of the event args (see https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.drageventargs.draguioverride.aspx) but the glyph’s shape is hard-coded and depends on the AcceptedOperation returned by the target (Copy, Move, Link or None)

So there you have it. The shape of the glyph while it’s NOT over a drop target can’t be controlled. I would expect that because Windows doesn’t know what to do with the dragged content yet. But once it’s over a target, it can use the API described above to mess around with the glyph. I hope this helps you if you’ve been looking for more details on drag/drop in Windows 10.

Happy hacking!

@aruntalkstech

Advertisements

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