UWP Development, Drag and Drop Events

In Universal Windows Platform (UWP) development, drag and drop events are one of the key features that enhance user interface (UI) interaction. This technology allows users to easily perform various types of interactions, such as moving, adding, or removing objects within the program.

Basics of Drag and Drop Events

Drag and drop involves the action of the user pressing a mouse button to select a specific object, moving it to another location, and then releasing the mouse button. The events that occur during this process can be broadly divided into three types:

  • DragStarting: Occurs when the drag starts.
  • Drop: Occurs when the dragged object is placed at the target location.
  • DragOver: Occurs when the dragged object moves over another object.

Implementing Drag and Drop in UWP

Now let’s look at how to implement drag and drop functionality in a UWP application.

1. Basic Setup

Create a UWP application and open the XAML file to define the UI elements where drag and drop will be applied. Below is an example that includes a Grid and a ListView:

<Page
    x:Class="MyApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <ListView x:Name="MyListView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" 
                               AllowDrop="True" 
                               DragItemsStarting="MyListView_DragItemsStarting" 
                               Drop="MyListView_Drop" 
                               DragOver="MyListView_DragOver"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

2. Handling the Drag Start Event

To handle the event when dragging starts in the list view, implement the DragItemsStarting event handler in C# code. This handler sets the information for the dragged item.

private void MyListView_DragItemsStarting(object sender, DragItemsStartingEventArgs e)
{
    e.Data.SetText(e.Items[0].ToString());
    e.Data.RequestedOperation = DataPackageOperation.Move;
}

3. Handling the Drag Over Event

To handle the event when the dragged object moves over another location, implement the DragOver event handler. This handler checks whether dropping is possible.

private void MyListView_DragOver(object sender, DragEventArgs e)
{
    if (e.Data.ContainsText())
    {
        e.AcceptedOperation = DataPackageOperation.Move;
    }
    else
    {
        e.AcceptedOperation = DataPackageOperation.None;
    }
}

4. Handling the Drop Event

Finally, implement the Drop event handler to handle the drop event. Here, the logic to add the dropped item to the list view is written.

private void MyListView_Drop(object sender, DragEventArgs e)
{
    if (e.Data.ContainsText())
    {
        string droppedData = await e.Data.GetTextAsync();
        // Add the dropped item to the list
        myItems.Add(droppedData);
    }
}

Example: Image Drag and Drop

Based on what we just learned, let’s create an example that allows users to drag and drop image files. This example implements the feature for users to add images to the list by dragging.

UI Setup

<Grid>
    <Image x:Name="MyImage" 
           AllowDrop="True" 
           Drop="Image_Drop" 
           DragOver="Image_DragOver" 
           Source="Assets/placeholder.png" />
</Grid>

Implementing Event Handlers

Modify the previously explained drag over and drop event handlers to fit the image.

private async void Image_Drop(object sender, DragEventArgs e)
{
    if (e.Data.ContainsFile())
    {
        var files = await e.Data.GetStorageFilesAsync();
        // Display the file as an image
        var file = files.First();
        var bitmap = new BitmapImage();
        bitmap.SetSource(await file.OpenAsync(FileAccessMode.Read));
        MyImage.Source = bitmap;
    }
}

Drag Over Response

private void Image_DragOver(object sender, DragEventArgs e)
{
    if (e.Data.ContainsFile())
    {
        e.AcceptedOperation = DataPackageOperation.Copy;
    }
    else
    {
        e.AcceptedOperation = DataPackageOperation.None;
    }
}

Utilizing Drag and Drop

Drag and drop functionality can be utilized in various fields. For example:

  • Changing the priority of task items in task management applications.
  • Changing the location of files in file management applications.
  • Manipulating multiple images in image editing applications.

Conclusion

Drag and drop events are a simple yet powerful technology that can greatly enhance the user experience of UWP applications. They can be implemented in suitable ways for different environments and make interactions with users more natural and intuitive. Utilizing these features allows for the development of more attractive and useful applications.

References