none
InkCanvas save to Image

    Question

  • 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" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Title="Window1" Height="600" Width="600">  
        <Grid> 
            <Grid.ColumnDefinitions> 
                <ColumnDefinition Width="20" /> 
                <ColumnDefinition Width="*" /> 
            </Grid.ColumnDefinitions> 
     
            <Grid.RowDefinitions> 
                <RowDefinition Height="518*" /> 
                <RowDefinition Height="44" /> 
            </Grid.RowDefinitions> 
            <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> 
        </Grid> 
    </Window> 

    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()  
            {  
                InitializeComponent();  
            }  
     
            private void button1_Click(object sender, RoutedEventArgs e)  
            {  
                RenderTargetBitmap rtb = new RenderTargetBitmap((int)this.TestInkCanvas.ActualWidth, (int)this.TestInkCanvas.ActualHeight, 0, 0, PixelFormats.Pbgra32);  
     
                rtb.Render(this.TestInkCanvas);  
     
                JpegBitmapEncoder encoder = new JpegBitmapEncoder();  
     
                encoder.Frames.Add(BitmapFrame.Create(rtb));  
     
                FileStream file = new FileStream(@"C:\test.jpg", FileMode.Create);  
     
                encoder.Save(file);  
     
                file.Close();   
     
            }  
        }  
    }  
     


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


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

Answers

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:


    http://dvuyka.spaces.live.com/blog/cns!305B02907E9BE19A!240.entry

     

    Hope this helps.

    Thanks.


    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.

    Thanks.


    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