Develop Reference

Drag and Drop Object onto Canvas with coordinates

I managed to drag and drop items from my ListView onto a canvas and show an image on it. I used this question as a template:
https://social.msdn.microsoft.com/Forums/en-US/cef5c42c-87a0-4e19-afc8-935284607488/drag-and-drop-controls-issue-from-listbox-into-canvas-wpf?forum=wpf
I also added the suggestion in that thread, so that the Item gets rendered where I drop it. These are the code behinds for my "Drawing Plate" (The canvas) and the ListView:
Canvas:
public partial class DrawingPlateUC : UserControl
{
IMessenger messenger = Messenger.Instance;
public DrawingPlateUC()
{
InitializeComponent();
}
void Canvas_Drop(object sender, DragEventArgs e)
{
if (e.Data.GetDataPresent("MyFormat"))
{
var module = e.Data.GetData("MyFormat") as Module;
Canvas CanvasView = sender as Canvas;
Image image = new Image();
image.Source = module.ModuleImage;
CanvasView.Children.Add(image);
}
}
private void Canvas_DragOver(object sender, DragEventArgs e)
{
// write down this point to a private member
Point enterPoint = e.GetPosition(this.moduleCanvas);
messenger.Send<Point>(enterPoint, MessengerTopics.MousePoint);
}
void Canvas_DragEnter(object sender, DragEventArgs e)
{
if (!(e.Data.GetDataPresent("contact")) || (sender == e.Source))
{
e.Effects = DragDropEffects.Copy;
}
}
}
ListView:
public partial class ItemListViewUC : UserControl
{
IMessenger messenger = Messenger.Instance;
Point startPoint;
Point enterPoint;
public ItemListViewUC()
{
messenger.Register<Point>(this, MessengerTopics.MousePoint, GetEnterPoint);
InitializeComponent();
}
private void GetEnterPoint(Point point)
{
enterPoint = point;
}
void StackPanel_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
startPoint = e.GetPosition(null);
}
void StackPanel_PreviewMouseMove(object sender, MouseEventArgs e)
{
Point mousPos = e.GetPosition(null);
Vector diff = startPoint - mousPos;
if ((e.LeftButton == MouseButtonState.Pressed) && (Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance) && (Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance))
{
ListView listView = sender as ListView;
ListViewItem listViewItem = FindAnchestor<ListViewItem>((DependencyObject)e.OriginalSource);
if (listViewItem == null) { return; }
var contact = (Module)listView.ItemContainerGenerator.ItemFromContainer(listViewItem);
DataObject dataObject = new DataObject("MyFormat", contact);
try
{
DragDrop.DoDragDrop(listViewItem, dataObject, DragDropEffects.Copy);
}
catch { }
// Set the Margin property to place the drag item on the canvas.
listViewItem.Margin = new Thickness(enterPoint.X, enterPoint.Y, 0, 0);
}
}
static T FindAnchestor<T>(DependencyObject current) where T : DependencyObject
{
do
{
if (current is T)
{
return (T)current;
}
current = VisualTreeHelper.GetParent(current);
}
while (current != null);
return null;
}
}
This here is supposed to draw the Image on the spot where I dropped it:
listViewItem.Margin = new Thickness(enterPoint.X, enterPoint.Y, 0, 0);
But it only renders on the top left corner, coordinates 0, 0 of the canvas. This is for all Items I drop, they overlay on that position. I already checked the coordinates, they are not 0, 0, but the ones where my mouse is when I drop the item.
This is my Window:

when you drop an item, you don't set any coordinate for Image:
void Canvas_Drop(object sender, DragEventArgs e)
{
if (e.Data.GetDataPresent("MyFormat"))
{
var module = e.Data.GetData("MyFormat") as Module;
Canvas CanvasView = sender as Canvas;
Image image = new Image();
image.Source = module.ModuleImage;
image.SetValue(Canvas.LeftProperty, _enterPoint.X);
image.SetValue(Canvas.TopProperty, _enterPoint.Y);
CanvasView.Children.Add(image);
}
}
private Point _enterPoint;
private void Canvas_DragOver(object sender, DragEventArgs e)
{
_enterPoint = e.GetPosition(this.moduleCanvas);
messenger.Send<Point>(_enterPoint, MessengerTopics.MousePoint);
}

