I am able to drag a legend within a XamDataChart. The problem is on subsequent drags the ghost image of the legend gets further away from the cursor. The cursor is in the right spot but the opaque legend is not after the first drag. How do you position the ghost image?
<Grid x:Name="LineGrid" Background="White"> <ig:XamDataChart x:Name="LineChart" DefaultInteraction="DragZoom" HorizontalZoomable="True" HorizontalZoombarVisibility="Visible" VerticalZoomable="True" VerticalZoombarVisibility="Visible" Legend="{Binding ElementName=LineLegend}" PropertyChanged="OnPropertyChanged"> <ig:DragDropManager.DropTarget> <ig:DropTarget IsDropTarget="True" DropChannels="ChannelLegend"/> </ig:DragDropManager.DropTarget> </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" DragChannels="ChannelLegend" Drop="DragSource_Drop"> <ig:DragSource.MoveCursorTemplate> <DataTemplate> <Ellipse Fill="Green" Width="50" Height="50" /> </DataTemplate> </ig:DragSource.MoveCursorTemplate> </ig:DragSource> </ig:DragDropManager.DragSource> </ig:Legend> </Grid>
Hello Jason,
I have been investigating into this issue that you are reporting, but at the moment, I can't seem to reproduce this behavior that you are seeing. The behavior I am currently seeing is that the Legend of the XamDataChart is dragged, and the "ghost" image of the Legend appears relative to the mouse click and drag that started the dragging operation.
I have attached the sample project I used to test this. Please test this project on your PC; whether or not it works correctly may help indicate the nature of this problem.
If the project does not work correctly, this indicates either a problem possibly specific to your environment, or a difference in the DLL versions we are using. My test was performed using version 16.1.20161.2056 in Infragistics for WPF 2016 Volume 1.
If the project does show the product feature working correctly, this indicates a possible problem in the code of your application. It will help if you can provide a small, isolated sample application that demonstrates the behavior you are seeing.
Or, if this sample project is not an accurate demonstration of what you're trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one.
Please let me know if you have any other questions or concerns on this matter.
Sincerely,AndrewAssociate Developer
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.
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.
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?
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.
Binding the height and width worked! Thanks Andrew.
I look forward to hearing what you find on the mouse offset.
After investigating into this issue a bit further, I have found that this "jumping" behavior has already been logged in our internal tracking systems, and has been internally fixed. This was a regression issue that resulted from another bug fix in the DragDropManager, and was offsetting the cursor slightly.
I have created a private support case on your behalf so that you can track this issue and be notified when a fix becomes available for it. This support case has an ID of CAS-176806-X7F5T7, and you can access it at the following link after signing into your account: https://es.infragistics.com/my-account/support-activity. I will soon be updating this case with more information about this development issue, and how you can view its status.