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

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?

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.