Canvas saving problem after scaling children element


  • I am applying scale tranformation to an image inside canvas with mouse.When I apply scale to reduce its resize and save canvas it has saved some portion in black as shown in image1.When I apply scale transform to increase size it has saved some portion in black as shown in image2.When I donot apply scale transform its save fine .What is this Problem.Need Help struggling for one week with this issue.

    My xaml code

    <Canvas x:Name="DrawCanvas"  Width="500" Grid.ColumnSpan="2" Grid.Row="1" Height="500" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center" >
    <Image x:Name="MyImage" Source="Assets/1.png" ManipulationDelta="MyImage_ManipulationDelta" HorizontalAlignment="Left" VerticalAlignment="Top" ManipulationMode="TranslateX,TranslateY,Rotate,Scale"/>

    Just clipping canvas so that image doesnot go outside

    DrawCanvas.Clip = new RectangleGeometry();
    DrawCanvas.Clip.Rect = new Rect(0, 0, DrawCanvas.ActualWidth, DrawCanvas.ActualHeight);

    Scaling code:

    private void MyImage_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
      var transform = MyImage.RenderTransform as CompositeTransform;
     transform.ScaleX += e.Delta.Translation.X * 0.001;
     transform.ScaleY += e.Delta.Translation.Y * 0.001;

    My save button code:

     private async void save_Click(object sender, RoutedEventArgs e)
                if (DrawCanvas.Children.Count == 0)
                    MessageDialog dlg = new MessageDialog("Please add some content", "Warning");
                // Render to an image at the current system scale and retrieve pixel contents
                RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
                await renderTargetBitmap.RenderAsync(DrawCanvas);
                var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
                var savePicker = new FileSavePicker();
                savePicker.DefaultFileExtension = ".png";
                savePicker.FileTypeChoices.Add(".png", new List<string> { ".png" });
                savePicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
                savePicker.SuggestedFileName = "snapshot.png";
                // Prompt the user to select a file
                var saveFile = await savePicker.PickSaveFileAsync();
                // Verify the user selected a file
                if (saveFile == null)
                // Encode the image to the selected file on disk
                using (var fileStream = await saveFile.OpenAsync(FileAccessMode.ReadWrite))
                    var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, fileStream);
                    await encoder.FlushAsync();
    image 1 : Works fine

    image 2: Two errors after saving

    Monday, June 16, 2014 11:32 PM