無法將多個圖像添加到畫布

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(); 
    }