Silverlight: How to move items in ItemsControl in Canvas - silverlight

Question

I have an ItemsControl which shows a UserControl as an ItemTemplate. It has a Canvas ItemsPanel.
<ItemsControl ItemsSource="{Binding Path=MyItems}" Margin="200,20,0,0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:MyControl Margin="10,10,10,10"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Height="2000" Width="2000"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
I want to move the controls over the Canvas on Mouse drag
MyControl has a Behavior:
<UserControl x:Class="MyControl">
<StackPanel x:Name="LayoutRoot" >
<Grid Background="LightBlue" Height="20">
</StackPanel>
<Interactivity:Interaction.Behaviors>
<Behavior:DragControlBehavior />
</Interactivity:Interaction.Behaviors>
</UserControl>
DragControlBehavior sets the Canvas attached properties on MouseMove over the control
[Update] - Here is the full source code of the Behavior
public class DragControlBehavior : Behavior<MyControl>
{
private DependencyObject _parent;
private bool _isMouseCaptured = false;
protected override void OnAttached()
{
AssociatedObject.MouseLeftButtonDown += (sender, e) =>
{
_isMouseCaptured = true;
};
AssociatedObject.MouseLeftButtonUp += (sender, e) =>
{
_isMouseCaptured = false;
};
AssociatedObject.MouseMove += (sender, e) =>
{
if (_isMouseCaptured)
{
if (_parent == null)
{
_parent = VisualTreeHelper.GetParent(AssociatedObject);
while (_parent.GetType() != typeof(Canvas))
_parent = VisualTreeHelper.GetParent(_parent);
}
var pointOnCanvas = e.GetPosition((Canvas)_parent);
Canvas.SetTop(AssociatedObject, pointOnCanvas.Y);
Canvas.SetLeft(AssociatedObject, pointOnCanvas.X);
}
};
}
If I use an instance of MyControl seperately on a Canvas it works but if there is a collection of MyControls in ItemsControl, they do not move on MouseMove
In WPF, I would use ItemContainerStyle but in SL it is not available:
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding Left}"/>
<Setter Property="Canvas.Top" Value="{Binding Top}"/>
</Style>
</ItemsControl.ItemContainerStyle>

Answer 1

When you use an ItemsControl, each item generated is wrapped in a ContentPresenter. The visual tree looks a bit like the following:
System.Windows.Controls.ItemsControl
System.Windows.Controls.ItemsPresenter
System.Windows.Controls.Canvas
System.Windows.Controls.ContentPresenter
DragControlBehaviorTest.MyControl
...
(DragControlBehaviorTest is the name of the project I created to try your code out in.)
The Canvas.Left and Canvas.Top attached properties only work on direct children of the Canvas. If you place a MyControl directly in a Canvas, then your MyControl is a child of the Canvas, and so setting Canvas.Left and Canvas.Top on it will work. However, if you're using an ItemsControl to generate your MyControls, there is a ContentPresenter between the Canvas and each of your MyControls. You need to set the Canvas.Left and Canvas.Top properties on these ContentPresenters instead.
You have a loop that runs from the AssociatedObject up the visual tree to find the ancestor Canvas. You can modify this to find the immediate child of the canvas, using something like the following:
_immediateChild = AssociatedObject;
_parent = VisualTreeHelper.GetParent(AssociatedObject);
while (_parent.GetType() != typeof(Canvas))
{
_immediateChild = _parent;
_parent = VisualTreeHelper.GetParent(_parent);
}