Drag from App to Desktop

[Matthew]

I am using WPF MVVM and having some trouble dragging an image from my application to the desktop. Any time I drag outside of the application the DragStatus becomes DragStatus.Cancel.

What am I doing wrong? I can post the relative code if this is not a simple thing.

[Nick]

Hi Matthew,

Would it be possible to share some more information about the exact implementation of the DragDrop scenario? 
Also may I advice you to check our DragDropPayloadManager which enables manipulations of data objects that can be used in drag drop operations between multiple aplications. 

Kind regards,
Nik
the Telerik team

[Matthew]

I am using WPF MVVM. I want to drag an image from a Grid Layout to the desktop and save the file on the desktop, or whatever folder the user chooses. The image is in <image> format. I am getting the results I want, in that a messagebox pops up showing me the file name when I drag to the desktop (Which is intended) but it only files if I look for the drag cancel status, not drag complete. I have native mode enabled, but I get a null destination and a cancel when I drag outside of my application.

[Nick]

Hello Matthew,

Unfortunately there isn't a way to get the Destination. Mind that once you go out of your application, you don't know about the visual tree of anything you are dragging over. Therefore since the RadDragAndDropManager counts on the VisualTree to define its source and destination. 

For the Cancel status. The issue could be occurring if you are dragging just an image, while in native drag it's always more appropriate to use DataObjects. However this is just a speculation and I cannot say anything with certainty before I see the event implementation of the scenario.

Hope this helps! 

Regards,
Nik
the Telerik team

[Matthew]

Here are the parts of my implementation. The ultimate goal is to save the image (Preferably the source file) to the destination (desktop or Windows Explorer folder)

View:

<Image

                    x:Name="recordImage"

                    Width="500"

                    VerticalAlignment="Top"

                    Source="{Binding SelectedItem.imageLocation}"

                    t:RadDragAndDropManager.AllowDrag="True"

                    t:RadDragAndDropManager.AutoDrag="True">

                    <i:Interaction.Triggers>

                        <local:DragQueryRoutedEventTrigger

                            EventName="DragQuery"

                            EventOwnerType="{x:Type t:RadDragAndDropManager}">

                            <cmd:EventToCommand

                                Command="{Binding DragQueryCommand, Mode=OneWay}"

                                PassEventArgsToCommand="True" />

                        </local:DragQueryRoutedEventTrigger>

                        <local:DragInfoRoutedEventTrigger

                            EventName="DragInfo"

                            EventOwnerType="{x:Type t:RadDragAndDropManager}">

                            <cmd:EventToCommand

                                Command="{Binding DragInfoCommand, Mode=OneWay}"

                                PassEventArgsToCommand="True" />

                        </local:DragInfoRoutedEventTrigger>

                            <!--<i:EventTrigger

                            EventName="MouseDown">

                            <cmd:EventToCommand

                                Command="{Binding ViewImageCommand}" />

                        </i:EventTrigger>-->

                    </i:Interaction.Triggers>

                </Image>

ViewModel:

public ICommand DragInfoCommand { get { return new RelayCommand<Telerik.Windows.Controls.DragDrop.DragDropEventArgs>((e) => OnDragInfo(e)); } }
        public ICommand DragQueryCommand { get { return new RelayCommand<Telerik.Windows.Controls.DragDrop.DragDropQueryEventArgs>((e) => OnDragQuery(e)); } }

private static void OnDragInfo(Telerik.Windows.Controls.DragDrop.DragDropEventArgs e)
        {
            if (e.Options.Status == DragStatus.DragCancel)
            {

                if (e.Options.DropDataObject == null)
                {
                    e.Options.DropDataObject = new DataObject(e.Source);
                    MessageBox.Show(e.Options.DropDataObject.ToString());
                }
            }

        }

        private static void OnDragQuery(Telerik.Windows.Controls.DragDrop.DragDropQueryEventArgs e)
        {
            if (e.Options.Status == DragStatus.DragQuery)
            {
                e.Options.Payload = e.Source;
            }
            e.QueryResult = true;
        }

[Nick]

Hi Matthew,

The problem is in the DataObject that you give to the Paylod in the operation. The problem resides in the interapplication transfer of objects implementation. You have to use the SetDropFileList method of the DataObject.

