How do I save all content of a WPF ScrollViewer as an image

Question

I have a WPF window with a ScrollViewer control containing many child controls that extend vertically. When a user clicks a button located at the bottom of the ScrollViewer I would like all the content (currently in view and out of view) to be saved as an image.

I am using the following code which I have adapted from examples showing how to save the content of a Window:

public static void SaveForm(ScrollViewer container, string filename)
{        
    const int dpi = 96;
    var rtb = new RenderTargetBitmap(
        (int)container.ExtentWidth, //width 
        (int)container.ExtentHeight, //height 
        dpi, //dpi x 
        dpi, //dpi y 
        PixelFormats.Pbgra32 // pixelformat 
        );

    rtb.Render(container);
    SaveRTBAsPNG(rtb, filename);
}

private static void SaveRTBAsPNG(RenderTargetBitmap bmp, string filename)
{
    var enc = new System.Windows.Media.Imaging.PngBitmapEncoder();
    enc.Frames.Add(System.Windows.Media.Imaging.BitmapFrame.Create(bmp));

    using (var stm = System.IO.File.Create(filename))
    {
        enc.Save(stm);
    }
}

Currently a PNG is being produced but it only has the currently visible portion of the ScrollViewer. Is there any way I can get the PNG to contain all of the content, including that which needs to be scrolled into view?

score 11 · Accepted Answer · answered Jul 24 '14 at 12:58

Use this with the CONTENT of you scrollviewer as source, not your scrollviewer itself : (It takes a snapshot even if the content is not visible)

    public static void SnapShotPNG(this UIElement source, Uri destination, int zoom)
    {
        try
        {
            double actualHeight = source.RenderSize.Height;
            double actualWidth = source.RenderSize.Width;

            double renderHeight = actualHeight * zoom;
            double renderWidth = actualWidth * zoom;

            RenderTargetBitmap renderTarget = new RenderTargetBitmap((int)renderWidth, (int)renderHeight, 96, 96, PixelFormats.Pbgra32);
            VisualBrush sourceBrush = new VisualBrush(source);

            DrawingVisual drawingVisual = new DrawingVisual();
            DrawingContext drawingContext = drawingVisual.RenderOpen();

            using (drawingContext)
            {
                drawingContext.PushTransform(new ScaleTransform(zoom, zoom));
                drawingContext.DrawRectangle(sourceBrush, null, new Rect(new Point(0, 0), new Point(actualWidth, actualHeight)));
            }
            renderTarget.Render(drawingVisual);

            PngBitmapEncoder encoder = new PngBitmapEncoder();
            encoder.Frames.Add(BitmapFrame.Create(renderTarget));
            using (FileStream stream = new FileStream(destination.LocalPath, FileMode.Create, FileAccess.Write))
            {
                encoder.Save(stream);
            }
        }
        catch (Exception e)
        {
            MessageBox.Show(e);
        }
    }

Worked perfectly, when I figured out the zoom. +1 one for this! — evilfish, Nov 24 '19 at 09:21

Ugur · Answer 2 · 2023-07-17T07:49:48.333

Here I have my code for exporting canvas as image. I think , it will work for also ScrollViewer if you change from Canvas to ScrollViewer. With this code, You could also save all View.

    public static void ExportToImage(Canvas canvas)
    {
        
        var dlg = new SaveFileDialog();
        dlg.Filter = "JPEG Files (*.jpeg)|*.jpeg|PNG Files (*.png)|*.png|JPG Files (*.jpg)|*.jpg|GIF Files (*.gif)|*.gif";
        dlg.DefaultExt = "png";
        dlg.FilterIndex = 2;
        dlg.FileName = "DesignerImage.png";
        dlg.RestoreDirectory = true;

        // Display OpenFileDialog by calling ShowDialog method 
        Nullable<bool> result = dlg.ShowDialog();
        string path = dlg.FileName;
        int selectedFilterIndex = dlg.FilterIndex;

        if(result==true)
        {

            try
            {
                RenderTargetBitmap renderBitmap = new RenderTargetBitmap(
                         (int)canvas.ActualWidth, (int)canvas.ActualHeight,
                          96d, 96d, PixelFormats.Pbgra32);
                // needed otherwise the image output is black
                canvas.Measure(new Size((int)canvas.ActualWidth, (int)canvas.ActualHeight));
                canvas.Arrange(new Rect(new Size((int)canvas.ActualWidth, (int)canvas.ActualHeight)));

                renderBitmap.Render(canvas);
                BitmapEncoder imageEncoder = new PngBitmapEncoder();


                if (selectedFilterIndex == 1)
                {
                    imageEncoder = new JpegBitmapEncoder();
                }
                else if (selectedFilterIndex == 2)
                {
                    imageEncoder = new PngBitmapEncoder();
                }
                else if (selectedFilterIndex == 3)
                {
                    imageEncoder = new JpegBitmapEncoder();
                }
                else if (selectedFilterIndex == 4)
                {
                    imageEncoder = new GifBitmapEncoder();
                }

              imageEncoder.Frames.Add(BitmapFrame.Create(renderBitmap));

                using (FileStream file = File.Create(path))
                {
                    imageEncoder.Save(file);
                }
            }
            catch (Exception ex)
            {

            }
     }

    }

Great code, but have small issue with it. Posted about that here: https://stackoverflow.com/questions/76692063/wpf-scrollviewer-arrange-make-it-go-up — user1019042, Jul 15 '23 at 03:03
@user1019042 thanks for the update. It was really old code :) — Ugur, Jul 17 '23 at 07:50

How do I save all content of a WPF ScrollViewer as an image

2 Answers2

Linked