Thank for the response and example project, but in your example, you arent 'dropping' the legend (ie leaving it in place). It's on the second drag where I have the problem.

Hello Jason,

I think I may have reproduced this issue, but I am unsure if my way of dragging the Legend is matching yours. By any chance, are you applying a Margin to the Legend when you drag and drop it? I ask, at it appears that the margin applied to the Legend control is being respected when the drag starts, and this may be what is causing the Legend "image" to be lagging behind the actual drag point. If this is the way that you are repositioning your Legend, please let me know, and I will continue to look into a solution to this particular issue.

If it is not the way that you are repositioning your Legend, would it be possible for you to please shed some light on how you are doing so?

Please let me know if you have any other questions or concerns on this matter.

Sincerely,
Andrew
Associate Developer

Yes I am setting the margin. If there is a better way to set the position then let me know. But setting the margin was the only way I could find to change the legend position

Legend targetLegend = new Legend();
targetLegend = legend;
Point pos = e.GetPosition(LineGrid);
targetLegend.Margin = new Thickness(pos.X - dragPosInLegend.X, pos.Y - dragPosInLegend.Y, 0, 0);

Hello Jason,

I would recommend against setting the margin, as when you begin dragging, internally we are creating a snapshot or clone of the control that is being dragged for use as the "ghost" control. Included in this clone is the margin, and so when you begin dragging, that margin will go into effect, and the "ghost" will be offset by that margin.

Instead, I would recommend overlaying a transparent Canvas over the XamDataChart, which will serve as the Legend's parent. By doing this, you can move the legend by using the Canvas.SetTop and the Canvas.SetLeft static methods in the Drop event for the Legend. This appears to prevent the ghost's lagging behind the mouse pointer, as the margin will no longer be necessary.

I have attached a sample project to demonstrate the above. I hope this helps you.

Please let me know if you have any other questions or concerns on this matter.

Sincerely,
Andrew
Associate Developer

Excellent. That resolves the issue. Thank you Andrew.

On a minor side note, why does the legend 'jump' as soon as I start dragging? After removing the MoveCursorTemplate code, if I put the mouse on the 'L' of "Legend" and then start dragging the legend ghost image moves such that the cursor is no longer below the 'L'. Note: I am only talking about dragging the legend, I understand the dropping the legend and it's location requires separate code.

Unfortunately the use of a Canvas has caused different issues. I can no longer scroll or zoom in on my graph. My flyovers also no longer work. In an attempt to resolve this issue I placed my XamDatachart within the canvas.

<Canvas x:Name="dragCanvas" Background="Transparent"

VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
>
<ig:DragDropManager.DropTarget>
<ig:DropTarget IsDropTarget="True"/>
</ig:DragDropManager.DropTarget>
<ig:XamDataChart x:Name="LineChart"
DefaultInteraction="DragZoom"
HorizontalZoomable="True"
HorizontalZoombarVisibility="Visible"
VerticalZoomable="True"
VerticalZoombarVisibility="Visible"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Legend="{Binding ElementName=LineLegend}"
PropertyChanged="LineGridChange"
Loaded="LineGrid_Loaded">
</ig:XamDataChart >
<ig:Legend x:Name="LineLegend"
Content="Legend"
HorizontalAlignment="Left"
Margin="10,10,0,0"
PreviewMouseDown="legend_MouseLeftButtonDown">
<ig:DragDropManager.DragSource>
<ig:DragSource IsDraggable="True" Drop="DragSource_Drop">
</ig:DragSource>
</ig:DragDropManager.DragSource>
</ig:Legend>
</Canvas>

This fixed the above problems but then my graph becomes too small and doesn't fill the entire window. I tried 'stretching' the vert and horz alignment for both the canvas and the XamDataChart (see above) but this has no effect. So how do I get my XamDataChart a)to receive mouse actions or b)resize to the full size of the parent?

Binding the height and width worked! Thanks Andrew.

I look forward to hearing what you find on the mouse offset.

Hello Jason,

I apologize, I wasn't aware that you were zooming, panning, or using any type of flyovers for the XamDataChart. The overlaid Canvas will not work for those, as it will steal the mouse events that the chart would normally catch.

If you are going to surround both the XamDataChart and the Legend with the same canvas, I would recommend binding the Height and Width of your XamDataChart to the ActualHeight and ActualWidth of the Canvas to get the chart to essentially "fill" the parent Canvas. You can use an ElementName binding for this, as the Canvas will not do this automatically. For example, to do this, the code would look like the following:

<ig:XamDataChart Height="{Binding ElementName=dragCanvas, Path=ActualHeight}" Width="{Binding ElementName=dragCanvas, Path=ActualWidth}"/>

This should allow the XamDataChart to size to the parent of the Canvas, while allowing mouse events on the chart.

Regarding the offset of the mouse when dragging, this appears to likely be the result of a misplacement of the "ghost" element when the drag starts, as the mouse ends up slightly to the top and left of the spot that was actually clicked, but I'm not entirely sure just yet and would like to investigate a little further. I hope to have more inforamtion regarding this issue soon.

Please let me know if you have any other questions or concerns on this matter.

Sincerely,
Andrew
Associate Developer