WPF DragMove() causes issues

I'm trying to figure out if there's an elegant solution to the problem I've been faced with.
So basically, I designed a borderless loading splash screen which is completely movable via dragging. I find that this happens if the splash screen gets hidden via Hide(), then displays a window via ShowDialog() with the owner set to the splash screen. Things get extremely buggy, but only if you're in mid-drag (with left mouse button down). You become unable to click or move anything, even Visual Studio becomes unresponsive unless you explicitly alt-tab out of the application.
Considering I know when I'm going to spawn the window, I was thinking maybe there'd be a way to cancel the DragMove operation, but I'm having no luck. What I've figured out is that DragMove is synchronous, so I'd guess it'd have to be cancelled from a different thread or in an event callback.
Edit:
public partial class Window_Movable : Window
{
public Window_Movable()
{
InitializeComponent();
}
public Boolean CanMove { get; set; } = true;
private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (CanMove == false)
return;
Task.Factory.StartNew(() => {
System.Threading.Thread.Sleep(1000);
Dispatcher.Invoke(() => {
Hide();
new Window_Movable() {
Title = "MOVABLE 2",
CanMove = false,
Owner = this
}.ShowDialog();
});
});
DragMove();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
Console.WriteLine("DING");
}
}

I had the same problem and found out that DragMove() method is a problem.
https://groups.google.com/forum/#!topic/wpf-disciples/7OcuXrf2whc
To solve I decided to refuse from using it and implement moving logic.
I've combined some solutions from
https://www.codeproject.com/Questions/284995/DragMove-problem-help-pls
and
C# WPF Move the window
private bool _inDrag;
private Point _anchorPoint;
private bool _iscaptured;
private void AppWindowWindowOnMouseMove(object sender, MouseEventArgs e)
{
if (!_inDrag)
return;
if (!_iscaptured)
{
CaptureMouse();
_iscaptured = true;
}
var mousePosition = e.GetPosition(this);
var mousePositionAbs = new Point
{
X = Convert.ToInt16(_appWindowWindow.Left) + mousePosition.X,
Y = Convert.ToInt16(_appWindowWindow.Top) + mousePosition.Y
};
_appWindowWindow.Left = _appWindowWindow.Left + (mousePositionAbs.X - _anchorPoint.X);
_appWindowWindow.Top = _appWindowWindow.Top + (mousePositionAbs.Y - _anchorPoint.Y);
_anchorPoint = mousePositionAbs;
}
private void AppWindowWindowOnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
if (_inDrag)
{
_inDrag = false;
_iscaptured = false;
ReleaseMouseCapture();
}
}
private void AppWindowWindowOnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
_anchorPoint = e.GetPosition(this);
_anchorPoint.Y = Convert.ToInt16(_appWindowWindow.Top) + _anchorPoint.Y;
_anchorPoint.X = Convert.ToInt16(_appWindowWindow.Left) + _anchorPoint.X;
_inDrag = true;
}
I've spend all yesterday evening and find a more hacky but more functional solution. Which support Maximized state and not require manual coordinate calculation.
private bool _mRestoreForDragMove;
private void OnAppWindowWindowOnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (e.ClickCount == 2)
{
if (_appWindowWindow.ResizeMode != ResizeMode.CanResize &&
_appWindowWindow.ResizeMode != ResizeMode.CanResizeWithGrip)
{
return;
}
_appWindowWindow.WindowState = _appWindowWindow.WindowState == WindowState.Maximized
? WindowState.Normal
: WindowState.Maximized;
}
else
{
_mRestoreForDragMove = _appWindowWindow.WindowState == WindowState.Maximized;
SafeDragMoveCall(e);
}
}
private void SafeDragMoveCall(MouseEventArgs e)
{
Task.Delay(100).ContinueWith(_ =>
{
Dispatcher.BeginInvoke((Action)
delegate
{
if (Mouse.LeftButton == MouseButtonState.Pressed)
{
_appWindowWindow.DragMove();
RaiseEvent(new MouseButtonEventArgs(e.MouseDevice, e.Timestamp, MouseButton.Left)
{
RoutedEvent = MouseLeftButtonUpEvent
});
}
});
});
}
private void OnMouseMove(object sender, MouseEventArgs e)
{
if (_mRestoreForDragMove)
{
_mRestoreForDragMove = false;
var point = PointToScreen(e.MouseDevice.GetPosition(this));
_appWindowWindow.Left = point.X - (_appWindowWindow.RestoreBounds.Width * 0.5);
_appWindowWindow.Top = point.Y;
_appWindowWindow.WindowState = WindowState.Normal;
_appWindowWindow.DragMove();
SafeDragMoveCall(e);
}
}
private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_mRestoreForDragMove = false;
}
The thing is to send LeftMouseButtonUp event after a short delay to avoid blocking from DragMove()
Sources for last solve:
DragMove() and Maximize
C# WPF - DragMove and click

