无法将多个图像添加到画布

Question

我希望一旦从图库中选择图像，用户可以在画布上移动图像，一旦位置满意，就可以添加另一图像等等。 我通过点击画布事件实现了前一部分，使得所选图像移动到用户在画布上点击的位置。难点是当我尝试选择另一个图像添加到画布而不是创建新图像时它取代的canvas.The代码现有的图像是如下

public void chooseImage_Completed(object sender, PhotoResult e) 
    { 
     if (e.TaskResult != TaskResult.OK || e.ChosenPhoto == null) 
     { 
      return; 
     } 
     Image img = new Image(); 
     SelectedBitmap = new WriteableBitmap(160,160); 
     SelectedBitmap.SetSource(e.ChosenPhoto); 
     img.Source = SelectedBitmap; 
     img.Name = "photo" + i++; 
     imgSelected = true; 
    } 

private void CollageCanvas_Tap(object sender,System.Windows.Input.GestureEventArgs e) 
    { 
     if (imgSelected) 
     { 
      pt = e.GetPosition(CollageCanvas); 
      img.Source = SelectedBitmap; 
      img.Name = "photo" + i++; 
      CollageCanvas.Children.Remove(img); 
      CollageCanvas.Children.Add(img); 
      Canvas.SetLeft(img, pt.X); 
      Canvas.SetTop(img, pt.Y);    
     } 
    } 

我想知道是什么原因造成的新形象，以取代现有的图像，如果可能，正确的代码即可获得所需的输出。

Answer 1

您没有显示您的所有代码，因此我无法确定确切的问题。但似乎只有一个img参考。这意味着每次用户选择图像时，图像都会进入相同的图像元素。

下面是我如何解决这个问题。 FWIW，使用绝对定位与canvas.x和canvas.y是一种老派的方法。在基于XAML的应用程序中使用Translate Transform更为常见。

XAML

<Grid Background='#FFEDB788'> 
     <Grid.RowDefinitions> 
     <RowDefinition Height='17*' /> 
     <RowDefinition Height='143*' /> 
     </Grid.RowDefinitions> 
     <Button Content='Choose Picture' 
       HorizontalAlignment='Left' 
       Margin='44,10,0,0' 
       VerticalAlignment='Top' 
       Click='Button_Click' /> 
     <Canvas HorizontalAlignment='Stretch' 
       Width='Auto' 
       Margin='3' 
       x:Name='CollageCanvas' 
       Grid.Row='1' 
       VerticalAlignment='Stretch' 
       Background='#FF080808' /> 

    </Grid> 

代码

public MainPage() { 
    InitializeComponent(); 

    this.Loaded += MainPage_Loaded; 
    } 

    private void MainPage_Loaded(object sender, RoutedEventArgs e) { 
    photoChooserTask = new PhotoChooserTask(); 
    photoChooserTask.Completed += 
     new EventHandler<PhotoResult>(photoChooserTask_Completed); 
    } 

    private PhotoChooserTask photoChooserTask; 
    private WriteableBitmap SelectedBitmap; 
    private int i; 

    public void photoChooserTask_Completed(object sender, PhotoResult e) { 
    if (e.TaskResult != TaskResult.OK || e.ChosenPhoto == null) 
    { 
     return; 
    } 
    // create the image control 
    Image img = new Image() { Width = 160, Height = 160 }; 
    SelectedBitmap = new WriteableBitmap(160, 160); 
    SelectedBitmap.SetSource(e.ChosenPhoto); 
    img.Source = SelectedBitmap; 
    img.Name = "photo" + i++; 

    // add new image control to canvas 
    CollageCanvas.Children.Add(img); 

    // add the ManipulationDelta event to the new image 
    img.ManipulationDelta += img_ManipulationDelta; 

    // Add a transform to the image 
    // Eventually this transform is used to move the image to a new position 
    // See the ManipulationDelta event handler 
    img.RenderTransform = new TranslateTransform(); 
    } 

    private void img_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e) { 
    // The ManipulationDelta occurs when the image is dragged to a new position 
    var currentImage = sender as Image; // get the image 
    var currentTransform = currentImage.RenderTransform as TranslateTransform; // get the transform 

    currentTransform.X += e.DeltaManipulation.Translation.X; 
    currentTransform.Y += e.DeltaManipulation.Translation.Y; 
    } 

    private void Button_Click(object sender, RoutedEventArgs e) { 
    photoChooserTask.Show(); 
    }