A couple of weeks ago I got a task at the office to build a module for Windows UWP App which can be used by the user to drag and drop data from a ListView control to a grid control. This data then can be moved from one Grid to another Grid and it will changes some information inside this element.

What Will You Learn Today?

• Creating a class of Trichar: a fictive being that lives in land faraway named Khaland.
• Populating ListView with a list of Trichar characters
• Customizing Windows 10 Drag UI
• Showing data from the object that’s got dragged
• Project file can be found on my GitHub

From Click and Tap to Drag and Drop

As a UX Developer at a pretty small company. I tried to create a concept that I knew I could develop without having to break a sweat. But I knew this will leave a bad taste in my boss’ mouth if I keep serving mediocrity at work. Furthermore what would my fellow co-workers say if they see I only play it safe. Thus, I grabbed my pencil and drew my concept module on paper, gave it to my boss, it got approved, then my fingers began to dance on the keyboard.

Three Important Events

As we may know UWP controls are not perfect. They tend to make us sitting in front of the monitor longer than it should since only a small number of people develop UWP. What you can do is only scrolling Windows Development Center webpage and hope for the best.

This is where other developers come to play. Technology can’t thrive if you keep everything to yourself. Start sharing your work, create a GitHub account and start contributing. Or you can write your experience and provide some tips and tricks, like what I am doing right now.

I personally only use these three events for my project since they already provide functions that my UWP app need:
– DragStarting
– DragOver
– Dropped

Make UWP Control Draggable Using DragStartsting

This event will let the user drag the control and its children. I use this event to create a copy of data that is hold by the control since I want this data to be moved into a Grid control. Of course here you can also write another function that you need such as data manipulation, UI update, etc.

Allow UWP Control To Accept Dragged Element Using DragOver and Dropped

From my experience UWP control has to have these two events in order to accept any dragged data that is dropped on top of it. The DragOver event is basically to open the door, and the Dropped even is to pick up and access whatever data sealed in the package.

The Drag and Drop Function Trinity In Action

To make everything clearer here I provide the example which you can also find on my GitHub page. I also provide comments through out the code because documentation is essential, guys!

 
        ////////////////////////////////////////////////////////////////////////////////////////////////////
        /// <summary>   Event handler. Called when the drag is starting. 
        ///             Character information will be 'copied'. </summary>
        ///
        ///
        /// <param name="sender">   Source of the event. </param>
        /// <param name="e">        Drag items starting event information. </param>
        ////////////////////////////////////////////////////////////////////////////////////////////////////

        private void CharacterItem_DragStarting(object sender, DragItemsStartingEventArgs e)
        {
            e.Data.RequestedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.Copy;
            if (e.Items != null && e.Items.Any())
            {
                e.Data.Properties.Add("item", e.Items.FirstOrDefault());
            }
        }

 
        private void GridDestination_DragOver(object sender, Windows.UI.Xaml.DragEventArgs e)
        {
            try
            {
                if (e.DataView?.Properties?.FirstOrDefault().Value?.GetType() == typeof(TriChar))
                {
                    e.AcceptedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.Copy;
                    try
                    {
                        //Drag UI will be replaced with Drag Icon and Character's name that we are dragging
                        e.DragUIOverride.Caption = "\U0001F91A" + " " + ((TriChar)(e.DataView?.Properties?.FirstOrDefault().Value)).Name;
                        e.DragUIOverride.IsGlyphVisible = false;
                    }catch(Exception ex)
                    {return;}
                    return;
                }
            }
            catch
            {
                e.AcceptedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.None;
            }
        }

 
        private void GridDestination_DragDrop(object sender, Windows.UI.Xaml.DragEventArgs e)
        {
            var item = e.DataView.Properties.FirstOrDefault(x => x.Key == "item");
            if (item.Value?.GetType() == typeof(TriChar))
            {
                // Platform Grid will now show information about the character that you have dragged
                var droppedChar = (TriChar)item.Value;
                PlatformText.Text = droppedChar.Skill;
                PlatformIcon.Glyph = droppedChar.Symbolic;
                CharacterListView.SelectedItem = droppedChar;
            }
            else
                return;
        }