And one more completely different solution. To make a window movable you can use CaptionHeight of WindowChrome.
i.e.
var windowChrome =
WindowChrome.GetWindowChrome(appWindow.Window);
windowChrome.CaptionHeight = MainWindowToolbar.Height;
WindowChrome.SetWindowChrome(appWindow.Window, windowChrome);
but you should also set attached property WindowChrome.IsHitTestVisibleInChrome="True" for all controls in the window.

Scrolling with touch not working in WPF

I have a WPF application and over a part of it I had a card which displayed Javascript. My problem was that I wasn't able to scroll with the mouse over the Javascript card, because it was swallowing the events. I solved that by hooking into the PreviewMouseWheel event (described here) sent by UIElement:
protected void AddListeners(BorderedCanvas borderedCanvas)
{
borderedCanvas.PreviewMouseWheel += PreviewMouseWheel;
}
protected void RemoveListeners(BorderedCanvas borderedCanvas)
{
borderedCanvas.PreviewMouseWheel -= PreviewMouseWheel;
}
protected static void PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
if (!e.Handled)
{
e.Handled = true;
var eventArg =
new MouseWheelEventArgs(e.MouseDevice, e.Timestamp, e.Delta)
{
RoutedEvent = UIElement.MouseWheelEvent,
Source = sender
};
var parent = VisualTreeHelper.GetParent((UIElement)sender) as UIElement;
parent?.RaiseEvent(eventArg);
}
}
Now, scrolling with the mouse works perfectly fine.
However, scrolling with touch doesn't work.
So, I modified AddListeners:
protected void AddListeners(BorderedCanvas borderedCanvas)
{
borderedCanvas.PreviewMouseWheel += PreviewMouseWheel;
borderedCanvas.PreviewTouchDown += new EventHandler<TouchEventArgs>(OnTouchDown);
borderedCanvas.PreviewTouchMove += new EventHandler<TouchEventArgs>(OnTouchMove);
}
And I added these methods:
protected static void OnTouchDown(object sender, TouchEventArgs e)
{
if (!e.Handled)
{
e.Handled = true;
var eventArg =
new TouchEventArgs(e.TouchDevice, e.Timestamp)
{
RoutedEvent = UIElement.TouchDownEvent,
Source = sender
};
var parent = VisualTreeHelper.GetParent((UIElement)sender) as UIElement;
parent?.RaiseEvent(eventArg);
}
}
protected static void OnTouchMove(object sender, TouchEventArgs e)
{
if (!e.Handled)
{
e.Handled = true;
var eventArg =
new TouchEventArgs(e.TouchDevice, e.Timestamp)
{
RoutedEvent = UIElement.TouchMoveEvent,
Source = sender
};
var parent = VisualTreeHelper.GetParent((UIElement)sender) as UIElement;
parent?.RaiseEvent(eventArg);
}
}
However, scrolling with touch still doesn't work.
Any idea what I did wrong?
To me it seems that I treated the mouse scroll and the touch scroll in a similar way, but the first works and the second doesn't.

You need to set the ScrollViewer.PanningMode for it to work with the touch.
<ScrollViewer PanningMode="Both"/>
The default value for the PanningMode is None.

Dragging and dropping between two wpf controls - I need the mouse icon to change depending on location inside 2nd control

