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

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

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

Answer 2

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;
}
}
}
}
}