在屏幕上移动/滑动几个 UIelement

Question

使用我的实际代码，我可以使一个对象移动

private void OnManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
    e.Handled = true;         
}

private void OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    e.Handled = true;
    ballTranslate.X += e.DeltaManipulation.Translation.X;
    ballTranslate.Y += e.DeltaManipulation.Translation.Y;
    savx = ballTranslate.X;
    savy = ballTranslate.Y;
}

private void OnManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
    e.Handled = true;
}

还有我的 xaml：

<Image x:Name="ball"
    Source="/bal.png"
    ManipulationStarted="OnManipulationStarted" 
    ManipulationCompleted="OnManipulationCompleted" 
    ManipulationDelta="OnManipulationDelta" Canvas.Left="212" Canvas.Top="282">

    <Image.RenderTransform>
        <TranslateTransform x:Name="ballTranslate"/>
    </Image.RenderTransform>
</Image>

当我添加另一个图像（球）并尝试移动一个时；另一个也动了。 我想添加几个带有按钮之类的球。 （因为我的游戏目标是在屏幕上放置对象。 我的问题是如何添加具有相同行为的其他球？

更多 XAML 与其他图像（但我不想通过 XAML 添加图像，因为我不知道我需要多少图像；

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
    <Canvas x:Name="CanMap" Margin="10,0,-10,0">
        <Image Grid.RowSpan="2" Source="/textg.png" Stretch="Fill" Height="480" Width="752" Canvas.Left="-24" RenderTransformOrigin="0.499,0.512" CacheMode="BitmapCache" />
        <!-- <Image Name="image1" Stretch="Fill" Source="/bal.png" MouseMove="MouseMoving" Grid.ColumnSpan="4" Canvas.Left="337" Canvas.Top="239"/>-->
        <Image x:Name="ball"    
               Source="/bal.png"
               ManipulationStarted="OnManipulationStarted" 
               ManipulationCompleted="OnManipulationCompleted" 
               ManipulationDelta="OnManipulationDelta" Canvas.Left="447" Canvas.Top="323">

            <Image.RenderTransform>
                <TranslateTransform x:Name="ballTranslate"/>
            </Image.RenderTransform>
        </Image>
        <Image x:Name="ball2"
               Source="/bal.png"
               ManipulationStarted="OnManipulationStarted" 
               ManipulationCompleted="OnManipulationCompleted" 
               ManipulationDelta="OnManipulationDelta" Canvas.Left="120" Canvas.Top="310">

            <Image.RenderTransform>
                <TranslateTransform x:Name="ballTranslate2"/>
            </Image.RenderTransform>
        </Image>
    </Canvas>
</Grid>

添加图片：（我不能使用位图）

void AddImage(string src)
{
    Image image = new Image();

    Uri uri = new Uri(src, UriKind.Relative);
    ImageSource img = new System.Windows.Media.Imaging.BitmapImage(uri);
    image.SetValue(Image.SourceProperty, img);
    RenderTransform = new TranslateTransform();
    image.ManipulationDelta += OnManipulationDelta;
    // Add additional handlers here..

    CanMap.Children.Add(image);
}

-->

private void OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    e.Handled = true;
    var transform = (sender as UIElement).RenderTransform as TranslateTransform;
    transform.X += e.DeltaManipulation.Translation.X;
    transform.Y += e.DeltaManipulation.Translation.Y;
    savex = transform.X;
    savey = transform.Y;
}

Answer 1

更新答案：

void AddImage(string src)
{
    BitmapImage bitmap = new BitmapImage();
    bitmap.BeginInit();
    bitmap.UriSource = new Uri(src, UriKind.RelativeOrAbsolute);
    bitmap.EndInit();

    var img = new Image()
    {
        Source = bitmap,
        RenderTransform = new TranslateTransform()
    }

    img.ManipulationDelta += OnManipulationDelta;
    // Add additional handlers here..

    CanMap.Children.Add(img);
}

void OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    var transform = (sender as UIElement).RenderTransform as TranslateTransform;
    transform.X += e.DeltaManipulation.Translation.X;
    transform.Y += e.DeltaManipulation.Translation.Y;
 }