I have two WPF controls. One is a TreeView and the other is a graph control.
I have dragging and dropping working between them. When I drag from the TreeView control to the graph control and drop something it works as I want it to. The mouse cursor has the dragging drop look to it during this. However I want to change the mouse cursor (to something that points up) if the user points the mouse to the top half of the graph control. If the user goes to the bottom of the graph control then I want the cursor to go back to the original dragging drop look.
I thought I could use the GiveFeedback event with the 1st control but that doesn't return the graph object to me.
I can provide code if needed but I don't think it would be helpful. I do have a method called MouseNearTop(Graph g, DragEventArgs e) that returns a bool true if the mouse is in the top half of the grid ad false if on the bottom half.
UPDATE:
I tried using the Mouse.OverrideCursor property but that seems to change the mouse after you release the button. I tried again using the static class DragDrop but that throws exceptions and still doesn't work.
This is for the code for my second attempt:
namespace WpfApplication11
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private bool pointingUp = true;
private void Rectangle_DragOver(object sender, DragEventArgs e)
{
currentPoint = e.GetPosition(MyRectangle);
if ((currentPoint.X > 0) && (currentPoint.X < MyRectangle.ActualWidth) && (currentPoint.Y > 0) && (currentPoint.Y < (MyRectangle.ActualHeight / 2)))
{
if (!pointingUp)
{
//Mouse.OverrideCursor = Cursors.UpArrow;'
try
{
DragDrop.DoDragDrop(MyRectangle1, MyRectangle1, DragDropEffects.Copy);
}
catch
{
}
pointingUp = true;
}
}
else
{
if (pointingUp)
{
//Mouse.OverrideCursor = null;
try
{
DragDrop.DoDragDrop(MyRectangle1, MyRectangle1, DragDropEffects.Move);
}
catch
{
}
pointingUp = false;
}
}
}
Point currentPoint = new Point();
private void MyRectangle1_MouseMove(object sender, MouseEventArgs e)
{
System.Media.SystemSounds.Beep.Play();
if (e.LeftButton == MouseButtonState.Pressed)
{
//if (FileTree.SelectedItem == null)
//{
// return;
//}
//var node = FileTree.SelectedItem as TreeViewNode;
// && (node.TableName.Equals("Ttmp", StringComparison.InvariantCultureIgnoreCase))
//if ((node.Items.Count == 0) && !(node.TableName == "Temp" || node.NodeDisplayName.EqualsAtLeastOne(StringComparison.InvariantCultureIgnoreCase, "DiFR", "DSFR")))
//{
var mousePos = e.GetPosition(null);
var diff = _startPoint - mousePos;
if (Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance
|| Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance)
{
DragDrop.DoDragDrop(MyRectangle1, MyRectangle1, DragDropEffects.Move);
}
//}
}
}
private Point _startPoint;
private void MyRectangle1_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
_startPoint = e.GetPosition(null);
}
private void MyRectangle_GiveFeedback(object sender, GiveFeedbackEventArgs e)
{
//Point p = e.GetPosition(MyRectangle);
}
private void MyRectangle_Drop(object sender, DragEventArgs e)
{
e.Effects = DragDropEffects.None;
}
}
}

I've used a Rectangle for demo purposes, but I think this should work OK with whatever graph you're using.
private void MyRectangle_DragOver(object sender, DragEventArgs e)
{
Point p = e.GetPosition(MyRectangle);
if ((p.X > 0) && (p.X < MyRectangle.ActualWidth) && (p.Y > 0) && (p.Y < (MyRectangle.ActualHeight / 2)))
{
Mouse.OverrideCursor = Cursors.UpArrow;
}
else
{
Mouse.OverrideCursor = null;
}
}

