InkCanvas save to Image


  • Hej Experts!

      I have the following question. 
      How could I save a InkCanvas to a image, so I don't get a black area in my image.

      I have the following code. 
    <Window x:Class="InkCanvas.Window1" 
        Title="Window1" Height="600" Width="600">  
                <ColumnDefinition Width="20" /> 
                <ColumnDefinition Width="*" /> 
                <RowDefinition Height="518*" /> 
                <RowDefinition Height="44" /> 
            <InkCanvas x:Name="TestInkCanvas" Height="200" Width="500" VerticalAlignment="Top" Grid.Column="1" Grid.Row="0"/>  
            <Button Height="23" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Bottom" Width="75" Click="button1_Click">Button</Button> 

    And the following code in my C#
    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Text;  
    using System.Windows;  
    using System.Windows.Controls;  
    using System.Windows.Data;  
    using System.Windows.Documents;  
    using System.Windows.Input;  
    using System.Windows.Media;  
    using System.Windows.Media.Imaging;  
    using System.Windows.Navigation;  
    using System.Windows.Shapes;  
    using System.IO;  
    namespace InkCanvas  
        /// <summary>  
        /// Interaction logic for Window1.xaml  
        /// </summary>  
        public partial class Window1 : Window  
            public Window1()  
            private void button1_Click(object sender, RoutedEventArgs e)  
                RenderTargetBitmap rtb = new RenderTargetBitmap((int)this.TestInkCanvas.ActualWidth, (int)this.TestInkCanvas.ActualHeight, 0, 0, PixelFormats.Pbgra32);  
                JpegBitmapEncoder encoder = new JpegBitmapEncoder();  
                FileStream file = new FileStream(@"C:\test.jpg", FileMode.Create);  

    I get the image, but there are a black area on the left of my image, how can I avoid this.

    Best Regards
    Lars Folmer-Petersen
    Tuesday, March 17, 2009 11:38 AM


All replies

  • Hi,


    You did not save layout information of the InkCanvas, so there appears a blank area on the left.

    You can refer the ExportToPng method from this link:!305B02907E9BE19A!240.entry


    Hope this helps.


    Jim Zhou -MSFT
    • Marked as answer by Testpilotdk Friday, March 20, 2009 9:36 AM
    Wednesday, March 18, 2009 10:27 AM
  • Hi Jim Zhou!

       It works almost fine, but when I have save the inkcanvas it is placed the coordinate 0,0.

       How could I avoid this, so it will be in the correct cell in the datagrid?

    Lars Folmer-Petersen
    Friday, March 20, 2009 9:37 AM
  • Hi,

    You can save the entire Grid with Background setting to transparent, and preserve the Grid's layout information.


    Jim Zhou -MSFT
    • Marked as answer by Testpilotdk Monday, March 23, 2009 9:31 AM
    Monday, March 23, 2009 3:24 AM
  • Hi Jim Zhou!

     Thanks for your help, i have done the transform on the grid instead and this worked great. 


      Transform transform = this.TestGrid.LayoutTransform;  
      this.TestGrid.LayoutTransform = null;  
       // Do saving inkcanvas  
      // Restore previously saved layout  
      this.TestGrid.LayoutTransform = transform;  


    Lars Folmer-Petersen
    Monday, March 23, 2009 9:33 AM