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

Question

我希望一旦從圖庫中選擇了圖像，用戶就可以在畫布上移動圖像，並且一旦位置滿意就可以添加其他圖像，依此類推。 我通過畫布的點擊事件實現了前一部分，從而使選定的圖像移動到用戶在畫布上點擊的位置。困難是當我嘗試選擇另一個要添加到畫布的圖像而不是創建新圖像時替換畫布上的現有圖像。代碼如下

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的應用程序中使用翻譯轉換更為常見。

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