WIN10/UWP new features-drag&drop drag out elements to other apps

In previous articles, Microsoft's new feature, Drag&drop, was probably due to the Win10 preview, and the use of VS was a preview, only to drag and drop files from the desktop to the UWP app, without the ability to drag elements from the UWP to the desktop app & UWP The app. Yesterday re-examined the Win10 dragged this piece, found that previously failed to achieve the function, in the official version of the environment can be achieved, make a note in case you forget later.

In the UWP, if you want to drag an element into desktop or another UWP app, in addition to setting the element's candrag= "True" We want to use the element's Dragstarting event, the Candrag property setting element can be dragged, In the Dragstarting event, we can prepare data for dragging, change the UI when dragging, and so on.

We still use the example in the previous Drag&drop article to add an IMG element at the bottom, set as follows:

1 < Image   x:name = "img" 2         candrag= "True"3        Source= "assets/i Am 1%.jpg"4          dragstarting= "image_dragstarting"/>

We're going to use the Dragstartingeventargs parameter of the event, where we can change the UI settings for dragging the data we want to drag, and there are several important properties and methods:

<!--/* Many types of data can be set in Dragstartingeventargs.data: public void SetBitmap (randomaccessstreamreference value); Sets the bitmap image contained in the DataPackage. public void SetData (System.String FormatID, [hasvariant] System.Object value); Sets the data contained in the DataPackage in the Randomaccessstream format. public void Sethtmlformat (System.String value); Add HTML content to DataPackage. public void Setrtf (System.String value); The settings DataPackage contains rich Text format content. public void Setstorageitems (ienumerable<istorageitem> value); Set storage object public void Setstorageitems (ienumerable<istorageitem> value, System.Boolean readOnly); Set storage Object Read-only mode public void SetText (System.String value); Sets the text contained in the DataPackage. public void Seturi (Uri value); Set a URI public void Setweblink (Uri value); Sets an weblink//setting icon args when dragging. Dragui.setcontentfrombitmapimage set a bitmap picture args. Dragui.setcontentfromdAtapackage (); Set data from Drag Note: If you drag an element into another UWP app (recipient) after the drag source has set the appropriate data type, the recipient needs to                 The data can be fetched based on the corresponding data type, and if the data type is not determined, it is possible to use the Dataview.contains (Standarddataformats formats) method of the DragEventArgs parameter to determine whether a data type is included Then take out, no judgment directly forced out, if the type mismatch receiver will error */ -

We handle the following drag in the Dragstarting event:

