WPF InkCanvas - Saved image is black

Question

I'm learning WPF and C# at the moment, to do so I'm trying to implement a little drawing application. For this I'm using the InkCanvas and I want to save it as an .jpg ord .png image.

I got the code for saving the InkCanvas from here: Convert WPF InkCanvas to Bitmap But instead of converting it into a Byte-Array, I'm trying to save it direktly using the SaveFileDialog.

The result after saving the Canvas: The size is ok, it's the same just like the Canvas's size. But the save .jpg is completely black and I don't know why.

I searched for the problem and stumbled upon this: Stackoverflow - InkCanvas to BitMap So I tried to put my InkCanvas into several containers without any other content but nothing changes, the saved image is still black. The second link I've found is this one: Stackoverflow - saving WPF InkCanvas to a JPG - image is getting cropped I don't have a TextBox in my project so I tried to remove other Control-elements, but whith the same result. The saved image is still black.

I even tried to use different PixelFormats, saving it without margin etc. Is there something I'm missing?

XAML-Code:

   <Grid>
    <DockPanel>
        <Menu DockPanel.Dock="Top" Height="30" Background="#252629" FontSize="18" Foreground="#dddddd" Panel.ZIndex="999">
            <MenuItem Header="_File">
                <MenuItem x:Name="mnuItmNew" Header="_New Image" Background="#252629" Click="mnuNewImage_Click"/>
                <MenuItem x:Name="mnuItmOpen" Header="_Open Image" Background="#252629"/>
                <MenuItem x:Name="mnuItmSave" Header="_Save" Background="#252629" IsEnabled="False"/>
                <MenuItem x:Name="mnuItmSaveAs" Header="_Save as" Background="#252629" IsEnabled="False"/>
                <MenuItem x:Name="mnuItmExport" Header="_Export" Background="#252629" IsEnabled="False" Click="mnuExport_Click"/>
                <MenuItem x:Name="mnuItmExit" Header="_Exit" Background="#252629" Click="mnuExit_Click"/>
            </MenuItem>
            <MenuItem Header="_Edit">
                <MenuItem Header="_Resize Canvas" Background="#252629"/>
                <MenuItem Header="_Settings" Background="#252629"/>
            </MenuItem>
            <MenuItem Header="_?">
                <MenuItem Header="_Help" Background="#252629"/>
                <MenuItem Header="_About" Click="mnuAbout_Click" Background="#252629"/>
            </MenuItem>
        </Menu>
        <StackPanel DockPanel.Dock="Top" Height="30" Orientation="Horizontal" Background="#252629" Panel.ZIndex="999">

        </StackPanel>
        <StackPanel DockPanel.Dock="Bottom" Height="20" Orientation="Horizontal" Background="#353639" Panel.ZIndex="999">

        </StackPanel>
        <StackPanel DockPanel.Dock="Right" Width="300" Orientation="Vertical" Margin="0,1,0,1" Background="#252629" Panel.ZIndex="999">

        </StackPanel>
        <StackPanel DockPanel.Dock="Right" Width="50" Orientation="Vertical" Margin="0,1,1,1" Background="#252629" Panel.ZIndex="999">
            <Button x:Name="btnHand" Width="50" Height="50" Background="#252629" BorderThickness="0" Content="Hand" Click="btnHand_Click"/>
            <Button x:Name="btnPen" Width="50" Height="50" Background="#252629" BorderThickness="0" Content="Pen" Click="btnPen_Click"/>
            <Button x:Name="btnErase" Width="50" Height="50" Background="#252629" BorderThickness="0" Content="Erase" Click="btnErase_Click"/>
            <Button x:Name="btnFill" Width="50" Height="50" Background="#252629" BorderThickness="0" Content="Fill" Click="btnFill_Click"/>
            <Button x:Name="btnColPick" Width="50" Height="50" Background="#252629" BorderThickness="0" Content="Pick" Click="btnColPick_Click"/>
        </StackPanel>
        <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <Grid>
                <Grid x:Name="drawPanel">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50"/>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="50"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="1*"/>
                        <RowDefinition Height="50"/>
                    </Grid.RowDefinitions>
                    <Canvas DockPanel.Dock="Top" Background="#151619" Height="50" Grid.ColumnSpan="3"/>
                    <Canvas DockPanel.Dock="Bottom" Background="#151619" Height="50" Grid.ColumnSpan="3"/>
                    <Canvas DockPanel.Dock="Left" Background="#151619" Width="50" Grid.RowSpan="3"/>
                    <Canvas DockPanel.Dock="Right" Background="#151619" Width="50" Grid.RowSpan="3"/>
                    <Canvas x:Name="canvasDrawBackground" Grid.Column="1" Grid.Row="1" Height="0" Width="0" IsEnabled="False">
                        <Canvas.Background>
                            <VisualBrush TileMode="Tile" ViewportUnits="Absolute" Viewport="0,0,20,20">
                                <VisualBrush.Visual>
                                    <Image Source="images/drawBoardTile.png"></Image>
                                </VisualBrush.Visual>
                            </VisualBrush>
                        </Canvas.Background>
                    </Canvas>
                    <InkCanvas x:Name="canvasDraw" Background="Transparent" Height="0" Width="0" Grid.Row="1" Grid.Column="1" IsEnabled="False" EditingModeInverted="EraseByPoint"/>
                </Grid>
            </Grid>
        </ScrollViewer>
    </DockPanel>