I figured a solution.
In the object I am dragging the data into I have this method:
private void ObjectDraggingInto_DragOver(object sender, DragEventArgs e)
{
if (ObjectDraggingFrom.DragDroppingOn)
{
ObjectDraggingFrom.MoveUpCursor = MouseNearTop(sender, e)
? true
: false;
}
}
Then here is the code from the object that I started dragging from:
public static bool MoveUpCursor = false;
public static bool DragDroppingOn = false;
private void ObjectDraggingFrom_GiveFeedback(object sender, GiveFeedbackEventArgs e)
{
if (MoveUpCursor)
{
e.UseDefaultCursors = false;
Mouse.SetCursor(Cursors.UpArrow);
}
else
{
e.UseDefaultCursors = true;
}
e.Handled = true;
}
private void ObjectDragging_Drop(object sender, DragEventArgs e)
{
if (e.Data.GetDataPresent(DataFormats.FileDrop))
{
((DataExploreViewModel)DataContext).ImportDraggedAndDroppedFiles((string[])e.Data.GetData(DataFormats.FileDrop));
}
DragDroppingOn = false;
}
private void ObjectDraggingFrom_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
if (myData.SelectedItem == null)
{
return;
}
var mousePos = e.GetPosition(null);
var diff = _startPoint - mousePos;
if (Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance
|| Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance)
{
DragDroppingOn = true;
DragDrop.DoDragDrop(FileTree, data, DragDropEffects.Move | DragDropEffects.Copy);
}
}
}
So this will change the mouse drag cursor to a up arrow when you are in the upper half of the object you are dragging to. Otherwise the cursor will look like the normal drag cursor.

C# Windows 8 Phone Map Disable Zoom and Scroll

I am currently using a Microsoft.Phone.Map in my Windows 8 Phone App and want to be able stop interactions for changing the zoom level and moving (scrolling) around the map.
I've tried disabling interaction but the problem is I have a layer with Points of Interests that need to be tapped to expand information which doesn't work when I disable the map with IsEnabled = True;
The zoom level is set to this.BigMap.ZoomLevel = 16; to start with and then to try and stop this from changing with interaction I did this:
void BigMap_ZoomLevelChanged(object sender, MapZoomLevelChangedEventArgs e)
{
this.BigMap.ZoomLevel = 16;
}
But it means that I get a rather jumpy effect - is there a better way to disable zoom?
And does anyone know how to stop the map moving - I want just the section that fits on the screen to stay put and not let the user move it around.

You can find the map-element's grid, and stop it's zoom and moving manipulations like this:
xaml:
<Grid x:Name="LayoutRoot">
<maps:Map ZoomLevel="10"
x:Name="MyMap"
Loaded="Map_Loaded"
Tap="MyMap_Tap"/>
</Grid>
cs:
private void Map_Loaded(object sender, RoutedEventArgs e)
{
Grid grid = FindChildOfType<Grid>(MyMap);
grid.ManipulationCompleted += Map_ManipulationCompleted;
grid.ManipulationDelta += Map_ManipulationDelta;
}
private void Map_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
// disable zoom
if (e.DeltaManipulation.Scale.X != 0.0 ||
e.DeltaManipulation.Scale.Y != 0.0)
e.Handled = true;
//disable moving
if (e.DeltaManipulation.Translation.X != 0.0 ||
e.DeltaManipulation.Translation.Y != 0.0)
e.Handled = true;
}
private void Map_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
// disable zoom
if (e.FinalVelocities.ExpansionVelocity.X != 0.0 ||
e.FinalVelocities.ExpansionVelocity.Y != 0.0)
e.Handled = true;
//disable moving
if (e.FinalVelocities.LinearVelocity.X != 0.0 ||
e.FinalVelocities.LinearVelocity.Y != 0.0)
{
e.Handled = true;
}
}
public static T FindChildOfType<T>(DependencyObject root) where T : class
{
var queue = new Queue<DependencyObject>();
queue.Enqueue(root);
while (queue.Count > 0)
{
DependencyObject current = queue.Dequeue();
for (int i = VisualTreeHelper.GetChildrenCount(current) - 1; 0 <= i; i--)
{
var child = VisualTreeHelper.GetChild(current, i);
var typedChild = child as T;
if (typedChild != null)
{
return typedChild;
}
queue.Enqueue(child);
}
}
return null;
}
private void MyMap_Tap(object sender, GestureEventArgs e)
{
//This is still working
}
Because you disable only zoom and moving manipulations, taps and holds are working normally.
Hopefully this helps!
edit: Note that when you call FindChildOfType(MyMap), the map element should be visible.