Silvelight 4: why items are not moveable?

Question

There is a "field" on which some items are draggable:

Here is a XAML code:

                <Canvas Height="180" Width="169" >
                    <Image Canvas.Left="0" Canvas.Top="0" Height="180" Width="149"
                           Source="../Picts/field.png"  />

                    <Pages:FieldItem x:Name="Item2" Canvas.Left="129" Canvas.Top="34"
                                MouseLeftButtonDown="Item1_OnMouseLeftButtonDown"
                                MouseLeftButtonUp="Item1_MouseLeftButtonUp"
                                MouseMove="Item1_MouseMove"
                                />
                </Canvas>

And code-behind:

    private bool bIsCaptured = false;
    double mouseVerticalPosition;
    double mouseHorizontalPosition;

    private void Item1_OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        ((FrameworkElement)sender).CaptureMouse();
        bIsCaptured = true;
        mouseVerticalPosition = e.GetPosition(null).Y;
        mouseHorizontalPosition = e.GetPosition(null).X;
    }

    private void Item1_MouseMove(object sender, MouseEventArgs e)
    {
        if (bIsCaptured)
        {
            UserControl item = sender as UserControl;
            if (item != null)
            {
                // Calculate the current position of the object.
                double deltaV = e.GetPosition(null).Y - mouseVerticalPosition;
                double deltaH = e.GetPosition(null).X - mouseHorizontalPosition;
                double newTop = deltaV + (double)item.GetValue(Canvas.TopProperty);
                double newLeft = deltaH + (double)item.GetValue(Canvas.LeftProperty);

                // Set new position of object.
                item.SetValue(Canvas.TopProperty, newTop);
                item.SetValue(Canvas.LeftProperty, newLeft);

                // Update position global variables.
                mouseVerticalPosition = e.GetPosition(null).Y;
                mouseHorizontalPosition = e.GetPosition(null).X;
            }
        }
    }

    private void Item1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        UserControl item = sender as UserControl;
        bIsCaptured = false;
        if (item != null)
        {
            item.ReleaseMouseCapture();
        }
    }

My task is to display a collection of items that are bound to a list of object. How to do that is described in the topic: http://stackoverflow.com/questions/3508699/silverlight-4-how-to-display-list-of-custom-controls-not-in-list-order.

The only lack of the suggested approach is: items are not draggable anymore...

Here if update XAML code of controls "holder" (provided for consistency purposes):

<Canvas Height="180" Width="169" Background="Beige" HorizontalAlignment="Center" >
             <Image Canvas.Left="0" Canvas.Top="0" Height="180" Width="149"
                   Source="../Picts/field.png"  />
             <Pages:MyItemsControl ItemsSource="{Binding SquadFieldPlayers}">
                <Pages:MyItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                         <Canvas Height="180" Width="169" Background="Transparent"
                                 HorizontalAlignment="Center" />
                    </ItemsPanelTemplate>
                </Pages:MyItemsControl.ItemsPanel>
                <Pages:MyItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Pages:FieldItem 
                             MouseLeftButtonDown="Item1_OnMouseLeftButtonDown" 
                             MouseLeftButtonUp="Item1_MouseLeftButtonUp"
                             MouseMove="Item1_MouseMove"
                             />
                    </DataTemplate>
                 </Pages:MyItemsControl.ItemTemplate>
             </Pages:MyItemsControl >
         </Canvas>

All mouse-event handlers are called, but items are not really movable... why?

Answer 1

Still not sure how that should work, but I've found a workaround. Method 'Item1_MouseMove' was updated to do the following:

1. Find data object to which control is bound;
2. Set 'FieldCoordX' and 'FieldCoordY' properties of that object instead of setting 'Canvas.LeftProperty' and 'Canvas.RightProperty' of the control.

It looks like this:

    private void Item1_MouseMove(object sender, MouseEventArgs e)
    {
        if (bIsCaptured)
        {
            FrameworkElement element = sender as FrameworkElement;
            if (element != null)
            {
                ISquadPlayerViewModel vmPlayer = element.DataContext as ISquadPlayerViewModel;
                if (vmPlayer != null)
                {
                    // Calculate the current position of the object.
                    double deltaH = e.GetPosition(null).X - mouseHorizontalPosition;
                    double deltaV = e.GetPosition(null).Y - mouseVerticalPosition;
                    double newLeft = deltaH + vmPlayer.FieldCoordX;
                    double newTop = deltaV + vmPlayer.FieldCoordY;

                    // Set new position of object.
                    vmPlayer.FieldCoordX = newLeft;
                    vmPlayer.FieldCoordY = newTop;
                }

                // Update position global variables.
                mouseVerticalPosition = e.GetPosition(null).Y;
                mouseHorizontalPosition = e.GetPosition(null).X;
            }
        }
    }

One more item to be added into original description, customization of the 'ItemsControl' object that hosts all controls:

public class MyItemsControl : ItemsControl
{
    protected override void PrepareContainerForItemOverride(
                                  DependencyObject element, object item)
    {
        FrameworkElement contentitem = element as FrameworkElement;
        if (contentitem != null)
        {
            Binding leftBinding = new Binding("FieldCoordX");
            Binding topBinding = new Binding("FieldCoordY");
            leftBinding.Mode = BindingMode.TwoWay;
            topBinding.Mode = BindingMode.TwoWay;
            contentitem.SetBinding(Canvas.LeftProperty, leftBinding);
            contentitem.SetBinding(Canvas.TopProperty, topBinding);

            base.PrepareContainerForItemOverride(element, item);
        }
    }
}

As you can see our controls are already bound to the properties of the data objects. So we need to update not a control data, but object data.

If somebody is interested in more details, ask. I will try to help.