</Grid>

C#-Code for saving

        private void mnuExport_Click(object sender, RoutedEventArgs e)
    {
        Microsoft.Win32.SaveFileDialog dlgSave = new Microsoft.Win32.SaveFileDialog();
        dlgSave.FileName = "unnamed"; // Default file name
        dlgSave.DefaultExt = ".jpg"; // Default file extension
        dlgSave.Filter = "Image (.jpg)|*.jpg"; // Filter files by extension

        // Show save file dialog box
        Nullable<bool> result = dlgSave.ShowDialog();

        // Process save file dialog box results
        if (result == true)
        {
            // Save document
            string filename = dlgSave.FileName;
            //get the dimensions of the ink control
            int margin = (int)this.canvasDraw.Margin.Left;
            int width = (int)this.canvasDraw.ActualWidth - margin;
            int height = (int)this.canvasDraw.ActualHeight - margin;
            //render ink to bitmap
            RenderTargetBitmap rtb = new RenderTargetBitmap(width, height, 96d, 96d, PixelFormats.Default);
            rtb.Render(canvasDraw);

            //saving bitmap
            using (FileStream savestream = new FileStream(filename, FileMode.Create))
            {
                BmpBitmapEncoder encoder = new BmpBitmapEncoder();
                encoder.Frames.Add(BitmapFrame.Create(rtb));
                encoder.Save(savestream);
            }
        }
    }

Thanks for your help!

Answer 1

    public void saveCanvas()
    {
        string subpath = Directory.GetCurrentDirectory();
        SaveFileDialog saveFileDialog12 = new SaveFileDialog();
        saveFileDialog12.Filter = "JPeg Image|*.jpg|Bitmap Image|*.bmp|Gif Image|*.gif|Png File|*.png";
        saveFileDialog12.Title = "Save an Image File";
        saveFileDialog12.InitialDirectory = subpath;
        saveFileDialog12.ShowDialog();

        if (saveFileDialog12.FileName == "") return;
        subpath = saveFileDialog12.FileName.Substring(0, saveFileDialog12.FileName.Length - saveFileDialog12.SafeFileName.Length);

        string extension = saveFileDialog12.FileName.Remove(subpath.IndexOf(subpath), subpath.Length);
        string[] allStr = extension.Split('.');

        string fileName = allStr[0];
        string folderName = fileName + "_" + allStr[1];
        folderName = subpath + folderName;

        Directory.CreateDirectory(folderName);
        DirectoryInfo dInfo = new DirectoryInfo(folderName);
        DirectorySecurity dSecurity = dInfo.GetAccessControl();
        dSecurity.AddAccessRule(new FileSystemAccessRule(new SecurityIdentifier(WellKnownSidType.WorldSid, null), FileSystemRights.FullControl, InheritanceFlags.ObjectInherit | InheritanceFlags.ContainerInherit, PropagationFlags.NoPropagateInherit, AccessControlType.Allow));
        dInfo.SetAccessControl(dSecurity);

        string saveFile = folderName + "\\" + fileName + "_";
        for (int i = 0; i < listCanvas.Count; i++)
        {
            RenderTargetBitmap rtb = new RenderTargetBitmap((int)listCanvas[i].Width, (int)listCanvas[i].Height, 96d, 96d, PixelFormats.Default);
            rtb.Render(listCanvas[i]);
            DrawingVisual dvInk = new DrawingVisual();
            DrawingContext dcInk = dvInk.RenderOpen();
            dcInk.DrawRectangle(listCanvas[i].Background, null, new Rect(0d, 0d, listCanvas[i].Width, listCanvas[i].Height));
            foreach (System.Windows.Ink.Stroke stroke in listCanvas[i].Strokes)
            {
                stroke.Draw(dcInk);
            }
            dcInk.Close();

            FileStream fs = File.Open(saveFile + (i + 1).ToString() + "." + allStr[1], FileMode.OpenOrCreate);//save bitmap to file
            System.Windows.Media.Imaging.JpegBitmapEncoder encoder1 = new JpegBitmapEncoder();
            encoder1.Frames.Add(BitmapFrame.Create(rtb));
            encoder1.Save(fs);
            fs.Close();
        }
    }