Change DragVisual while Dragging

[Michel]

Hi,

I'm using the DragDropManager, and it works quite fine, but I cannot seem to figure out how to change a DragVisual while Dragging.

the thing is, I have 2 different Dragging methods on an itemsControl : "internal" and "external".

• For the "internal" one (i.e.: dragging one item around inside the itemsControl, like you do in your TileList), I'm setting the visual in the Draginitialize and it's fine.

• but for the external one, I have a dragged object entering the itemsControl with its own dragVisual (and it should), then in the DragEnter handler, I do a few things (which work well) and I change the DragVisual, except... I cannot. I have not found a way to change the dragVisual in this handler.

how should I do this, using the DragDropManager ? (I have also looked at the other handlers, but the only one I can find something about the visual is the DragInitialize handler, and it is not fired, since the dragged object does not come from inside the itemsControl)

thanks

[Nick]

Hello Thierry,

The only way to modify the DragVisual is to save a reference to it in the DragInitialize event and use it later to modify it as you like. 

Hope this helps! 

Regards,
Nik
Telerik

[Michel]

hi Nik,

thank you for the answer. I tried what you suggested, but to no avail.
I cannot seem to find a way to do this.

[Nick]

Hello Thierry,

What is the step you are not able to achieve? Can you share your efforts so far so I can be able to point you in the right direction?

Thank you in advance! 

Regards,
Nik
Telerik

[Michel]

Hi nik.

here is what I am trying to achieve :

I have basically replicated your TileList control (which works perfectly fine), and am now trying to add a functionality to allow the user to add tiles to the tileList with a simple drag and drop.

so  my screen is divided in 2 :

1. TileList
2. Tile pool : a simple list with "tiles" that I can drag to the tile list.

My issue is : the "tiles" I drag from the tile pool are "default tiles" (no size, no background color, etc... just simple squares as layout)
Now, when one of those tiles comes over the tileList, I would like the visual to switch to the exact visual the tile would have if I dropped it there.

Is easy enough to get this visual, but I am at a lost on how to apply it as DragVisual.

the ultimate goal here is to be able to drag almost anything from anywhere on to the tileList (this I already have done) with the visual being the right one when the dragged object is over the tileList (this is where I have trouble)

i use telerik's DragDropManager to set up my drag & drop, but the DragVisual property is only available in the Draginitialize event, not the DragEnter or DragLeave, and I have found no way to set this DragVisual anywhere but in the Draginitialize

[Yoan]

Hi Thierry,

Indeed, the idea is to cache the DragVisual in the DragInitialize event and update it in the DragOver/Enter/Leave events. 

Let me try to explain further:

Using our DragDropManager you can subscribe to the DragInitialize event. In its event handler you are allowed to set any UIElement or a DataTemplate (defined in your XAML) to the e.DragVisual property. When setting it you can save a reference to it like this:

private var dragVisualLabel;

private void OnDragInitialize(object sender, DragInitializeEventArgs args)

        {

             

            this.dragVisualLabel = new Label() { Content = SomeContent, Background = new SolidColorBrush(Colors.Green) };

        args.DragVisual = this.dragVisualLabel;

        } 

By doing so you will be able to modify your visual later:

private void OnGiveFeedback(object sender, Telerik.Windows.DragDrop.GiveFeedbackEventArgs args)
        {
            if (args.Effects == DragDropEffects.Move)
            {
                args.UseDefaultCursors = false;
                args.SetCursor(Cursors.Hand);
                this.dragVisualLabel.Background = new SolidColorBrush(Colors.Yellow);
            }
            else if (args.Effects == DragDropEffects.None)
            {
                args.UseDefaultCursors = false;
                args.SetCursor(Cursors.None);
                this.dragVisualLabel.Background = new SolidColorBrush (Colors.Red);
            }
            else
            {
                args.UseDefaultCursors = true;
                this.dragVisualLabel.Background = new SolidColorBrush(Colors.Green);
            }

            args.Handled = true;
        }

Please check this help article and this online demo for a reference. You can find the same example in you local copy of WPF demos.

I hope this helps.

Regards,
Yoan
Telerik

[Michel]

This helped ! :-)

problem solved, thanks a lot

(though I must add that this would not be possible, would I want to drag/drop between 2 different instances of the app. An easy access to the dragVisual in the other dragEvent functions would still be nice)