Here is how I was able to achieve the behavior:

private void OnDragQuery(object sender, DragDropQueryEventArgs e)
{
    var payload = new DataObject();
    StringCollection strColl = new StringCollection();
    strColl.Add(@"..\..\test.jpg");
    payload.SetFileDropList(strColl);

    e.QueryResult = true;
    e.Options.DragCue = new DragVisual()
    {
        Content = new Image() { Source = this.Image.Source, MaxHeight = 100 }
    };
    e.Options.Payload = payload;

    e.Options.Effects = DragDropEffects.Copy;
}

Hope this helps!  All the best,
Nik
the Telerik team

[Matthew]

We are getting closer for sure. When I drag the image outside of the application it gives me the can't copy icon. Also, using the MVVM pattern (Which we are violating a little because of the UI awareness in the VM) how do I set up my RelayCommand to use the sender, eventargs signature. And is the Sender necessary if we are not accessing it?

VM:

public ICommand DragQueryCommand { get { return new RelayCommand<Telerik.Windows.Controls.DragDrop.DragDropQueryEventArgs>((e) => OnDragQuery(e)); } }

        private void OnDragQuery(DragDropQueryEventArgs e)
        {
            var payload = new DataObject();
            StringCollection strColl = new StringCollection();
            strColl.Add(SelectedItem.imageLocation);
            payload.SetFileDropList(strColl);
            e.QueryResult = true;
            e.Options.Payload = payload;
            e.Options.Effects = DragDropEffects.Copy;
        }

[Nick]

Hello Matthew,

Actually you don't need the sender in the ViewModel. You can access the source element from the Options in the EventArgs. 

As to the No-Copy sign, could you specify what exactly do you mean by that?

Looking forward to hearing from you. 

Kind regards,
Nik
the Telerik team

[Matthew]

When I get the dragged item off of the application the cursor turns into the circle with the line through it. Whenever I release the mouse after dragging the item, I get a cancel status whether I drop the item on the application or on the desktop.

[Matthew]

In the end I need to know to save an image to the desktop by dragging it from my WPF application. The image is draggable, the cues are working, everything seems fine, the question is, what events do I need and what do they need to look like?

This is my dragquery:

private void OnDragQuery(DragDropQueryEventArgs e)
        {
            var payload = new DataObject();
            Image saveImage = e.Options.Source as Image;
            StringCollection strColl = new StringCollection();
            strColl.Add(saveImage.Source.ToString());
            payload.SetFileDropList(strColl);
            e.QueryResult = true;
            e.Options.Payload = payload;
            e.Options.Effects = DragDropEffects.Copy;
        }

Where do I get the destination to save the image file and where do I put the Save Logic? This is simply saving a single image (From file) to the desktop from my application.

[Lancelot]

Hi Matthew,

DragDropManager has events that you can subscribe to. You can find that list here. You may find the DragInfo handler useful. You can search for a DragCompleted status, if it returns true, then apply your save logic.

Good Luck,
Lancelot

[Nick]

Hello Matthew,

As Lancelot said, the proper place to listen for the event would be the DragInfo event with a status of DragComplete. 
The thing is that this would be the approach in a scenario where the Drag and Drop operations are limited to one application. In your case however, the situation requires some extra efforts to achieve the behavior that you desire. The problem is that you have hit a limitation of the RadDragAndDropManager, and the best advice I can give you is to use the DragDropManager instead. 

Now on how to implement the scenario with RadDragAndDropManager. If you don't need to handle the DragCancel status in the event explicitly, everything should work  fine as it is. If you have to execute some custom logic in those cases however, you will have to be aware of the current element you are dragging over, or if you are still somewhere over your application at all. You can use the DropQuery event to do that, and cache the last destination over which you have been dragging. The problem here is again related to the RadDragAndDropmanager, since it does not give the means to determine when the drag has left a certain destination. At best, if you have to handle the Cancel status, the best way to do it would be the DropInfo event with status DropCancel. 

As to the problem with the native drop, check if the path of the image is the correct one, and if the applications permissions are sufficient to execute such operations. 

Kind regards,
Nik
the Telerik team