In windows phone 7, ManipulationDelta event does not work as expected

This is the code to reproduce it, xaml:

<phone:PhoneApplicationPage 
    x:Class="WindowsPhoneApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Canvas x:Name="LayoutRoot" Background="Gray" Width="600" Height="800">
        <!--ContentPanel - place additional content here-->
        <Rectangle Name="rectangle" Width="100" Height="100" Fill="Red" />
    </Canvas>
</phone:PhoneApplicationPage>

and this is the code-behind:

public partial class MainPage : PhoneApplicationPage
    {
        private double translationX = 0.0;
        private double translationY = 0.0;

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            LayoutRoot.ManipulationDelta += this.PhoneApplicationPage_ManipulationDelta;
        }

        void PhoneApplicationPage_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
            this.translationX += e.DeltaManipulation.Translation.X;
            this.translationY += e.DeltaManipulation.Translation.Y;

            System.Diagnostics.Debug.WriteLine(string.Format("{0},{1}", this.translationX, this.translationY));

            var c = new Rectangle();
            //var c = rectangle;
            c.Width = 100;
            c.Height = 100;
            c.Fill = new SolidColorBrush(开发者_如何学GoColors.Red);
            c.SetValue(Canvas.LeftProperty, this.translationX);
            c.SetValue(Canvas.TopProperty, this.translationY);

            LayoutRoot.Children.Clear();
            LayoutRoot.Children.Add(c);
        }

    }

Run this app, drag the red rectangle, you'll find that the rectangle only moves for one time, it does not follow the movement of your finger(or mouse pointer).

Now try to change the following two lines of code:

var c = new Rectangle();
//var c = rectangle;

to this form:

//var c = new Rectangle();
var c = rectangle;

then run it again, it'll work as expected, the rectangle will follow the movement of your finder(or mouse pointer),why is this?

Thanks

The first version of the code is creating a new rectangle instance.
The second moves the one you created in XAML.

Here's something that will help to understand it. Using your version that creates new instances of Rectangle, click outside of the Rectangle and drag around the screen. It works. Now in the xaml, set IsHitTestVisible="False" for the Rectangle. Now click inside the Rectangle and drag, and it also works. It is clear that the Rectangle can intercept some manipulation events and not forward them to the LayoutRoot, and you need to make some accommodation for this.

Richard Woo

============ This is from App Hub