Private Async voidimage_dragstarting (UIElement sender, Dragstartingeventargs args) {//sets the icon from the data when the preview is draggedargs.     Dragui.setcontentfromdatapackage (); //set a picture to replace the icon when dragging//args. Dragui.setcontentfrombitmapimage (New BitmapImage (The new Uri ("MS-APPX:///assets/data-export.png "))     {decodepixelwidth = Decodepixelheight =},new point (0,0)); //Drag the behavior here, select Copy Note, if you select Move, the source file will be deleted when the drag is completeArgs. Data.requestedoperation =datapackageoperation.copy; /*  Many types of data can be set in Dragstartingeventargs.data: public void SetBitmap (randomaccessstreamreference value);     Sets the bitmap image contained in the DataPackage. public void SetData (System.String FormatID, [hasvariant] System.Object value);     Sets the data contained in the DataPackage in the Randomaccessstream format. public void Sethtmlformat (System.String value);       Add HTML content to DataPackage. public void Setrtf (System.String value); The settings DataPackage contains rich Text format content. public void Setstorageitems (ienumerable<istorageitem> value);        Set storage object public void Setstorageitems (ienumerable<istorageitem> value, System.Boolean readOnly); Set storage object read-only mode  public void SetText (System.String value);     Sets the text contained in the DataPackage. public void Seturi (Uri value);     Set a URI public void Setweblink (Uri value); Set a weblink note: After the drag source has set the appropriate data type, if you drag the element into another UWP app (receiver), the recipient needs to be able to extract the data based on the corresponding data type, and if you are unsure of the data type you can use the DR The Dataview.contains (Standarddataformats formats) method of the Ageventargs parameter determines whetherContains some type of data and then takes out, without judging the direct force out, if the type mismatch receiver will be an error     */      //set drag data to add some storageitems, here to take some img pictures, these pictures will be copied to the drag target//If you drag to the Desktop folder, copy the file to the folder    varfolder =awaitPackage.Current.InstalledLocation.GetFolderAsync (@"IMGs"); Args. Data.setstorageitems (awaitfolder.     Getfilesasync ()); //Set Bitmap Data    varSF =awaitPackage.Current.InstalledLocation.GetFileAsync (@"assets\i Am 1%.jpg"); Args. Data.setbitmap (Randomaccessstreamreference.createfromfile (SF));}

Above we set up altogether two kinds of data, the first kind is through the args. The Data.setstorageitems () method assigns the picture under the specified folder to drag data, and the second passes us through args. The Data.setbitmap () method sets a picture to the bitmap of data.

When used, when we drag an element into another app (receiver), we need to get the data according to the data type specified above.

Next we create a new UWP App (recipient), place a ListView on the interface, set the acceptable drag data, and subscribe to the relevant drag events as follows:

1 <Gridx:name= "Maingrid"  2 AllowDrop= "True"   3 Drop= "Vcborder_drop"4 DragOver= "Vcborder_dragover"5 Background="{ThemeResource Applicationpagebackgroundthemebrush}">6     <ListViewMargin= "8"x:name= "Imglist"/>7 </Grid>

The function we want to implement is to drag elements from an app into the app, drag to get the drag data (a set of pictures and a bitmap object), get the picture to add to the ListView, and get the bitmap object to assign the background color of the grid container.

In the DragOver event, we can change the UI appearance when dragging elements into the target range, customizing the following:

1 Private voidVcborder_dragover (Objectsender, DragEventArgs e)2 {3Debug.WriteLine ("[Info] DragOver");4     //Set Operation type5E.acceptedoperation =datapackageoperation.copy;6  7     //Set Prompt Text8E.draguioverride.caption ="drag and drop here to add a file O (^▽^) o";9}

In the drop event we handle the logic of the drag completion, as follows:

1 Private Async voidVcborder_drop (Objectsender, DragEventArgs e)2 {3     /*4 The receiving end can be based on E. Dataview.contains (Standarddataformats formats) to determine whether a data type is contained in the dragged data .5 If the data type does not match, then the error will be taken.6     */7     if(E.dataview.contains (standarddataformats.storageitems))8     {9         //Get Storage ObjectTen         varItems =awaitE.dataview.getstorageitemsasync (); One   A         //consultation whether to accept the document -         varDialog =NewContentdialog -         { theTitle ="Tips", -Content =NewTextBlock {Text = $"drag from other apps to {items. Count} files, do you accept? "}, -isprimarybuttonenabled =true, -issecondarybuttonenabled =true, +Primarybuttontext ="Ok", -Secondarybuttontext ="Cancel" +         }; ADialog. Primarybuttonclick + =Async(S, a) = = at         { -             //start accepting files and adding them to imglist, or you can do other things, such as saving files to the app -             //filter files, only JPG files -             foreach(varIteminchItems. Oftype<storagefile>() -. Where (i = i.filetype.equals (". jpg")). ToList ()) -             { in                 varBitmapImage =NewBitmapImage (); -                 awaitBitmapimage.setsourceasync (awaititem. OpenAsync (Fileaccessmode.read)); toImglist.items?. ADD (NewImage {Source =bitmapImage}); +             } -         }; theDialog. Secondarybuttonclick + = (s, a) = ={dialog. Hide (); }; *         awaitdialog. Showasync (); $     }Panax Notoginseng   -     if(E.dataview.contains (standarddataformats.bitmap)) the     { +         //Get Bitmap Object A         varItems =awaitE.dataview.getbitmapasync (); the         varBitmap =NewBitmapImage (); +         awaitBitmap. Setsourceasync (awaititems. OpenReadAsync ()); -         //set Maingrid background picture $Maingrid.background =NewImageBrush {ImageSource =bitmap}; $     } -}

For more drop Event &dragover Event Detail settings Please participate in article: Uwp/win10 new feature series-drag&drop drag to open file

This allows us to drag elements from one uwp into other apps, such as dragging into a folder to quickly save pictures, dragging into Outlook to quickly insert attachments, dragging pictures to another app, and more.

：

Recommend a UWP development group: 53078485 You can come in and study together.

WIN10/UWP new features-drag&drop drag out elements to other apps