WPF Drag & Drop: How to literally drag an element?

Question

Say I have a ListBox with some items and say I implement drag and drop functionality for that list. If I want to drag an item from that list box, how can I actually move the dragged item?

I want to achieve the effect of having the list box item under my mouse cursor and to be able to move with it as I drag it on the window. By following this example, all I get is a cursor change based on the DragDropEffects enum choice.

Answer 1

Resize.Xaml:

<UserControl x:Class="ERDesign.Resize"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:ERDesign="clr-namespace:ERDesign"
         mc:Ignorable="d"
         d:DesignHeight="50" d:DesignWidth="150" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <UserControl.Resources>
        <ControlTemplate x:Key="TemplateResize" TargetType="{x:Type Control}">
            <Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                <Rectangle Margin="-6 -6 -6 -6" Stroke="#FF555555" StrokeThickness="1" StrokeDashArray="4.0 4.0" SnapsToDevicePixels="True"></Rectangle>
                <ERDesign:ResizeHandle HorizontalAlignment="Left" VerticalAlignment="Top" Margin="-10 -10 0 0" Cursor="SizeNWSE" SnapsToDevicePixels="True"></ERDesign:ResizeHandle>
                <ERDesign:ResizeHandle HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0 -10 0 0" Cursor="SizeNS" SnapsToDevicePixels="True"></ERDesign:ResizeHandle>
                <ERDesign:ResizeHandle HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0 -10 -10 0" Cursor="SizeNESW" SnapsToDevicePixels="True"></ERDesign:ResizeHandle>
                <ERDesign:ResizeHandle HorizontalAlignment="Left" VerticalAlignment="Center" Margin="-10 0 0 0" Cursor="SizeWE" SnapsToDevicePixels="True"></ERDesign:ResizeHandle>
                <ERDesign:ResizeHandle HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0 0 -10 0" Cursor="SizeWE" SnapsToDevicePixels="True"></ERDesign:ResizeHandle>
                <ERDesign:ResizeHandle HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="-10 0 0 -10" Cursor="SizeNESW" SnapsToDevicePixels="True"></ERDesign:ResizeHandle>
                <ERDesign:ResizeHandle HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0 0 0 -10" Cursor="SizeNS" SnapsToDevicePixels="True"></ERDesign:ResizeHandle>
                <ERDesign:ResizeHandle HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 -10 -10" Cursor="SizeNWSE" SnapsToDevicePixels="True"></ERDesign:ResizeHandle>
            </Grid>
        </ControlTemplate>
    </UserControl.Resources>
    <Control HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Template="{StaticResource TemplateResize}" SnapsToDevicePixels="True"></Control>
</UserControl>

ResizeHandle.Xaml

<UserControl x:Class="ERDesign.ResizeHandle"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="9" d:DesignWidth="9" Width="9" Height="9">
    <UserControl.Resources>
        <ControlTemplate x:Key="TemplateResizeHandle" TargetType="{x:Type Thumb}">
            <Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                <Ellipse Stroke="#FF2F592F" Stretch="Fill">
                    <Ellipse.Fill>
                        <RadialGradientBrush GradientOrigin="0.3,0.3">
                            <GradientStop Color="#FFF2FCF2" Offset="0"></GradientStop>
                            <GradientStop Color="#FF4ECB4E" Offset="1"></GradientStop>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
            </Grid>
        </ControlTemplate>
    </UserControl.Resources>
    <Thumb HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Template="{StaticResource TemplateResizeHandle}" SnapsToDevicePixels="True" DragDelta="Thumb_DragDelta"></Thumb>
</UserControl>

ResizeHandle.Xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;

namespace ERDesign
{
    public partial class ResizeHandle : UserControl
    {
        public ResizeHandle()
        {
            InitializeComponent();
        }

        private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
        {
            ResizeHandle resizehandle = (sender as Thumb).Parent as ResizeHandle;
            Resize resize = (resizehandle.DataContext as Control).Parent as Resize;
            UserControl userctrl = (resize.DataContext as ContentControl).Parent as UserControl;

            if (userctrl == null)
            {

            }
            else
            {
                double X;
                double Y;

                switch (this.HorizontalAlignment)
                {
                    case HorizontalAlignment.Left:
                        X = Math.Min(e.HorizontalChange, userctrl.ActualWidth - userctrl.MinWidth);
                        Canvas.SetLeft(userctrl, Canvas.GetLeft(userctrl) + X);
                        userctrl.Width = userctrl.Width - X;
                        break;
                    case HorizontalAlignment.Right:
                        X = Math.Min(-e.HorizontalChange, userctrl.ActualWidth - userctrl.MinWidth);
                        userctrl.Width = userctrl.Width - X;
                        break;
                    default:
                        break;
                }

                switch (this.VerticalAlignment)
                {
                    case VerticalAlignment.Top:
                        Y = Math.Min(e.VerticalChange, userctrl.ActualHeight - userctrl.MinHeight);
                        Canvas.SetTop(userctrl, Canvas.GetTop(userctrl) + Y);
                        userctrl.Height = userctrl.Height - Y;
                        break;
                    case VerticalAlignment.Bottom:
                        Y = Math.Min(-e.VerticalChange, userctrl.ActualHeight - userctrl.MinHeight);
                        userctrl.Height = userctrl.Height - Y;
                        break;
                    default:
                        break;
                }
            }
        }
    }
}

Answer 2

This is typically done using an adorner. See here for an example.